[CSS] CSS Basics # 2

simoniful·2021년 4월 3일

CSS

목록 보기

2/8

네이버 부스트캠프 및 칸 아카데미 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

선택자의 구체성

요소를 선택하는 데는 여러 방법이 있습니다. 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다. 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요?

h1 { color: red; }
body h1 { color: green; }

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있습니다. 이를 '구체성'이라고 합니다. 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화하여 계산됩니다.4개의 숫자 값으로 이루어져 있으며, 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다. 조합자는 구체성에 영향을 주지 않습니다. (>, + 등)

1, 0, 0, 0 : 인라인 형식으로 tag에 직접 작성한 경우
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
0, 0, 0, 0 : 전체 선택자(*)

important

p#page { color: red !important; }

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다. important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.

상속되는 속성의 구체성

 * { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 입니다. 그렇다면 <em>에는 어떤 color가 적용될까요? color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문입니다. 따라서, 구체성이 0,0,0,0인 전체선택자가 적용 전체 선택자로 루트요소 즉 <HTML> 태그에 속성에 선언된 * {color: red}가 적용됩니다.

캐스캐이딩(cascading)

폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다. 중요도(!important)와 CSS 출처(제작자>사용자), 구체성, 선언 순서 순으로 모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

<p id="bright">Hello, CSS</p>

p { color: silver; }
p { color: red; } ** 선언순서

p#bright { color: silver; } ** 구체성
p { color: red; }

단위, 배경, 박스모델

단위

절대 길이( px, pt )

고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음

장치의 해상도에 따라 상대적

여러 환경에서 디자인을 같게 표현, 브라우저 호환성에 유리

디자인 의도가 많이 반영된 웹사이트의 경우 px 단위를 사용하는 것을 권장

pt의 경우 인쇄에 적합, OS마다 적용이 다름

상대길이( %, em, rem, vw )

% : 부모의 값에 대해서 백분율로 환산한 크기

em : font-size를 기준으로 값을 환산

rem : <html> 루트 태그의 font-size를 기준으로 값을 환산

vw : viewport의 width값을 기준으로 1%의 값으로 계산

색상

주로 Hex코드를 사용하여 정확한 색채값을 알아볼 수 있게 하는 것이 보편적입니다.

Hexadecimal Code color
6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상(R, G, B)을 나타냅니다.
ex) #ff0452
RGB
3 channels: Red, Green and Blue.
Each ranges from 0 - 255
rgb(0,0,0)
RGBA
alpha(투명도 transparency) channel. Ranges from 0.0 - 1.0
reba(11, 99, 150, .4);

배경

요소의 배경에 관련된 속성을 지정할 때 사용합니다. 배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존재합니다

1. background-color
배경의 색상을 지정

2. background-image
배경으로 사용할 이미지의 경로를 지정
url의 경로는 절대 경로, 상대 경로 모두 사용 가능
background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면,
그 부분에 background-color 색상이 노출

3. background- repeat
이미지의 반복 여부와 방향을 지정하는 속성

repeat (default)
x, y축 으로 모두 반복

repeat-x
x 축 방향으로만 반복

repeat-y
y 축 방향으로만 반복

no-repeat
반복 X

4. background-position
요소에서 배경 이미지의 위치를 지정하는 속성
x축, y축으로부터의 위치를 지정 가능
값의 선언 순서는 x축, y축으로부터의 간격
만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용

% (default)
기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치

px
기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치

키워드
top, left, right, bottom, center 키워드를 사용 가능

5. background-attachment

화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다.

scroll (default)
배경 이미지는 요소 자체를 기준으로 고정, 내용과 함께 스크롤 되지 않음

local
배경 이미지는 요소의 내용을 기준으로 고정, 내용과 함께 스크롤

fixed
배경 이미지는 뷰포트를 기준으로 고정, 스크롤에 영향을 받지 않음

* 뷰포트 :
사용자가 시각적으로 볼 수 있는 웹페이지 영역을 의미
컴퓨터나 휴대폰과 같은 장치에 Display 요소가 표현되는 영역을 말합니다.

* background-size : 배경의 임의의 크기 설정(px, %)
* background-origin : 배경의 위치 기준을 border, padding, content로 잡을 건지 결정
* background-clip : 배경의 넓이 기준을 border, padding, content box로 잡을 건지 결정
* background-blend-mode : 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의

박스모델

HTML의 모든 요소는 사각형의 박스 형태로 만들어집니다.

1. Content 영역
요소의 실제 내용을 포함하는 영역
크기는 내용의 너비 및 높이

2. Border 영역
content 영역을 감싸는 테두리 선

3. Padding 영역
content 영역과 테두리 사이의 여백
content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향
padding은 content의 연장

4. Margin 영역
border 바깥쪽의 영역
border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
주변 요소와의 간격을 margin을 이용해 지정
마진은 패딩과 달리 음수 값을 지정 가능 가능

* margin collapse(마진 병합)

마진 병합은 인접한 두 개 이상의 온전한 block-level 요소일 경우에만 수직 방향 박스의 마진이 하나로 합쳐지는 것

두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합
부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
- 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진의 병합
- 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진의 병합.
내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.
"그럼 빈 요소를 안 만들면 되지 않나?"라고 생각하실지도 모르겠습니다.
하지만 마크업을 진행하다 보면 생각보다 많은 경우에 빈 요소를 만들어놓게 됩니다.

마진 병합을 활용하여 첫 번째와 두 번째 컴포넌트의 조합이 다양한 경우 여백을 다르게 사용 할 수 있습니다.

Width

요소의 가로 크기를 지정하는 width 속성( px, % )은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다.

content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. ( content, padding, border )

상속의 경우 %값일 때 부모의 width값에 대해서 계산되어지는데, 이때 부모의 width는 content 영역의 크기를 의미합니다.
부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이 됩니다.
부모가 만약 인라인 레벨 요소일 때, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산됩니다.

box-sizing이라는 속성을 이용하여 padding, border 영역을 기준으로 크기를 가질 수 있도록 변경가능 합니다.

Height

height는 요소의 세로 크기를 정의하는 데 사용하는 속성( px, % )입니다. width와 마찬가지로 정확히는 content 영역의 높이를 지정합니다.

height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.

상속의 경우 %값일 때 부모가 명시적인 높이 값이 있는 경우에만 적용됩니다. 부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이 됩니다.

height 또한 box-sizing 속성을 이용하여 기준값을 padding 영역, border 영역으로 바꿀 수 있습니다

Q&A

Q. { box-sizing: border-box; }는 무엇을 하나요? 장점은 무엇인가요?

A. height는 내용의 [height + 수직 padding + 수직 border 폭]으로 계산됩니다.
요소의 width 는 내용의 [width + 수평 padding + 수평 border 폭]으로 계산됩니다.
padding과 border를 박스 모델의 일부분으로 생각하면, 디자이너가 실제로 생각하는 것을 구현하는데 있어서 더 유용합니다.