선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할을 수행합니다.
선택자 - selector
먼저 <h1>과 같은 일반적인 태그 이름을 선택자로 사용할 수 있습니다. 또한 CSS에서는 ,(콤마)로 선택자 여러 개의 스타일을 한꺼번에 지정할 수 있습니다.
h1, p {
color: red;
}
h1 {
background: blue;
}
p {
background: green;
}중복을 제거하여 코드 효울을 높일 수 있도록 스타일을 지정해야 합니다.
CSS의 기본단위
CSS에서 프로퍼티가 다양한 만큼 값 역시 다양합니다. 또한 각 프로퍼티에 따라 쓸 수 있는 값이 정해져 있습니다.
CSS에서 값의 대표적인 것으로는 크기 단위가 있습니다. 글자 사이즈. 높이나 너비 등 크기 단위를 이용 수치를 조정합니다. 크기 단위는 크게 고정 크기 단위(고정된 값)와 가변 크기 단위(변하는 값) 둘로 나눌 수 있습니다.
고정 크기 단위
고정 크기 단위는 아래와 같이 다양합니다.
px 픽셀
이 중 px(픽셀)은 웹에서 대표적으로 쓰이는 고정 크기 단위입니다. 픽셀은, 화소는 디스플레이를 구성하느 최소 단위를 의미합니다.
픽셀은 장치의 해상도에 따라 다른 크기를 가지기 때문에 브라우저에서의 1px은 1/96 inch로 고정되어 있습니다. 즉, 정해진 길이로 쓰입니다.
가변 크기 단위
가변 크기 단위는 아래와 같이 다양합니다.
em 과 rem
em과 rem은 상대적인 길이를 가집니다. 하지만 기준에 따라 차이가 생기는 데 em은 스타일이 지정되는 요소의 폰트 크기 기준으로 rem은 최상위 요소의 폰트 크기를 기준으로 합니다.
기본적으로 웹브라우저는 기본 16px을 가지고 있습니다.
이런 em과 rem은 다양한 사이즈의 기기 즉, 브라우저 환경이 하나로 정형화 되지 않거나 웹페이지를 확대 및 축소할 때 반응하는 웹을 만들 때 사용합니다.
추가로 기기에 따라 반응하는 웹을 반응형 웹(Responsive Web)이라고 합니다. 한편 CSS에서 상속으로 인해 복잡함이 발생하는 것을 방지하기 이해 rem을 사용하길 권장합니다.
%(퍼센트)
%또한 상대 길이입니다. 이미지나 레이아웃의 너비나 높이를 지정할 때 자주 사용됩니다.
html {
background-color: skyblue;
font-size: 32px;
}
#main {
background-color:bisque;
width: 50%;
}
#per {
background-color: blue;
width: 50%;
}#main의 경우 html의 50% 너비만큼 가지고 다시 #per의 경우 #main을 기준으로 50%를 가집니다.
%는 기준이 되는 상위 요소의 font-size를 기준으로 하지 않고 너비, 높이, 폰트 크기 등 각각의 프로퍼티 값의 상대적인 값을 가집니다.
예를 들어
상위 font-size가 18px 이고 해당 요소가 50%면 해당 요소의 font-size는 9px 입니다.
출처)
groom-edu
해당 내용은 k-digital credit 구름 강의 내용을 보고 정리한 내용입니다.
