[CSS] CSS 기초

CSS

---

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.

더 나은 사용자 경험을 제공하기 위해 사용합니다.

문법 구성

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

body: 셀렉터: 요소 이름이나 id, class를 선택합니다.
{}: 선언 블록
color, font-size: 속성명
red, 30px: 속성 값

CSS 파일을 추가하는 방법

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

id와 class의 차이점

---

id	class
#으로 선택	.으로선택
고유한 값	동일한 값 가능
특정 요소의 이름을 붙이는데 사용	스타일의 분류에 사용

절대 단위와 상대 단위

---

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
px: 크기가 고정된 절대 단위이므로 사용자 접근성이 불리합니다.

em과 rem

공통점

• font-size 속성 값에 비례해서 결정되는 상대 단위입니다.
• 예시 ) font-size가 16px일 경우 0.5em = 16px * 0.5 = 8px 1em = 16px * 1 = 16px 2em = 16px * 2 = 32px
  

차이점

em은 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다.
rem은 최상위 요소의 font-size 속성 값이 기준이 됩니다.

html  {
  font-size: 16px;
}    
div  {
  font-size: 20px;
  width: 10em; /* 200px */
}
div  {
  font-size: 20px;
  width: 10rem; /* 160px */
}

vw: viewport width, 1vw는 현재 실행중인 스크린 너비의 1 / 100
vh: viewport height, 1vh는 현재 실행중인 스크린 높이의 1 / 100

박스 모델

---

box의 종류

• block box: 줄 바꿈이 되는 박스입니다.
• inline box: 줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스입니다.(width, height 사용 불가능)
• inline-block box: 줄 바꿈이 일어나지 않는 동시에 blcok 박스의 특징도 가집니다.

박스를 구성하는 요소

margin

border

padding

content

border

• 영역의 테두리입니다.

margin

• 바깥 여백입니다.
• margin: 1px 2px 3px 4px 일 경우, 각각 top, right, bottom, left
• margin: 1px 2px 일 경우, top과 bottom이 10px, left와 right가 20px
• margin: 1px 일 경우, 모든 방향에 1px 적용합니다.
• margin-top, margin-left와 같이 방향 특정 가능합니다.
• margin-top: -2rem 과 같이 음수를 지정하게 되면 다른 엘리먼트와의 간격이 줄어들어서 화면에서 사라지게 하거나 다른 엘리먼트와 겹치게 만들기 가능합니다.

padding

• 안쪽 여백입니다.
• 방향과 규칙은 margin과 동일하게 적용합니다.

콘텐츠가 박스 크기를 벗어난다면?

overflow 속성으로 해결이 가능합니다.

• overflow: auto: 스크롤이 생성됩니다.
• overflow: hiddne: 넘치는 부분은 보이지 않습니다.

박스 크기 측정 기준

박스의 크기는 설정한 width나 height만이 아니고 margin, padding, border의 크기들도 전부 더해서 정해지기 때문에 여백까지 계산해서 레이아웃 디자인을 해야 합니다.

하지만 레이아웃 디자인을 좀 더 쉽게 하는 방법이 있습니다.

*  { 
  box-sizing: border-box; 
}

*은 모든 요소를 선택하는 셀렉터입니다. 모든 요소에 box-sizing: border-box를 적용하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산이 됩니다.

• border-box인 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom
• content-box인 경우 box의 높이: height

셀렉터

---

전체 셀렉터

• * { }

태그 셀렉터

• h1 { }, div { }, …

ID 셀렉터

• #아이디 { }

class 셀렉터

• .클래스 { }

attribute 셀렉터

• a[href] { }, div[class=”hidden”] { }, …

자식 셀렉터

• header > p { }
• 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다.

후손 셀렉터

• header p { }
• 첫 번째로 입력한 요소의 후손을 선택 → 자식의 자식인 요소들도 전부 선택합니다.

형제 셀렉터

• section ~ p { }
• 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째로 입력한 요소 전부를 선택합니다.

인접 형제 셀렉터

• section + p { }
• 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 바로 뒤에 오는 두 번째로 입력한 요소를 선택합니다.

가상 클래스 셀렉터

• 요소의 상태 정보에 기반해 선택합니다.
• a:hover, a:active, a:focus …

우선순위

---

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법입니다.

1. 명시도 점수가 높은 선언이 우선
2. 점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선
3. 명시도는 ‘상속’ 규칙보다 우선
4. !important 가 적용된 선언 방식이 다른 모든 방식보다 우선

---

1. 가장 중요 - !important

   모든 선언을 무시하고 가장 우선합니다.

   div  {
     color: red !important
   }

2. 인라인 선언 방식

   HTML style 속성을 활용한 인라인 선언입니다.

   점수: 1000

3. 아이디 셀렉터

   점수: 100

4. 클래스 셀렉터

   점수: 10

5. 태그 셀렉터

   점수: 1