[section 1] CSS 기초

1. 웹 개발 이해하기

CSS란?

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

➡️ 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본소양이므로 화면구성이나 배치, 글씨크기 컴포넌트 기능별로 묶기 등을 위해 필수적으로 익혀야 한다.

1️⃣ CSS적용

• css는 html을 꾸며주는데 사용하므로 html에 적용
  css는 stylesheet이므로 rel속성에 stylesheet를 추가 href에는 파일의 위치 삽입

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

✅ html에서 <div>와 <header>, <main>, <footer>등의 요소는 기능적으로 동일하지만 각각 영역의 역할을 구분하기 위한 시맨틱 요소
->CSS를 공부하다보니 구분하는 이유를 알게되었다. 🥲

2️⃣ CSS의 구성

• 셀렉터: 요소 이름이나 id, 클래스를 선택
• 선언 블록에서 색상, 폰트, 크기 등 변경

id로 스타일링 적용

/* html */
<h4 id="title">This is Title.</h4>

/*css*/
#title {
  color: red;
}

class로 스타일링 적용

/* html */

.menu {
  text-color: red;
}

/*css*/
<ul>
  <li class="menu">a</li>
  <li class="menu">b</li>
  <li class="menu">c</li>
</ul>

id와 class

id	class
#으로 표시	.으로 표시
문서 내 유일한 요소에만 적용	동일한 요소에 적용
고유명사의 의미	분류의 의미

정렬

• 가로 정렬: text-align, left, right, center, justify

css 단위표현

• 절대 단위: px, pt
• 상대 단위: %, em, rem, ch, vw, vh
  - 일반적으로 절대단위는 px 상대단위는rem를 사용
  • 브라우저의 글자 크기 기준이 1rem
• 반응형 웹: 디바이스의 너비에 따라 유동적으로 레이아웃이 적용되는 웹사이트
  -vw, vh은 viewport width, height로 1vw는 보이는 영역 너비의 1/100을 뜻함 따라서 100vw, 100vh는 화면을 꽉채워 만든 웹사이트

3️⃣ 박스 모델

레이아웃의 모든 콘텐츠는 각각 박스들이 모여 하나의 박스로 구성된다.

block, inline, inline-block

	inline	inline-block	block
줄바꿈	줄바꿈❌	줄바꿈❌	줄바꿈⭕️
width	글자에 맞춤	글자에 맞춤	100%
width, height 사용	❌	⭕️	⭕️

• 줄바꿈이 가능한 <h1>, <p>등은 block박스
• 줄바꿈이 불가능한 <span>는 inline박스
  - inline-block은 inline블록처럼 다른 요소에 옆에 붙으면서 고유의 크기를 가짐

  박스 구성

  

  content는 말그대로 콘텐츠 border는 그 콘텐츠의 테두리 padding은 content와 border사이의 여백이라고 이해하면 쉽다. 마지막으로 margin은 바깥쪽 여백을 뜻한다.

❖ 박스크기가 콘텐츠 크기보다 큰경우

 overflow: auto;

auto는 스크롤을 생성하는 값, 내용을 숨기고싶으면 hidden사용 overflow-x,overflow-y스크롤방향 지정가능

❖ 박스의 여백을 생각하며 레이아웃 구성

* {
  box-sizing: border-box;
}

border-box를 적용하면 여백과 테두리 두께를 포함해 박스 크기를 계산해줌

3️⃣ Selector

css속성을 적용할 대상을 찾는 방법 ex) id, class

• 전체 셀렉터

* {}

모든 요소 선택

• 태그 셀렉터

h2 {}
div{}
section, h2{}

특정 요소 선택, 복수 가능

• id 셀렉터

#title {}

id는 #으로 표현

• class 셀렉터

.title {}
.menu {}

class는 .으로 표현

• attribute 셀렉터

a[href] {}
p[id="title"] {}
p[class~="menu"] { }
p[class|="menu"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식/후손/형제 셀렉터

• 자식 셀렉터

header > p { }

첫 요소 바로 아래 자식 선택

• 후손 셀렉터

header p {}

• 형제 셀렉터

section ~ p { }

• 인접 형제 셀렉터

section + p { }