웹 개발 강의

웹 개발 강의 5편 - CSS 붙이기

나동빈

4강까지는 의미만 다뤘습니다. 페이지에 무엇이 있고 그것이 무슨 뜻인지를 정했습니다.

5강 강의 영상

지금까지 보신 모양은 전부 브라우저가 정한 기본값입니다. 글꼴도 크기도 간격도
우리가 정한 적이 없습니다. 오늘부터 그것을 직접 정합니다.

규칙 하나의 모양

CSS 는 규칙의 나열입니다. 규칙 하나를 뜯어보겠습니다.

body {
  color: #1E222A;
}

body 가 선택자(Selector)입니다. 어떤 요소에 적용할지를 말해줍니다.

중괄호 사이의 내용이 그 요소들에 적용됩니다. color 가 속성이고, 콜론 다음에
값이 옵니다. 세미콜론이 줄을 끝냅니다. 선언마다 하나씩 붙여주시면 됩니다.

붙이는 방법 세 가지

방법모양언제
태그에 직접style="color: red"거의 안 씁니다. 다시 쓸 수 없습니다
head 안에<style> ... </style>한 장짜리 데모
따로 파일로<link rel="stylesheet">나머지 전부. 우리는 이것

따로 둔 파일은 브라우저가 캐시에 담아두고, 페이지를 여러 장 만들어도 하나만
연결하면 됩니다.

첫 스타일시트

style.css 라는 새 파일을 만듭니다.

/* page */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1E222A;
}

/* headings */

첫 줄은 주석입니다. 슬래시와 별표로 열고, 별표와 슬래시로 닫습니다. 브라우저는
이것을 완전히 무시합니다. 구역을 나눠두면 파일이 길어져도 찾기 쉬워집니다.

system-ui 는 이 컴퓨터가 자기 메뉴에 쓰는 글꼴을 뜻합니다. 어느 컴퓨터에서도
어울리고, 따로 내려받지 않아도 됩니다.

line-height 를 1.6 으로 두는 것이 읽기 쉽게 만드는 가장 간단한 방법입니다.

두 파일 연결하기

index.html 의 head 안, title 아래에 한 줄을 넣습니다.

<link rel="stylesheet" href="style.css">

rel 은 이 파일이 어떤 종류인지 알려줍니다. href 는 경로인데, 같은 폴더라서
이름만 적으면 됩니다. meta 나 img 처럼 닫는 태그가 없습니다.

head 에 두어야 꾸며지지 않은 화면이 잠깐 비치는 일이 없습니다.

한 줄로 전체가 바뀝니다

python -m http.server 5500
처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

모든 줄의 글꼴이 바뀌었습니다. 우리가 쓴 규칙은 하나이고, body 에 대한 것이었습니다.

body 안의 모든 것이 거기서 글꼴을 물려받았습니다. 이것을 상속(Inheritance)이라고
하고, 타이핑을 아주 많이 줄여줍니다.

글을 기둥으로 모으기

같은 규칙 안, color 아래에 선언 세 개를 더 넣습니다.

max-width: 680px;
  margin: 48px auto;
  padding: 0 20px;

규칙 하나에 선언은 얼마든지 넣을 수 있습니다. 이걸 위해 body 규칙을 하나 더
만들지는 않습니다.

저장하고 보시면 글이 화면 끝까지 늘어나지 않고 가운데 기둥처럼 모입니다.
지금까지 중 가장 큰 변화입니다.

긴 줄은 읽기 어렵습니다. 왼쪽으로 돌아오는 길에 눈이 자리를 놓치기 때문입니다.
한 줄에 60자에서 80자 정도가 편한 범위입니다.

창을 좁혀보시면 기둥이 따라 줄어듭니다. max-width 는 최대 그 폭이라는 뜻이라,
680픽셀보다 좁아지면 그냥 화면을 채웁니다. 반응형이라고 부르는 것의 상당 부분이
이 세 줄입니다.

자주 발생하는 오류

첫째, 선언 끝에 세미콜론을 빠뜨리는 경우입니다. 브라우저가 그 줄과 다음 줄까지
버립니다.

둘째, link 에 적은 파일 이름이 실제 파일과 다른 경우입니다. 오류도 안 나고
아무 일도 일어나지 않습니다. 그냥 조용히 무시됩니다. 아무것도 안 바뀌었으면
여기부터 확인하시면 됩니다.

셋째, link 를 head 가 아니라 body 에 넣는 경우입니다. 동작은 하는데
페이지가 한 번 깜빡입니다.

연습 문제

  1. body 규칙에 background 를 넣어 바탕색을 바꿔보세요.
  2. max-width 값을 400px 로 바꾸고 창 크기를 조절해보세요.
  3. line-height 를 1 로 바꿔보고 읽기가 얼마나 달라지는지 느껴보세요.

다음 편

6강에서는 선택자를 다룹니다. 원하는 요소만 정확히 골라내는 법입니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.

#html#css#javascript#웹개발#강의#무료