2023-02-15 회고 : CSS기초

Jisu An·2023년 3월 29일

CSS 프론트엔드

코드스테이츠 프론트엔드 부트캠프 44기

목록 보기

2/3

오늘 배운 것✏️

Unit3 - CSS 기초

Chapter 1.

💡 학습 목표

CSS의 사용 목적을 이해한다.
CSS의 기본 문법과 구조를 이해한다.
CSS를 HTML에 적용하는 방법에 대해서 이해한다.
HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
CSS를 이용해 텍스트를 꾸밀 수 있다.
CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
- 각 단위가 적합한 경우를 구분할 수 있다.
MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

Chapter 1-2. CSS 따라하기

개념

🛠 CSS 내용 분해하기

✅ CSS 스타일을 적용할 수 있는 방법

같은 줄에서 스타일을 적용하는 인라인 스타일
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 내부 스타일 시트

<link>태그 안에서 href속성을 통해 파일을 연결 하는 외부 스타일 시트

💡 id와 class의 차이점을 반드시 기억

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

질문 ❓ 질문
- 위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
- 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
- 글자 색을 바꾸기 위한 속성은 무엇인가요?
- 배경 색을 바꾸기 위한 속성은 무엇인가요?
- background 속성과 background-color 속성은 어떻게 다른가요?
- em의 의미는 무엇인가요?

Chapter 1-3. 텍스트 꾸미기

🎨 기타 스타일링

추가적으로 텍스트를 꾸밀 때 자주 사용하는, 알아두면 유용한 속성입니다. 사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인할 수 있습니다. 직접 검색해서 내용을 확인해 보세요!
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
  
  👉 정렬
- 가로로 정렬할 경우 text-align을 사용
  - 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.
- 세로로 정렬할 경우에는 문제가 조금 복잡
  - vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 함.
  - 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있음
  
  🚫 **<center> <font>를 사용하지 말아야 하는 이유
- HTML의 초기에는, 스타일을 별개로 정의한다는 컨셉이 없었습니다. 그래서 <center>가운데 정렬</center>
  혹은 <font color="#ff0000">빨간 글자</font>
  와 같이 사용했습니다. 그러나 지금은 관심사 분리
  라는 패러다임을 적용하여, 더 이상 이 태그(<center></center>, <font></font>)를 사용하지 않습니다. HTML 파일로는 구조를 설계하는 일에만 신경 쓰고, CSS 파일로는 스타일링만 담당하게 작성해 주세요.
- 자간 ⇒ letter-spacing
Chapter 1-4. 절대 단위와 상대 단위

💡 개념학습

알아야 할 몇 가지 단위

글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요합니다. 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
  
  MDN, w3schools 등에서 단위에 대한 더 많은 정보를 확인할 수 있습니다. 여기에서는 절대 단위와 상대 단위를 비교합니다. 그리고 언제, 어떤 단위를 써야 하는지 안내합니다.
  
  글꼴 사이즈를 정할 때
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
  px(픽셀)을 사용합니다.
  1. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리합니다.
  2. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정됩니다.
  3. 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
2. 일반적인 경우
  1. 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)
  
  화면 사이즈를 정할 때
3. 반응형 웹(responsive web)에서 기준점을 만들 때
  1. 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이때에는 디바이스 크기별로 CSS를 달리 적용해야 합니다. 이때, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해 볼 수 있습니다.
4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
  1. 이때에는 vw, vh를 사용하세요. 웹사이트의 보이는 영역을 Viewport라고 합니다. vw, vh 는 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh 를 사용해 구현한 것입니다. (참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다.)

Chapter 2.

💡 박스모델 개요

하나의 웹 페이지 내에 있는 모든 콘텐츠는 고유의 영역을 가지고 있습니다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)라고 부릅니다. 박스는 높이와 넓이, 테두리와 여백 등 다양한 속성을 가지고 있습니다. 이번 챕터에서는 웹 페이지를 구성하는 박스모델에 대하여 학습하고 실습합니다.

학습 목표

CSS 박스 모델을 이해할 수 있다.
박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
- margin, border, padding, content
박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.

Chapter 2-1 박스모델 기초

💡 개념학습

모든 콘텐츠는 고유한 영역이 있음

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨
박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가집니다. CSS를 이용해 속성과 값으로 그 크기를 설정

**줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)**
block 박스 ⇒ 줄 바꿈이 됨 (<h1>, <p>등의 요소)
inline 박스 ⇒ 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없음 (<span>요소)
- block 박스와는 다르게 inline 박스는 width, heigh속성이 적용되지 않습니다.

inline-block 박스 ⇒ 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가짐

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

💡작성한 요소가 어떤 박스인지 확인하는 방법

크롬 브라우저에서 단축키 F12, Ctrl + Shift + i, 또는 Cmd + Opt + i(MacOS)를 입력해 개발자 도구를 열고, 개발자 도구의 Elements 탭에서 이 내용을 확인 가능함
질문

❓ 질문
1. 위 HTML에서 줄 바꿈이 적용되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?
2. 위 CSS 코드에서 실제로 작동하지 않는 것이 존재합니다. 무엇일까요?
  1. span
3. 위 HTML에서 줄 바꿈이 되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?
  1. 줄 바꿈이 되는 요소: <h1>, <p>
  2. 줄 바꿈이 되지 않는 요소: <span>

Chapter 2-2 박스를 구성하는 요소

💡 **개념학습**
- CSS 박스 모델을 이해할 수 있다.
- 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
  - margin, border, padding, content
- 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.

느낀점 / 다짐👏

두번의 프로젝트를 통해서 어느정도 CSS를 잘 사용할 줄 안다고 생각했는데 다시 복습하며 공부하니 헷갈리거나 모르는 부분들이 꽤나 많아서 정리가 다시 필요하다는 생각이 들었다.
오늘 치과, 안과 검진으로 인해서 부득이 하게 오전시간에 공부를 하지 못했는데 병원을 다녀 와 수업도 듣고 과제 제출 까지 하려고 하니 시간도 매우 촉박했고 CSS는 이미 자주 접해서 빨리 끝낼수 있을거라고 생각했는데 조금 힘들었다. 정말 왠만하면 수업에 불참하는 일은 없게 해야겠다고 다짐했다.
그래도 여전히 CSS로 꾸미고 애니메이션 넣는건 재밌다.👍
내일부터 드디어 페어 프로그래밍 시작! 기대된다😊

Jisu An

이전 포스트

2023-02-14 회고 : HTML 기초

다음 포스트

2023-02-15 회고 : CSS기초

코드스테이츠 프론트엔드 부트캠프 44기

오늘 배운 것✏️

개념

알아야 할 몇 가지 단위

글꼴 사이즈를 정할 때

화면 사이즈를 정할 때