CSS의 기초에 대하여

CSS

# HTML에 CSS 적용하는 방법
# 선택자 규칙
# CSS의 두 단위
# 박스 모델

＊CSS로 기본적인 스타일링 하기

• 시맨틱 태그 : 자신들이 어떤 역할을 하는지 그 이름을 통해 표현 Ex) <header> <main> <nav> <aside> <footer태그 ≒ <div>
• CSS 파일 추가 -link 태그 안에서 href 속성을 통해 파일 연결 <link rel="stylesheet" href="index.css" />
• link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용. link 태그의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타냄. CSS(Cascading Style Sheet)는 Style sheet이므로 rel 속성에 stylesheet을 추가
• CSS 스타일 적용 방법
  1. 인라인 스타일 : 같은 줄에서 스타일을 적용 <nav style="background: #eee; color: blue">...</nav>
  2. 내부 스타일 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style 태그 내에 작성
  3. 외부 스타일 : CSS 파일 별도로 작성
• id로 이름 붙여서 스타일링 적용하기

↓ (h4가 여러 색션 하위에 존재한다면)

id가 있는 요소를 선택할 때에는 #기호를 이용. id는 하나의 문서에서 한 요소에만 사용해야 함

🎫 class로 스타일 분류하여 적용하기

↓ (li가 여러 색션 하위에 존재한다면)

-> CSS를 여러 요소에 적용하기 위해서 class를 사용. class는 #이 아닌 .을 이용해 선택

---

🎫 여러 class를 한 요소에 적용하기

• 여러 class를 하나의 요소에 적용하기 위해서는, 공백으로 적용하려는 class의 이름을 분리

※ id와 class의 차이점

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름 붙이는데 사용	스타일 분류에 사용

※ id 및 class를 목적에 맞게 사용하기

• id : 고유(유일)한 이름을 붙일 때
• class : 반복되는 영역을 유형별로 분류할 때

---

＊텍스트 꾸미기

• 색상
  글자의 색상을 변경하는 속성은 color

• 글꼴
  글꼴의 속성은 font-family

사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있음. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있음. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있음. 입력된 순서대로 fallback이 적용

 

• 크기
  글자의 크기 변경을 위해서는 font-size 속성 사용

• 글꼴의 단위 
  1. 절대 단위 : px, pt 등
  2. 상대 단위 : %, em, rem, ch, vw, vh 등

---

※언제, 어떤 단위를 써야하는가

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
px : (픽셀)을 사용합니다. px은 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리합니다. 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정됩니다. 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.

 

2. 일반적인 경우

상대 단위인 rem 을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

 

3. 반응형 웹(responsive web)에서 기준점을 만들 때

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다. 이때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해 볼 수 있습니다.

 

4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

이때에는 vw, vh를 사용하세요. 웹사이트의 보이는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로 body 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

---

• 기타 스타일링
  
  • 굵기: font-weight
  • 밑줄, 가로줄: text-decoration
  • 자간: letter-spacing
  • 행간: line-height

 

• 정렬

- 가로로 정렬할 경우 `text-align`을 사용 - 값으로는 `left`, `right`, `center`, `justify`(양쪽 정렬)
- 세로로 정렬할 경우 `vertical-align`속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 `display`속성이 반드시 `table-cell`이어야 함. 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용 가능.

---

＊박스 모델

• 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가짐.
• CSS를 이용해 속성과 값으로 그 크기를 설정.
  • 박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣기!

 

✨줄바꿈이 되는 박스 vs 옆으로 붙는 박스

• block 박스 : 줄바꿈이 되는 박스 (<h1>, <div>, <p>)
• inline 박스 : 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스 ( <span>)

---

＊박스를 구성하는 요소

• border(테두리)

테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듬

p {
  border: 1px solid red;
}

border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)

• margin(바깥 여백) : 값은 top, right, bottom, left로 시계방향

p {
  margin: 10px 20px 30px 40px;
}

-값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px

-값을 하나만 넣으면 모든 방향의 바깥 여백에 적용

-물론 다음과 같이 방향을 특정한 속성도 존재

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

-바깥 여백에는 음수 값을 지정 가능. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듬.

-극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음

• padding(안쪽 여백) : 값 top, right, bottom, left로 시계방향

---

＊박스를 벗어나는 콘텐츠 처리

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옴

🎁박스 크기 측정 기준

• 여백과 테두리 두께를 포함한 박스 계산법

  * {
    box-sizing: border-box;
  }
  

  *은 모든 요소를 선택하는 셀렉터. 모든 요소를 선택해 box-sizing속성을 추가하고, border-box라는 값을 추가