S1_U3_CH1. CSS 기초

Judevv·2023년 4월 13일

코드스테이츠 SEB FE BOOTCAMP

목록 보기

6/55

3일차의 주저리😂
배우는 건 좋은데 내 것으로 만드는 게 쉽지 않다. 어제보단 오늘이 조금 더 낫지 않을까 싶었는데, 그것도 아니다. 객관적으로 돌아보는 게 중요하다고 해서, 하는 생각들을 계속 곱씹어 보는데 어렵다. 어떻게 하면 자기 자신을 믿을 수 있게 되는 건지 감이 잡히지 않는다. 그래서 아직 초반인데도 이래저래 생각이 많아진다.

아는 부분인가 하고 돌아보면 모르겠고, 모르겠다 싶으면 갑자기 깨달아서 꼭 중학교 수학을 대학교 가서 다시 풀었던 기분이 든다. 아무튼 오늘도, 그래도 해야지! 하는 마음으로 달려보자.

계획 짜는 것도 설렁 설렁이라서 가이드대로 하고 싶은데 내가 너무 느리다. 아직 3일차니까 조급해 하지 말아야지.

Chapter 1. CSS 기초

학습 목표

CSS의 사용 목적을 이해한다.

CSS의 기본 문법과 구조를 이해한다.

CSS를 HTML에 적용하는 방법에 대해서 이해한다.

HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.

CSS를 이용해 텍스트를 꾸밀 수 있다.

CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.

각 단위가 적합한 경우를 구분할 수 있다.

MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

1-1. CSS와 프론트엔드 개발

CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어이다.웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 하게 된다. 같은 HTML 파일이더라도 CSS의 유무에 따라 전달력에 차이가 생기기도 한다.

개발자는 CSS로부터 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)부터 만들게 된다.

! 사용자 인터페이스(UI; User Interface)와 사용자 경험(UX; User Experiennce)

인터페이스(Interface)는 일종의 매개체다.컴퓨터나 사물 등과 교류하기 위한 것이다. 2개 이상의 장치나 소프트웨어 사이에 정보나 신호를 주고 받을 수 있도록 한다.

그리고 컴퓨터를 잘 알지 못하는 사용자가 쉽게 사용할 수 있는 인터페이스를 사용자 인터페이스, 즉, UI라고 부른다.

프론트엔드 개발자는 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 따라서, 직관적이고 쉬운 UI, 즉, 사용자가 어렵지 않게 사용할 수 있는 UI를 제작하는 것이 기본 역할이 된다.

좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다.

UI/UX를 고려한 웹 페이지를 제작하는 프론트엔드 개발자는 아래와 같은 역량이 필요하다.

컴포넌트 기능별로 묶어서 제작
화면의 구성이나 배치(레이아웃 디자인)
굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

전달력이 떨어지거나, 사용자에게 어려운 UI의 문제점이 무엇인지 분석할 수 있고, 해결책을 제안할 수 있어야 한다.

CSS는 웹 개발자가 배우기 가장 쉽지만, 가장 어려운 언어이기도 하다. CSS를 의미 있게 구성하는 일은 복잡하지만, 많은 종류의 모범 사례 등을 통해 학습하고, 개선할 수 있다.

1-2. CSS 따라하기(실습)

CSS는 스타일링 도구이므로, 독립적으로 기능하지 않는다. 반드시, HTML이 있어야만 동작할 수 있다.

실습을 위해 index.html 파일과 같은 폴더에 index.css 파일을 만든다.

index.html 파일의 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <h4>This is the navigation section.</h4>
    <ul>
      <li>Home</li>
      <li>Mac</li>
      <li>iPhone</li>
      <li>iPad</li>
    </ul>
  </nav>
  <main>
    <h1>This is the main content.</h1>
    <p>...</p>
  </main>
  <aside>
    <h4>This is an aside section.</h4>
    <p>...</p>
  </aside>
</div>
<footer>
  <ul>
    <li>개인정보 처리방침</li>
    <li>이용 약관</li>
    <li>법적 고지</li>
  </ul>
</footer>
</body>
</html>

개발자가 쉽게 파악할 수 있도록 시맨틱 요소 사용
- <header>, <main>, <nav>, <aside>, <footer>

그러나 HTML 파일을 실행하더라도 구조가 눈에 보이지 않아 파악이 힘들다. 이 문제를 해결하는 것이 CSS이다.

index.css 파일의 코드는 다음과 같다

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

각 요소의 영역 구분을 위해 고유한 색상 지정

! CSS 내용 분해하기

CSS의 문법 구성은 셀렉터, 선언 블록, 선언, 속성명, 속성값, 선언 구분자로 구성된다.

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

body는 셀렉터(Selector)
- 셀렉터는 요소 이름이나 id, 또는 class를 선택
color, font-size는 속성(Poperty)
- 요소에 적용할 수 있는 내용
- 색상, 글자 크기 등 다양한 속성 있음
- 속성에 적용할 적절한 값을 입력하여 스타일을 표현(속성값(Value))
- color: red;는 이 요소의 색상을 빨간색으로 스타일 지정
선언 구분자는 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분
background 와 backgroud-color 모두 배경 색상을 지정할 수 있음
- background는 color 이외의 다른 옵션들까지 지정할 수 있으나, backgroud-color는 색상만 지정할 수 있음
- color / image / repeat / attachment / position 등
- 각각의 옵션명을 적어주는 편이 코드를 이해하기 쉬움

* CSS에서 사용하는 단위 이해하기

em과 rem은 배율이라고 생각할 수 있음
em은 상위 요소(부모)가 기준이 되고, rem은 최상위 요소가 기준이 됨
참고 링크 1 2 3

! CSS 파일 추가

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

CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 연결
- <link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용
- rel은 연결하고자 하는 파일의 역할이나 특징을 나타냄
- href 속성에는 파일의 위치를 추가
  - 한 폴더 내에 있으면 파일 이름만 입력, 다른 폴더에 있으면 절대 경로 또는 상대 경로 입력

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

layout.css 파일을 만들고, 새로운 <link> 요소 추가
- index.css와 달리 HTML 요소를 배치하는 역할

layout.css의 코드는 아래와 같음

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

CSS 스타일을 적용할 수 있는 방법은 3가지가 있다.

인라인 스타일 : 같은 줄에서 스타일을 적용
- 예시
```
<nav style="background: #eee; color: blue">...</nav>
```
내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일이 아닌 <style> 요소 내에서 작성

외부 스타일 시트 : 스타일 시트를 별도의 파일로 작성

	* 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않음

! 기본적인 셀렉터(Selector)

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

위에서 작성한 HTML 문서에는 <h4>, <p> 요소가 여럿 존재한다. navigation section 아래에 있는 <h4> 요소만 색을 바꾸기를 해본다.

h4 {
  color: red;
}

<h4> 요소의 색상을 변경
aside section의 <h4> 요소도 색상이 변경됨

navigation section 아래의 요소를 선택하기 위해서는 id를 붙여서 해결한다. 이름을 붙일 때는 가능한 의미를 담아서 구분할 수 있도록 한다. id가 있는 요소를 선택할 때는 # 기호를 사용하고, id는 하나의 문서에서 한 요소에만 사용한다.

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

class로 스타일 분류하여 적용

id와 유사하게 특정 요소에 class를 지정하는 방법도 있다. navigation section의 자식 <li> 요소에 밑줄을 치기로 해본다.

li {
  text-decoration: underline;
}

모든 <li> 요소에 스타일링이 적용

<!-- 잘못된 예제 -->
<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 고유한 이름

<!-- 바른 예제 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

동일한 기능을 하는 여러 요소에 CSS를 적용하기 위해서 class를 사용
<li> 요소에 class를 추가하면, 동일한 스타일을 여러 요소에 적용 가능
class는 #이 아닌 . 사용

.menu-item {
  text-decoration: underline;
}

class menu-item 을 선택하여 밑줄을 적용

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

여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 이름을 구분한다.

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

* 요소를 만들거나, 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 잘 살핀다.

id와 class의 차이점을 반드시 기억
- id : #, 한 문서에 단 하나의 요소에만 적용, 특정 요소에 이름을 붙이는 데 사용
- class : ., 동일한 값을 갖는 요소 많음, 스타일의 분류(classification)에 사용

1-3. 텍스트 꾸미기

색상
- 글자의 색상을 변경, color
- 속성에 넣을 수 있는 값은 HEX(16진수로 RGB가 표현된 값) 또는 주요 색상의 이름
- 배경 색상이나, 박스 테두리 색상을 적용할 수도 있음

.red {
  color: #ff0000;
}

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

글꼴
- 글꼴 지정, font-family
- 글꼴의 이름은 따옴표를 붙여서 적용
- 사용하려는 글꼴이 존재하지 않거나, 기기에 따라 지원하지 않을 수 있음
- fallback 글꼴을 추가하여 대비할 수 있음
  - 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력.
  - 입력된 순서대로 fallback 적용
- 더 다양한 글꼴을 사용하려면 웹 폰트 기술을 통해 해결 가능
  - Google Font 서비스
  - HTML의 link 태그를 사용하여, embed 할 수 있음(코드 제공)
크기
- 글자 크기 변경, font-size
기타 스타일링
- w3school, MDN 참고
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
정렬
- 가로로 정렬할 경우 text-align 사용
  - 유효 값 : left, right, center, justify(양쪽 정렬)
- 세로로 정렬할 경우, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용
  - vertical-align 속성, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 함

1-4. 절대 단위와 상대 단위

글꼴 크기, 화면 크기 등을 다룰 때 크기의 단위가 매우 중요하다.

절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등

글꼴의 사이즈를 정할 때
1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우

px 사용
- 크기가 고정된 절대 단위로 사용자 접근성이 불리
- 모바일 기기와 같은 작은 화면이면서, 동시에 고해상도인 경우 적합하지 않음
- 인쇄와 같이 화면의 사이즈가 정해진 경우 유리

2) 일반적인 경우

rem 추천
- root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용 가능
- 사용자가 설정한 기본 글꼴 크기를 따르기 때문에, 접근성에 유리
- em은 부모 엘리먼트에 따라 상대적으로 크기가 변경(계산 어려움)
- rem은 root의 글자 크기에 따라서만 상대적으로 변함

화면 사이즈를 정할 때
1) 반응협 웹(responsive web)에서 기준점을 만들때

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹
디바이스 크기별로 CSS를 다르게 적용해야 함
디바이스의 크기를 나누는 기준은 보통 px

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

vw, vh 사용
웹 사이트의 보이는 영역을 Viewport라고 함
각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100
화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 를 사용
참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율

Judevv

감성있는 개발자를 꿈꿔요

이전 포스트

S1_U2_과제. 자기소개 페이지 만들기

다음 포스트