CSS

Cascading Style Sheets의 약자
html문서 스타일링을 하는 것

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

body ==> 셀렉터(Selector)
color:red;
font-size:30px; ==> 선언 블록(Declaration block)
color:red; ==> 선언(Declaration)
font-size:30px; ==> 선언(Declaration)
color, font-size ==> 속성명(Property)
red;, 30px; ==> 속성갑(Value)
; ==> 선언 구분자

CSS 파일추가는 href속성 활용

<link rel="stylesheet" href="index.css" />

기본적인 Selector

id

id로 이름 붙여서 스타일링 적용하기
#id를 이용해서 특정 id에 스타일을 줄ㄷ 때 선택

class

class로 스타일을 분류하여 적용하기
.class로 동일한 스타일을 목적이 동일한 여러 엘리먼트에 적용가능
여러 개의 class를 하나의 엘리먼트에 적용

id Vs class

id
#으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음
문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
엘리먼트 단 하나의 값을 가짐
특정 엘리먼트를 이름 붙이는 데 사용

class
.으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음
동일한 값을 갖는 엘리먼트 많음
엘리먼트가 여러 값을 가질 수 있음
스타일의 분류(classification)에 사용

텍스트 꾸미기

색상

글자 색상으로 color속성 사용

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

폰트

글꼴은 font-family 사용
font-size: 폰트 크기
(절대 단위: px, pt 등등
상대 단위: %, em, rem, ch, vw, vh 등등)
font-weigh: 폰트 굵기

텍스트

text-align: 어느 방향으로 정렬
(left, right, center, justify(양쪽 정렬))
text-decoration: 텍스트 꾸미기
(underline, overline 등)
text-transform: 텍스트 변경 (대문자 소문자 첫글자)
(uppercase, lowercase, capitalize)

border

border-width: 테두리의 두께
border-style: 테두리의 스타일
border-color: 테두리의 색상

margin

태그 바깥쪽 여백

padding

태그 안쪽 여백

block

줄바꿈이 되는 박스
block 속성은 한 줄에 나열되지 않고 한 줄을 완전히 차지
width,height 사용 가능
<h1><p><li><div>태그들이 있음

inline

옆으로 붙는 박스
inline 속성은 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
width,height 사용 불가
<span><a><img>태그들이 있음

inline-block

줄바꿈 되지 않는 박스
inline-block은 글자가 차지하는 만큼가짐
width,height 사용 가능