Code States 6일차 - CSS 기초

CSS 소개

CSS는 스타일링을 위한 도구입니다

• 컨텐츠의 배치와 위치 (레이아웃 디자인)
• 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User expirenece)을 제공할 수 있다. 기존 웹 페이지에 다른 CSS 파일을 적용해 활자 매체로 출판을 할 수도 있거나, 색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있다.

 

CSS에 대한 오해

---

CSS는 디자이너의 영역이다?

---

CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양이다. 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야만 한다.

 

일반 사용자를 대상으로 하는 어플리케이션은, UI(User Interface)가 없으면 소용이 없다.

---

UX를 고려하여 디자인하려면, 디자인을 배워야 하는것 아닌가요?

 

• 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있다. (검색어 : free app icon)
• 네모 혹은 모서리가 둥근 네모, 동그라미와 같은 도형은 CSS로 쉽게 만들 수 있다.

 

프론트엔드 개발자가 되려면...

 

레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 한다.

• 화면의 구성이나 배치 (레이아웃 디자인)
• 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분

• 정렬이나 배색에 대한 감각
• UX에 대하여 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해본 경험

모든 사람이 프론트엔드 개발자가 되지는 않습니다. 사용자와 직접적인 소통을 하지 않는 백엔드라는 영역도 있습니다. 그러나 프론트엔드 개발자나 앱 개발자, 백엔드 개발자까지, 자신을 개발자라고 소개할 수 있다면 최소한의 UI는 직접 만들 수 있어야 합니다.

 

 

CSS는 어렵다?

---

이상하게도 CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나이다. 특정한 HTML 요소에, 적용할 스타일 속성와 값을 정의하면 필요한 부분이 거의 완성된다. 그러나 프로젝트의 규모가 조금만 더 커져도 CSS를 의미있게 구성하는 일이 어렵고 복잡하다. 한 페이지에서 특정 HTML 요소를 CSS로 스타일링 하기 위해서 CSS파일 중 한 부분을 변경했더니, 다른 페이지의 HTML 요소가 변경되는 의도치않은 상황이 연출되곤 한다.

 

이처럼 CSS가 가진 고유의 복잡함을 다루기 위해, 많은 종류의 다양한 모범 사례(Best practice)가 만들어져 있다. 그러나 어떤 모범 사례가 가장 좋은 사례인 지에 대해 합의된 내용이 없다. 실제로 많은 모범 사례가 서로 완전히 상충되기도 한다. 그래서 CSS를 배우는 일이 어렵게 다가올 수 있다.

---

 

CSS 따라하기

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

 

<header> <main> <nav> <aside> <footer> 태그는 <div> 태그와 똑같습니다. 그러나 태그를 부르는 이름이 다릅니다. 이렇게 이름에 의미를 붙여 부르는 태그를 시맨틱 태그라고 합니다. 시맨틱 태그는, 이 태그가 감싸고 있는 영역이 어떤 역할을 담당하는 지 개발자가 쉽게 파악할 수 있도록 돕습니다.

 

CSS 분해하기

body // 셀렉터 (Selector)
{ // 선언 블록 (Declaration block)

  // 선언 (Declaration)
  color : red;

  //선언 (Declaration)
  font-size : 30px;
  
  // font-size 속성명 (Property)
  // 30px 속성값 (Value)
}

셀렉터는 태그이름이나 id, 또는 클래스를 선택한다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성한다. 요소에 적용할 수 있는 내용을 속성이라고 한다. 색상, 글자크기 등 다양한 속성이 있다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현한다. 그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링한다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다. 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋다.

 

CSS 파일 추가

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

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

link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다. link 태그의 rel은 연결하고자하는 파일의 역할이나 특징을 나타낸다. CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가한다. href속성에는 파일의 위치를 추가해야 한다. 작성한 두 파일은 한 폴더 내에 있으면 파일이름만 입력한다. 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있다.

 

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않는다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말한다. 가끔은 파일로 굳이 구분하지 않아도 될만큼 적은 CSS를 사용하는 경우도 있다.

 

CSS 스타일을 적용할 수 있는 방법은 3가지가 있다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트이다.

 

기본적인 셀렉터 (selector)

id로 이름을 붙여서 스타일링 적용하기

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

 

#navigation-title {
  color: red;
}

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

<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>

 

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

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

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

 

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

---

텍스트 꾸미기

색상

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

글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

크기

.title {
  font-size: 24px;
}

알아야 할 몇가지 단위

글꼴의 크기에서는 단위가 무엇보다 중요하다. 글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.

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

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

기타 스타일링

추가적으로 텍스트를 꾸밀 때 자주 사용하는, 알아두면 유용한 속성이다.

• 굵기 : 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 파일로는 스타일링만 담당하게 작성해야 한다.

---

박스 모델

모든 컨텐츠는 고유한 영역이 있다.

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.

박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정한다.

줄바꿈이 되는 박스 (block) vs. 옆으로 붙는 박스 (inline, inline-block)

박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고, 크기지정을 할 수 없는 박스는 inline 박스라고 부른다. 그리고 이 두가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.

block 요소의 목록은 MDN block 엘리먼트 목록을 통해, inline 요소의 목록은 inline 엘리먼트 목록을 통해 확인할 수 있다.

block, inline-block, inline의 특징
	block	inline-block	inline
줄바꿈 여부	O	X	X
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용가능 여부	O	X	X

 

박스를 구성하는 요소

border (테두리)

테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.

p {
  border: 1px solid red;
}

border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다. 괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성이다.

margin (바깥 여백)

p {
  margin: 10px 20px 30px 40px;
}

각각의 값은 top, right, bottom, left로 시계방향이다. margin은 주황색으로 표현된다.

 

p {
  margin: 10px 20px;
}

값을 두개만 넣으면 상하, 좌우에 적용된다.

 

p {
  margin: 10px;
}

값을 하나만 넣으면 모든 방향에 여백을 추가한다.

 

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

특정 위치에 여백을 추가할 수 있다.

* 위와 같은 규칙은 padding에도 동일하게 적용할 수 있다.

 

p {
  margin-top: -2rem;
}

margin에는 음수값을 지정할 수 있다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄든다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있다.

 

padding (안쪽 여백)

padding은 border를 기준으로 박스 내부의 여백을 지정한다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left이다. padding은 초록색으로 표현된다.

 

// p태그의 padding 속성에 여백을 추가합니다.
p {
  padding: 10px 20px 30px 40px;
}

// p태그에 border, background-color 속성을 추가합니다.
p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

박스를 벗어나는 컨텐츠 처리
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다. 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만든다.

p {
  height: 40px;
  overflow: auto;
}​

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있다. 이 때에는 overflow 속성에 hidden 값을 사용한다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있다.

 

박스 크기 측정 기준

처음 레이아웃 디자인을 할 때 가장 많이하는 실수가 있다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우이다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만든다.

레이아웃 디자인을 조금 더 쉽게하는 방법이 있다. 여백과 테두리 두께를 포함한 박스 계산 법이다. *은 모든 요소를 선택하는 셀렉터입이다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가한다.

* {
  box-sizing: border-box;
}

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다. 일반적으로 box-sizing은 HTML 문서 전체에 적용한다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있다. 앞으로 레이아웃과 관련된 이야기를 할 때에는 border-box 계산법을 기준으로 이야기한다. 박스 크기 측정 기준 두가지를 항상 염두해야 한다.

* content-box는 박스의 크기를 측정하는 기본값이다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.