블로깅챌린지]Unit3. CSS 기초(개요, 텍스트 꾸미기, 단위, 박스모델, 박스구성요소, CSS Selector) - 코드스테이츠

SEB_FE_45

Section1. Unit3. CSS 기초

---

1. CSS 기초개요

CSS란 앞선 HTML을 공부할 때 언급되었던 것처럼 HTML 문서의 시각적 효과를 표현해주는 디자인 언어이다.

CSS는 웹페이지 스타일과 레이아웃을 정의하는 스타일 언어이기도 하다.

CSS는 좋은 사용자 경험을 제공하기 위한 도구이다.

좋은 사용자 경험이란, HTML문서에 작성된 컨텐츠를 사용자가 잘 이해할 수 있도록 돕는 것이다.

사용자 경험(UX)은 사용자 인터페이스(UI)를 통해 구현된다.

사용자 인터페이스(UI)란, 사용자와 컴퓨터가 교류하기 위한 연결고리이다.

UI가 발전하지 못했을 때는, 커멘드 입력창에 암호화된 코드를 입력해야 했기 때문에 사용자 접근성이 떨어졌다.

[그림] windows powershell - 음?

현재는 UI의 발전으로 인해 아이콘으로 애플리케이션에 접근할 수 있기 때문에 컴퓨터에 대해 잘 모르는 사람들도 쉬운 사용이 가능해졌다.

[그림]windows11 바탕화면 - 쉽쥬?

프론트엔드 개발자의 역할이자 기본소양은 직관적이고 쉬운 UI 환경을 개발하는 것이다.

즉, 좋은 사용자 경험(UX)은 좋은 사용자 인터페이스(UI)에서 나오는 것이다.

좋은 사용자 경험(UX)이란, 아래와 같다.

• 복잡한 내용을 단순하게 표현해주는 것
• 페이지를 분할하여 한페이지에서 볼 수 있는 내용을 제한해주는 것
• 사용자가 하나의 내용에 집중할 수 있도록 고려하는 것

---

2. CSS의 문법 구조

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

•  body 는 요소 Selector이다. "HTML 문서의 body 태그를 선택한다."
• { } 은 선언 목록을 표시한다.
• color, font-size 는 속성명(property)을 의미한다. "색깔을 바꿀거다.", "글자크기를 바꿀거다."
• red, 30px 은 속성값(value)를 의미한다. "빨간색으로", "30px로"
• ;(semi colon)은 선언 구분자라고 하며, 선언이 끝난 부분임을 알려준다.

---

3. CSS를 HTML에 적용하는 방법

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

위 코드에서 rel 은 파일의 역할이나 특징을 값으로 입력하고, href는 파일의 위치를 입력한다.

정돈된 웹 페이지를 위해 레이아웃 CSS 파일을 별도로 만들어 사용하기도 한다.

별도의 CSS 파일을 만들어서 문서 스타일을 편집하는 이유는 각 언어별 역할이 다르기 때문이다.

CSS스타일을 적용하는 방법으로는 1)인라인 스타일, 2)내부 스타일 시트, 3)외부 스타일 시트가 있다.

인라인 스타일은 아래와 같이 요소 태그에 스타일 속성을 입력하여 한줄로 코드를 작성하는 방법이다.

<nav style="background: #eee; color: blue">...</nav>

내부 스타일 시트는 CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고, <style> 요소 내에 작성하는 방법이다.

마지막으로 외부스타일 시트는 위에서 언급한 것과 같이 별도의 CSS 파일을 만들어서 HTML 문서와 연결하는 방법이다.

인라인 스타일과 내부스타일 시트는 HTML 문서가 어지러워 지기 때문에 권장하지 않는 방법이다.

HTML 문서에서는 웹페이지의 구조파악에 집중해야 하는데 CSS 요소가 많아질 경우, 구조파악이 용이하지 않다.

이에 외부 스타일 시트를 이용하여 CSS 코드를 작성하도록 하자.

---

4. CSS의 단위 (절대 단위 / 상대단위)

CSS 사용하는 단위는 절대단위와 상대단위로 구분한다.

• 절대단위 : px, pt, in, cm 등 (값이 변하지 않는 단위)
• 상대단위 : rem, em, vw, vh, % 등(값이 변수에 따라 변하는 단위)

절대단위는 인쇄를 할 때 용이하지만, 화면에 출력할 때에는 지양하는 것이 좋다.

하드웨어나 창의 크기에 따라 크기가 달라지는 반응형 웹을 구현할 때, 절대단위를 사용하면 해당 콘텐츠의 크기가 변하지 않아 불편을 겪을 수 있기 때문이다.

다만, 상대단위 사용에 있어 초보 개발자들의 경우 크기 계산을 잘못하는 경우가 발생한다.

이에 rem을 사용하는 것이 효과적이다.

rem은 root 변수 값에 영향을 받기 때문에 root 변수를 수정하지 않는 한, 계산하기가 용이하다.

em은 부모 요소의 크기 값에 따라 값이 바뀌기 때문에 사용에 어려움이 있다.

vw는 viewport-width, vh는 viewport-heigh를 의미한다. 1vw(vh) 는 보이는 영역 너비(높이)의 1/100을 의미한다.

웹 개발에서 가장 많이 사용하는 절대단위는 px(pixel) 이다.

---

5. CSS box 모델

box란 content가 자리하는 영역을 의미하며, 높이 너비, 테두리, 여백 등의 속성이 있다.

아래는 box 모델의 세가지 종류와 그 특징이다.

구분	block	inline-block	inline
줄바꿈 가능 여부	줄바꿈 가능	줄바꿈 불가능	줄바꿈 불가능
기본적 너비	100%	컨텐츠가 차지하는 만큼	컨텐츠가 차지하는 만큼
width, heigh, 사용가능 여부	가능	가능	불가능

 

box의 구성 요소는 아래와 같다.

• margin : 바깥여백
• border : 테두리
• padding : 안쪽여백
• content : 내용

[그림] 크롭 개발자도구 - box 구성요소 표현

4가지 구성요소 중 border(테두리)를 중요하게 봐야 한다.

border는 심미적 기능뿐만 아니라 각 컨텐츠 영역의 크기를 확인할 수 있는 지표가 되기 때문이다.

이에 border에 테두리가 보이게 만든 후, 작업을 하면 컨텐츠 별 위치나 영역을 파악하기 용이하다.

margin(padding)은 바깥여백(안쪽여백)이다.

여백 입력시 4개 값을 입력하게 되면, 위 / 오른쪽 / 아래 / 왼쪽 (시계방향) 값이 적용된다.

2개 값을 입력하면, 상하 / 좌우 값이 적용된다.

1개 값만 입력하면, 모든 방향에 입력한 값이 적용된다.

---

박스 크기의 측정기준은 박스에 적용할 여백의 크기도 고려해야 한다. 박스 크기 측정 기준은 2가지 기준이 있다.

• content box : 박스 크기를 측정하는 기본값, 콘텐츠 크기만 고려
• border box : 박스에 적용될 여백과 테두리 크기까지 고려

이에 대부분 레이아웃 디자인 과정에서는 border box 사용을 권장한다.

---

6. CSS Selector

Unit.3 과정 중 가장 헷갈렸던 부분으로 추가적인 공부가 필요한 부분이다.

CSS 셀렉터란 HTML 문서에 작성된 요소들을 CSS 스타일을 적용하기 위한 선택자이다.

Unit.2 에서도 언급된 id 와 class가 대표적이다.

CSS 셀렉터로 코드를 입력할 때 , id는 '#(요소이름) { }'로 입력한다. class는 '.(요소이름) { } ' 로 입력한다.

이외에도 다양한 셀렉터가 있으며, 이는 mdn 문서를 통해 참조하도록 하자.

---

위와 같이 직관적인 셀렉터가 있는 반면, 반복되거나 특정한 요소들을 선택할 때에는 자식/후손/형제 셀렉터를 사용한다.

자식 셀렉터는 첫번째로 입력한 요소의 바로 아래 입력한 자식 요소를 의미하며, 아래와 같이 셀렉터를 작성한다.

header > div { }

후손 셀렉터는 첫번째로 입력한 요소의 후손 요소 모두를 의미하며, 아래와 같이 작성한다.

header div { }

위의 셀렉터를 작성했을 때, 선택되는 자식(후손) 요소는 아래와 같다.

<header>
	<div> <!-- 자식 셀렉터 & 후손 셀렉터 -->
		<p>
			<div></div><!-- 후손 셀렉터 -->
		</p>
	</div>
	<div> <!-- 자식 셀렉터 & 후손 셀렉터 -->
		<p>
			<div></div><!-- 후손 셀렉터 -->
		</p>
	</div>
</header>

---

다음으로는 형제 셀렉터와 인접형제 셀렉터가 있다.

형제 셀렉터는 같은 부모요소(<header>)를 공유하면서, 첫번째 입력한 요소(<section>) 뒤에 오는 두번째 요소(<p>)를 모두 선택한다. 작성방법은 아래와 같다.

section ~ p { }

인접형제 셀렉터는 같은 부모요소(<header>)를 공유하면서, 첫번째 입력한 요소(<section>) 바로 뒤에 오는 두번째 입력한 요소(<p>)를 선택한다. 작성방법은 아래와 같다.

section + p { }

위의 셀렉터 작성 결과는 아래와 같다.

<header>
	<section></section>
	<p></p> <!-- 형제 요소 & 인접형제요소 -->
	<p></p> <!-- 형제 요소 -->
	<p></p> <!-- 형제 요소 -->
</header>

자식/후손/형제/인접형제 셀렉터는 위와 같이 단순한 예시로 봤을 때는 이해가 되었다. 그러나 조금만 코드가 복잡해져도 무슨 요소를 의미하는지 한눈에 파악하기 어려워 추가적인 공부가 필요하겠다.

이 외에도 기타 셀렉터들이 있는 이는 mdn을 참조하여 공부하도록 해야겠다.

---

Unit 3 를 마치며...

CSS 언어는 바뀌는 것들이 눈에 즉각 보이는 경우가 많아, 배우는 재미가 있었다.

다만, 학습을 하면 할 수록 더 잘하고 싶은 욕심 때문인지 학습할 내용이 무궁무진하게 많아져 버렸다...

라이브세션에서 강사님께서도 CSS는 배우면 배울수록 어렵다고 하였다.

그럼에도 프론트엔드 개발자가 되기 위해 CSS를 놓을수는 없기 때문에 틈나는대로 내가 원하는 레이아웃을 구현할 수 있도록 연습하여야 하겠다.

오늘 1년 먼저 개발 공부를 시작한 친구가 취업을 하였다. 부럽기도 하면서 용기도 났다.

남들보다는 늦은 나이에 시작한 공부지만, 열심히 노력하고 두드리면 나에게도 좋은 기회가 찾아올 것이라 믿는다.

내일은 첫 페어프로그램이 있는 날이라 조금 더 떨리는 것 같다!

내일도 화이팅이다. 함께 공부하는 코드스테이츠 프론트엔드 과정 45기 동기분들도 화이팅입니다!

[그림] Unit3 과제 - 조금 더 완성하고 싶었지만.. 복습하고 나니 12시.. 내일 아침에 조금 더 완성해보자..