[HTML/CSS] HTML, CSS 기본

HTML/CSS가 어느정도 필요한거 같아 공부하고 기록하기 위한 글입니다.

네이버 부스트코스의 강의를 수강하며 작성하였습니다.

비전공자를 위한 HTML/CSS

 

HTML

HTML Tutorial

 

태그

태그 : <h>, <p>, <br>, <a>

컨테이너 태그 :<div>, <span>

리스트 태그 : <ul>, <ol>, <dl>

빈 태그 : <br>, <img src>, <input type> 내용이 없어 종료가 필요 없음

이미지 태그 : <src alt width heith>

테이블 태그

• <table> : 표를 나타내는 태그
• <tr> : 행을 나타내는 태그
• <th> : 제목 셀을 나타내는 태그
• <td> : 셀을 나타내는 태그

블록 레벨 요소 

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.

div, h1~h6, p, ul, li, table ...

인라인 레벨 요소

라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다.

 span, i, img, em, strong, a ...

 

CSS

CSS Tutorial

 

h1 { color: yellow; font-size:2em; }

• 선택자(selector) - "h1" 
  • class와 id를 기준으로 많이 선택
  • class는 문서내에서 여러개 사용 가능
  • id는 문서내에서 유일
• 속성(property) - "color"
• 값(value) - "yellow"
• 선언(declaration) - "color: yellow", "font-size: 2em"
• 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
• 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

[올바른 CSS]

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

 

HTML 문서구조 부모 자식 관계

 

가상 클래스

미리 정의해 놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스

 

구체성

구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,

구체성의 값이 클수록 우선으로 적용이 됩니다.

구체성은 아래의 규칙대로 계산됩니다. 

•  0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
•  0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
•  0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
•  전체 선택자는 0, 0, 0, 0을 가진다.
•  조합자는 구체성에 영향을 주지 않는다. (>, + 등)

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

선택자의 구체성 값을 잘 알아야 많은 스타일 규칙들을 정의할 때 의도하지 않은 일이 생기지 않습니다.

 

Cascading

구체성은 cascading 규칙 중 하나입니다.

만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면 어떻게 될까요?

 

h1 { color: red; }
h1 { color: blue; }

위 <h1>에는 같은 구체성을 가진 두 규칙이 적용되었습니다.

그렇다면 <h1>에는 어떤 color가 적용될까요?

<h1>에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과입니다.

 

타일이 적용되는 방식은 생각보다 간단합니다.

모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

 

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
2. 스타일 규칙들을 출처에 따라 분류합니다.
3. 스타일 규칙들을 구체성에 따라 분류합니다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.

 

Boxmodel

시계방향을 순서로 값을 지정

padding:1px 2px 3px 4px;

padding:TOP RIGHT BOTTOM LEFT;

 

 

 Content 영역

       요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다.

• Border 영역 - 요소의 테두리
  
  content 영역을 감싸는 테두리 선을 border라고 합니다.
• Padding 영역 - 테두리 사이의 여백
  
  content 영역과 테두리 사이의 여백을 padding이라고 합니다.
  content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다.
  이에 따라 padding을 content의 연장으로 볼 수도 있습니다.

• Margin 영역 - 주변 요소와의 여백(간격) 지정
  
  border 바깥쪽의 영역을 margin이라고 합니다.
  border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다.
  즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다.
  width가 반드시 지정되어야 합니다.