CSS

멜로디·2021년 1월 28일

CSS

CSS는 HTML의 구성요소를 셀렉터로 선택한다.

body {
       color: red;
       font-size: 30px;
     }

위 보기에서 body부분을 '셀렉터',
color, font-size 부분을 '속성명',
red, 30px부분을 '속성값' 이라 칭하며,
color: red; 또는 font-size: 30px; 한 항목을 '선언'으로 칭한다.
그리고 선언이 포함된 중괄호 내 모든 영역을 '선언 블록(Declaration box)'이라 한다.

html에서 css파일 추가

head에

<link rel ="stylesheet" href="파일명.css" />

위 내용을 삽입하면 브라우저가 저 구문을 읽을 때 지정된 css 파일도 함께 불러오게 된다.

글자

글자 색상은 color 속성을 사용한다. 값으로는 HEX 또는 사전에 지정된 주요 색상 이름을 사용할 수 있다.

배경 색상이나 박스 테두리 등을 지저어할 수 있다.

.box {
       color: #155724; (글자색상)
       background-color: #d4edda; (배경색상)
       border-color: #c3e6d0; (테두리색상)

글꼴은 font-family를 사용한다 (글꼴이 없을 때 사용하는 대비책 묶음)

.emphasize {
            font-family: "SF Pro KR", "MalgunGothic", "Verdana";
           }

글꼴은 상대방의 PC에 없으면 표시되지 않는다
웹폰트를 이용하면 PC에 없는 글꼴이라도 표시할 수 있다
크기는 font-size를 이용하여 지정한다.

CSS에서 사용하는 몇가지 단위

절대 단위 : pt, px 등
상대 단위 : %, em, rem, ch, vw, vh 등

절대적이고 확실한 크기로 정할 때

px(픽셀)을 사용한다.
단, 화면 크기가 일정하지 않거나, 모바일 환경에서는 의도와 다르게 보일 수 있다.
따라서 접근성에서 불리하기 때문에 화면 크기가 절대적으로 고정된 경우에 쓰면 유리하다.

보통의 경우

rem을 사용한다.
root의 글자 크기(브라우저의 글자 크기)가 1rem이며, 2rem은 2배로 보이고 0.8rem은 작게 보인다.
(em은 사용자 설정이나 환경에 따라 크기가 바뀌므로 계산이 어렵다)

반응형 웹(responsive web)을 만들 때

디바이스의 너비(width)에 따라 레이아웃이 유동적으로 변한다.
따라서 디바이스 크기 별로 CSS를 다르게 적용해야 한다.
보통 450px 미만의 너비를 스마트폰으로 가정하고 제작한다.

화면의 너비나 높이에 따라 상대적으로 크기가 중요한 경우

vw, vh (viewport width, viewport height)를 사용한다.
웹사이트에서 보여지는 부분을 viewport라고 한다.
화면을 가득 채우며 정확히 딱 떨어지는 사이트는 vw, vh를 각각 100으로 설정한 경우다.
(body에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을때 보여지는 영역까지 포함하였을 때의 비율을 말한다)