[Front] CSS

안녕하세요 백엔드 개발자 홍민정입니다 🫧

오늘은 CSS에 대해 알아보고자 합니다 !

🎨  CSS

☝🏻 CSS (Cascading Style Sheets)

   - 웹 페이지의 스타일링 담당하여 독립적으로 기능하지 않음

   - HTML이 웹 페이지의 구조와 내용을 담당한다면 CSS는 각 HTML의 요소를 꾸미는 역할을 담당함

---

📍 CSS의 역할

 :  효율적으로 사용자 인터페이스(UI)를 구성함으로써 더 나은 사용자 경험(UX)을 제공하기 위해 사용

   - 웹 페이지를 화려하게 꾸미기 전에 먼저 웹 페이지의 구성 계획

   - 콘텐츠의 배치와 위치 (레이아웃 디자인)

   - CSS를 통해 화면에 나타나는 정보들의 레이아웃을 최적화함으로써 정보 전달력을 끌어올림

   - 콘텐츠의 가독성을 향상시킬 수 있음

---

📍 CSS 태그 : 시맨틱 태그

   - 시맨틱 태그는 이 태그가 감싸고 있는 영역에서 어떤 역할을 담당하는지 개발자가 쉽게 파악하도록 도움

  1️⃣ 셀렉터 (Selector)

 - 태그 이름이나 id, 또는 클래스를 선택

 - 셀렉터로 특정 요소를 선택했다면 중괄호 안에서 이 요소에 적용할 내용 작성

  2️⃣ 속성 

 - 요소에 적용할 수 있는 내용

 - 색상, 글자 크기 등 다양한 속성 등이 있음

 - 속성에 적용할 적적한 값을 입력하여 스타일 표현 ( color: blue; 는 파란색으로 스타일링)

 - 속성과 값의 끝에는 세미콜론으로 구분

---

📍 CSS 파일추가

 - CSS 파일을 HTML 파일에 연결할 때에는 link 태그 안에서 href 속성을 통해 파일을 연결

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

 - link 태그는 HTML 파일과 다른 파일을 연결

 - rel은 연결하고자 하는 파일의 역할이나 특징

 - href는 파일 위치

---

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

  1️⃣ 인라인 스타일 : 같은 줄에서 스타일을 적용

  2️⃣ 내부 스타일 시트 :  별도의 파일로 구분하지 않고 style 태그 내에 작성

  3️⃣ 외부 스타일 시트 :  HTML태그에 직접 CSS 속성을 추가

---

📍 id로 이름 붙여서 스타일링 적용

  1️⃣ h4 태그의 색상을 변경

h4 {
	color: white;
}

2️⃣ h4 요소에 id를 붙임

 - id는 하나의 문서에 한 요소에서만 사용해야 함

 - 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용

<h4 id="title"> This is Title </h4>

---

📍 class로 스타일을 분류하여 적용

1️⃣ li 요소에 밑줄을 침

li{
	text-decoration: underline;
}​

2️⃣ class를 사용하여 스타일링

 - 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용

<ul>
	<li class="this">Home</li>
        <li class="this">Diary</li>
	<li class="this">photo</li>
	<li class="this">command</li>
</ul>

3️⃣ 여러 개의 class를 하나의 엘리먼트에 적용하기

 - 요소를 만들거나 요소에 스타일링 적용할 때에는 항상 이름과 목적이 일치하는지 잘 살펴보기

---

📍 id와 class의 차이점

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

---

☝🏻 텍스트 꾸미기

📍 색상 : color

   - 글자의 색상을 변경하는 속성

   - 속성 값은 HEX (RGB가 16진수로 표현된 값) 또는 색상의 이름을 사용할 수 있음

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

---

📍 글꼴 : font-family

   - 글꼴의 이름은 따옴표를 붙여 적용할 수 있음

.cup{
	font-family: "MalgunGothic" ;
 }

---

📍 크기 : font-size

.memu {
	font-size : 54px;
}

 →  글꼴의 크기에서는 단위가 중요함!

   ▪️ 절대 단위 : px, pt 등 

    (1) 픽셀

     - 환경에 영향을 받지 않는 절대적인 크기를 정하는 경우

     - 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 분리함

     - 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리 

   ▪️ 상대 단위 : %, em, rem, ch, vw, vh 등

   (1) rem 렘

     - 일반적인 경우는 상대단위인 rem 추천

     - 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성 유리

   (2) vw, vh

     - 웹사이트의 보이는 영역을 Viewport라고 함

     - vw : viewport width

     - vh : viewport height

---

📍 기타 스타일링

  - 스타일링 사용법은 w3school이나 mdn 통해 쉽게 확인 가능

   [ 굵기 ] : font-weight

   [ 밑줄,가로줄 ] : text-decoration

   [ 자간 ] : letter-spacing

   [ 행간 ] : line-height

---

📍 정렬

 1️⃣ 가로 정렬: text-align

  - 유효한 값: left, right, center, justify

 2️⃣ 세로 정렬

 - 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용할 수 있음

---

✌🏻 박스 모델

- 모든 콘텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트들이 하나의 박스가 됨

- 박스는 항상 직사각형이며 너비와 높이를 가지며 CSS로 속성과 값 크기를 설정

 

📍 박스의 종류

 ⚡️ block : 줄바꿈이 되는 박스

 ⚡️ inline : 줄바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스

 ⚡️ inline-block : block + inline

 

    🪴 HTML에서 줄바꿈 관련 태그는 ?

      - 줄바꿈이 되는 태그 : <h1> <p>   →  block 박스

      - 줄바꿈이 되지 않는 태그 : <span>   → inline 박스

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

---

📍 박스를 구성하는 요소

   ⚡️ border(테두리)

     - 각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인 가능

     - border-width : 테두리 두께

     - border-style : 테두리 스타일

     - border-color : 테두리 색상

   ⚡️ margin (바깥 여백)

     - 각각의 값은 top, right, bottom, left로 시계방향임

     - 값을 두 개만 넣으면 top과 bottom

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

     - margin-top: 10px;로 직접 특정 여백 추가 가능

     - 음수값을 지정하면 다른 엘리먼트와의 간격이 줄어듦 (화면에서 아예 사라지거나 겹치게 가능)   

    ⚡️ padding (안쪽 여백)

     - border를 기준으로 박스 내부의 여백을 지정함

     - 값의 순서에 따른 방향은 margin과 동일

---

📍 overflow (박스를 벗어나는 콘텐츠 처리)

   - 박스의 속성이 콘텐츠 크기보다 작을 경우 overflow : auto; 활용

---

📍 박스 크기 측정 기준

   - 박스에 적용할 여백을 고려하고 박스의 크기를 디자인하는 것이 중요

   - width로만 판단하면 안됨 !!!!!

   - 공백이랑 테두리 영역까지 모두 더해서 너비를 계산함

   - ex) 300px(콘텐츠 영역) + 10px(padding-left) + 10px(padding-right) + 2px(border-left) + 2px(border-right)