CSS 간단한 정리
CSS는 웹 페이지에서 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다. HTML로 세워진 웹 페이지의 구조를 잘 꾸며줄 수 있습니다. CSS를 통해 더 나은 UI/UX를 제공할 수 있습니다.
CSS 파일 추가
작성된 HTML파일 안에 css 파일을 연결하기 위해서는 link태그를 이용합니다.
<link rel="stylesheet" href="index.css" />
CSS 기본 문법
선택자는 특정 태그의 이름, id, class 등을 선택합니다. 이어지는 중괄호 안에서 해당 요소에 적용할 내용을 적을 수 있습니다. 속성 : 속성값를 적절히 사용한 다음 세미콜론을 붙여 마무리합니다. 선언은 여러번 할 수 있습니다.
h1 {
color : red;
font-size : 30px;
}
기본적인 셀렉터
셀렉터는 HTML 태그를 포함합니다. 특정 부분을 선택하는 방법으로는 id를 사용하는 방법과 class를 사용하는 방법이 있습니다. 모든 html 태그는 id, class를 속성값으로 가질 수 있습니다. id는 하나의 문서에서 한 요소에만 사용해야 합니다. id가 name이라면 css파일에서는 #name { ... }의 형태로 적어야 합니다. class는 여러 요소가 동일한 기능을 할 수 있게 만듭니다. 온점을 class 속성값 앞에 붙여서 css문서를 작성합니다. 태그의 class 속성의 속성값으로 여러가지가 들어갈 수 있고, 공백을 통해 구분합니다.
...
<p>hello world</p>
<ul>
<li class="pencil">pencil 1</li>
<li id="ballpen">pencil 2</li>
</ul>
...#pencil {
color : red;
font-size : 30px;
}
.ballpen {
color : blue;
font-size : 20px;
}
p {
color : yellow;
}
텍스트 꾸미기
- color : 색상을 변경합니다. 삽입할 수 있는 값으로는 #XXXXXX 형태를 쓸 수 있습니다. 각 두 자리 16진법 수는 (0 ~ 255)의 RGB값을 의미합니다.
- font-family : 글꼴을 설정합니다. 여러 가지를 설정할 경우 앞쪽의 폰트부터 적용하고 없다면 뒤의 폰트를 적용합니다.
- font-size : 글자의 크기를 설정합니다. 글자의 크기에서 단위는 절대 단위(px)와 상대 단위(%, em, rem)가 있습니다.
- font-weight : 굵기를 설정합니다.
- text-decoration : 밑줄, 가로줄 등을 설정합니다.
- letter-spacing : 자간을 설정합니다.
- line-height : 행간을 설정합니다.
- text-align : 가로로 정렬합니다. 값으로는 left, right, center, justify가 있습니다.
박스 모델
웹 페이지 내의 모든 콘텐츠는 고유의 영역을 가집니다. 영역은 항상 직사각형으로 이루어져 있기 때문에 박스(box)라고 부릅니다. 박스는 높이, 넓이, 테두리, 여백 등 다양한 속성을 가지고 있습니다. 박스는 4가지의 요소, 내용(content)과 테두리(border) 기준으로 안쪽 여백(padding)과 바깥 여백(margin)으로 이루어져 있습니다.
border : border-width, border-style, border-color
margin : top, right, bottom, left
padding : top, right, bottom, left
"box-sizing : border-box" 을 사용하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산합니다.