Part 2. CSS 기초 (1)

Part 2. CSS 기초 (1) 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

• CSS의 사용 목적을 이해한다.
• CSS의 기본 문법과 구조를 이해한다.
• CSS를 HTML에 적용하는 방법에 대해서 이해한다.
• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
  • 각 단위가 적합한 경우를 구분할 수 있다.
• MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

1. CSS와 프론트엔드 개발

CSS(Cascading Style Sheets)는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다.
웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당합니다.

CSS와 프론트엔드 개발과의 관계에 대해서 작성하고자 합니다.

• CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.
  CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 합니다. CSS 작업의 첫 번째 단계는 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface) 만들기 입니다.

  • 사용자 인터페이스(UI; user interface)
    인터페이스(Interface)란 컴퓨터와 교류하기 위한 연결고리라고 생각하면 됩니다.
    사용자 인터페이스(User Interface)란 일반 사용자가 쉽게 사용할 수 있는 인터페이스를 의미합니다.
    과거부터 개발자들은 마우스나 버튼이 없는 상황에서도 터미널과 같은 입출력 환경에서 CLI(Command Line Interface)를 사용하여 컴퓨터와 소통해왔습니다. 하지만 CLI에 익숙하지 않은 일반 사용자들은 애플리케이션을 이용하기 쉽지 않았습니다.
    현재는 잘 만들어진 인터페이스 덕분에 일반 사용자도 쉽게 애플리케이션에 접근할 수 있게 되었습니다.

• 직관적이고 쉬운 UI제작은 프론트엔드 개발자의 기본 소양입니다.

• 좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나옵니다. 좋은 사용자 경험에 대한 다양한 정의가 있겠지만 저는 복잡한 내용을 단순하게 구분 짓고, 페이지를 나누어서 사용자가 하나의 내용에 집중할 수 있도록 하는 것이라고 생각합니다.

위와 같은 이유로 프론트엔드 개발자가 되려면 아래의 역량을 필요로 하고 있습니다.

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

2. CSS의 문법 구성

선택자(seletor)는 요소 이름이나 id, 또는 class를 선택합니다. 선택자(seletor)로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다.
요소에 적용할 수 있는 내용을 속성이라고 합니다.

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center; // 텍스트의 가운데 정렬을 하기 위한 속성
  padding: 0.3em 0; 
  // em은 상위 요소 크기의 몇 배인지로 크기를 정합니다.
    rem은 웹 브라우저 설정에서 정한 html 요소 크기의 몇 배인지로 크기를 정합니다.
  background-color: #4a4a4a; // 배경 색을 바꾸기 위한 속성
  color: #f9f9f9; // 글자 색을 바꾸기 위한 속성
}
nav {
  background: #eee;  
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}
// background와 background-color의 차이점
// background는 하나의 선언에서 요소에 대한 모든 배경 속성을 설정할 수 있는 
   반면에 background-color는 배경 색상만 설정할 수 있습니다.
// background-colror: #444;
// background-repeat: no-repeat;

// background: #f9f9f9 url("image.jpg") repeat left top;
// ...
// 주의할 점! background 속성은 이전 배경 속성 선언들을 리셋 시키고 
   현재의 background #f9f9f9 repeat ... 속성만 남깁니다. 

• CSS 파일 추가 (링크 방식)

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

<link>요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. <link>요소의 <rel>은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 stylesheet이므로 rel속성에 stylesheet를 추가합니다. href속성에는 파일의 위치를 추가해야합니다. 링크 방식은 병렬의 형태로 파일을 연결합니다.

위 방법말고도 요소의 style 속성에 직접 스타일을 적용하는 인라인 방식, <style>요소의 내용으로 스타일을 작성하는 내장 방식 방법이 있지만 관심사 분리 측면에서 권장하지 않는 방법입니다.

// 내장 방식
<style>
  div {
  	color: red;
   	margin: 20px;
  }
</style>  

// 인라인 방식 
<div style="color: red; margin: 20px;"></div>

마지막으로는 @import방식이 있습니다.
@import방식은 CSS의 @import규칙으로 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식을 뜻합니다. @import방식은 직렬의 형태로 파일을 연결합니다. 아래의 예시처럼 main.css를 해석한 후 box.css를 해석하기 때문에 CSS 연결을 지연시키기 위해 사용하기도 합니다.

// html
<link rel="stylesheet" href="./css/main.css">

// main.css
@import url("./box.css");
div {
  color: red;
  margin: 20px;
}

// box.css
.box {
  background-color: red;
  padding: 20px;
}

• 기본적인 선택자(selector)
  • id로 이름 붙여서 스타일링 적용하기
    id가 있는 요소를 선택할 때는 # 기호를 이용해야합니다.
    id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 합니다.
  • class로 스타일을 분류하여 적용하기
    class가 있는 요소를 선택할 때는 #이 아닌 .를 이용해야합니다.
    여러 개의 class를 하나의 엘리먼트에 적용할 수도 있습니다.

//HTML
<h4 id="navigation-title"> this is the navigation section </h4>
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item selected">Home</li>
</ul>  


//CSS
#navigation-title {
	color: red;
}
.menu-item {
	text-decoration: underline;
}
.selected {
	font-weight: bold;
	color: #009999;
}

• id와 class의 차이점

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

3. 텍스트 꾸미기

• 색상 color
  색상 속성에 삽입할 수 있는 값은 HEX(16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상 이름을 사용할 수 있습니다.

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

• 글꼴 font-family
  글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다.
  표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 fallback을 사용합니다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉽표로 구분하여 입력합니다. 입력된 순서대로 fallback이 적용됩니다.
  Google Fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있게 도와줍니다.

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

• 크기 font-size 기본값: 16px

.title {
  font-size: 24px;
}

• 글자의 기울기: font-style 기본값: 'normal' 기울기 없음

  font-style: italic // 이텔릭체

• 굵기: font-weight 기본값: nomal, 400

font-weight: normal; // 보통 폰트 가중치. 400과 같음
font-weight: bold; // 굵은 폰트 가중치. 700과 같음

/* Relative to the parent */
font-weight: lighter; // 부모 요소보다 얇은 폰트 가중치
font-weight: bolder; // 부모 요소보다 굵은 폰트 가중치

font-weight: 100, 200, ... , 900 // 숫자형 폰트 가중치

• 밑줄, 가로줄: text-decoration

// 텍스트 장식은 모든 자손 텍스트 요소에 걸쳐서 적용됩니다. 
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

// text-decoration: color line style thickness 
color, line, stlye, thickness의 단축 속성을 가지고 있습니다.

• 자간: letter-spacing

   /* 키워드 값 */
letter-spacing: normal; // 현재 글꼴의 기본 간격

/* <length> 값 */ // 기본 간격에 추가할 글자간 간격
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

• 행간: line-height

/* Keyword value */ // 줄 상자의 높이를 설정합니다.
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */ 
// '배수' 가장 권장하는 방법입니다. font-size에 따라 적용됩니다.
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

• 글자 그림자:text-shadow

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

• 정렬
  가로 정렬 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)이 있습니다.

  세로 정렬 vertical-align을 사용합니다. inline 또는 table-cell box에서의 수직 정렬을 지정합니다.

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

4. 절대 단위와 상대 단위

• 절대 단위: px, pt 등
• 상대 단위:
  %: 상대적 백분율
  em: 요소의 글꼴 크기
  rem: 루트 요소(html)의 글꼴 크기
  vw : 뷰포트 가로 너비의 백분율
  vh : 뷰포트 세로 너비의 백분율
  ...

1. 글꼴 사이즈를 정할 때
   • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
     px(픽셀)을 사용합니다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리합니다.
   • 일반적인 경우
     상대 단위인 rem을 권장합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem으로 지정합니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다.
2. 화면 사이즈를 정할 때
   • 반응형 웹(responsive web)에서 기준점을 만들 때
     반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 이때, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰의 세로 모드로 생각할 수 있습니다.
   • 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
     이때에는 vw, vh를 사용합니다. 웹사이트의 보이는 영역을 Viewport라고 합니다. vw,vh는 각각 viewport width와 viewport height를 뜻하며, 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻합니다.