HTML 요소는 크게 인라인 요소와 블록 요소로 분류된다.
▶ 인라인 요소 vs 블록 요소
인라인 요소 (inline element)
- 요소가 가로로 쌓임
- 너비(width)와 높이(height) 값을 지정할 수 없음
- 기본적으로 자신이 포함하고 있는 콘텐츠의 크키만큼 너비와 높이가 최대한 줄어듬
- 블록 요소를 자식으로 가질 수 없음
- <span></span> 등
블록 요소 (block element)
- 요소가 세로로 쌓임
- 가로와 세로 사이즈 지정 가능
- 가로 너비를 지정하지 않을시 가로 너비를 최대한 넓게 사용하려고 함
- 블록 요소와 인라인 요소 모두를 자식으로 가질 수 있음
- <div></div> 등
CSS 선택자는 바로 이러한 HTML 요소들에 각기 다른 CSS 스타일링을 적용하기 위해 사용하는 것이다.
▶ 많이 사용하는 CSS 선택자
1. 기본
태그 선택자 (type selector)
ABC { /* CSS코드 */ }: HTML 태그 이름이 ABC인 요소 선택
클래스 선택자 (class selector)
.ABC { /* CSS코드 */ }: HTML의 class 속성(전역 속성이자 중복 가능함)의 값이 ABC인 요소 선택
아이디 선택자 (ID selector)
#ABC { /* CSS코드 */ }: HTML의 id 속성의 값이 ABC인 요소 선택
2. 복합
일치 선택자 (basic combinator)
ABCXYZ { / * CSS코드 * / }: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
후손 선택자 (descendent combinator)
ABC XYZ { /* CSS코드 */ }: ABC의 하위 요소 중 XYZ 선택
참고로 ABC와 XYZ 부분에 태그 선택자나 클래스 선택자 등이 모두 들어갈 수 있다.
일치 선택자의 경우, 두 선택자 사이에 기호가 들어가지 않기 때문에 별도의 기호가 붙지 않는 태그 선택자를 앞쪽에 써줘야 한다.
ex) div.class O .classdiv X
3. 가상 클래스 (pseudo-class)
:hover
ABC:hover { /* CSS코드 */ }: 선택자 ABC에 해당하는 요소에 마우스 커서가 올라가 있는 동안 선택
:active
ABC:active { /* CSS코드 */ }: 선택자 ABC에 해당하는 요소에 마우스를 클릭하고 있는 동안 선택
:nth-child(n)
ABC:nth-child(n) { /* CSS코드 */ }: 선택자 ABC에 해당하는 요소의 모든 하위 요소 중 n번째 자식 요소를 선택
한 요소에 다양한 CSS 스타일링이 적용될 때, 스타일 규칙 간의 충돌이 발생할 수 있다. 이를 방지하기 위해 CSS에서는 우선순위 규칙, 즉 캐스케이딩(cascading) 규칙에 따라 스타일을 적용한다.
▶ 선택자 우선순위
우선순위란?
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 적용할지 결정하는 방법
1) !important > 인라인 선언 > ID 선택자 > class 선택자 > 태그 선택자
2) 우선순위가 같을 경우, 가장 마지막에 해석된 선언이 우선시 된다.
이제 본 포스팅의 본격적인 주제로 들어가 보도록 하겠다.
▶ CSS 박스모델
width, height : 요소의 가로/세로 크기 지정 (기본값은 auto)
max-width, max-height : 요소의 최대 가로/세로 크기 지정 (기본값은 none)
min-width, min-height : 요소의 최소 가로/세로 크기 지정 (기본값은 0)
외부여백 (margin)
: 요소의 외부 여백 (기본값은 0이며 auto로 중앙 정렬 가능)
테두리 (border)
border: border-width border-style border-color;: 요소의 선 두께, 스타일, 색상을 지정
내부여백 (padding)
: 요소의 내부 여백
margin, padding은 모두 단축속성과 개별속성을 갖고 있다. 단축속성을 사용하면 여러 방향에 대해 한 줄로 속성 값을 지정할 수 있으며, 개별속성을 사용하면 특정 방향에 대한 세밀한 제이를 할 수 있다.
단축속성 사용시 값이 몇 개 주어지느냐에 따라 적용되는 방향이 달라짐을 주의하자.
1개 : 모든 방향(top,right,bottom,left)에 적용
2개 : 1번째 값은 top과 bottom에, 2번째 값은 right과 left에 적용
3개 : 1번째 값은 top, 2번째 값은 right과 left, 3번째 값은 bottom에 적용
4개 : 각 값이 top,right,bottom,left(시계방향)순으로 적용
border나 padding 속성을 사용하게 되면, 테두리와 내부여백이 들어간만큼 요소의 크기가 커진다. 원한다면 box-sizig이라는 속성을 통해 이를 제어할 수 있다.
box-sizing : 요소의 크기(width와 height)를 계산하는 기준을 지정
- content-box : 요소의 내용(컨텐츠)만을 기준으로 계산
- border-box : 요소의 내용 + padding + border의 값을 기준으로 계산
▶ CSS를 이용한 HTML 요소들의 정렬
display
: 요소의 화면 출력 특성을 지정하는 CSS 속성
- blcok : 기본적으로 가로 너비가 부모 요소의 100%를 차지하고 세로 너비는 자신의 컨텐츠에 따라 결정됨. 수직 정렬.
- inline: 컨텐츠의 너비만큼 공간을 차지하며 가로나 세로 너비를 지정할 수 없음. 수평 정렬.
- inline-block : 인라인 요소의 특성을 가지며 글자로 취급되면서도, 블록 요소처럼 가로와 세로 너비를 지정할 수 있음.
- flex : 1차원 레이아웃인 플렉스박스(flexbox) 레이아웃을 생성하여 수평 및 수직 정렬을 용이하게 해줌.
이 중 flex 정렬에 대한 내용이 정말 중요하고 많다. 잘 숙지할 것.
