CSS 기본

« 이전 다음 »

CSS (Cascading Style Sheets) 는 여러분의 웹페이지를 꾸미기위한 코드입니다. CSS 기본 은 여러분이 시작할 때 필요한 것들을 익힐 수 있도록 도울것입니다. 우리는 이런 질문을 할 것입니다: 어떻게 문자색을 검정색이나 빨간색으로 만들수 있을까? 어떻게 내 컨텐트를 화면의 이런 저런 곳에 나타나게 할 수 있을까? 어떻게 내 웹페이지를 배경 이미지와 색으로 꾸밀 수 있을까?

그래서 CSS가 뭔가요?

HTML 처럼, CSS 는 진짜 프로그래밍 언어는 아닙니다. 이건 style sheet 언어입니다. 즉, HTML 문서 안에 엘리먼트를 선택적으로 꾸밀 수 있게 해줍니다. 예를 들면, 한 HTML 페이지에 모든 문단 엘리먼트를 선택하고 그것들을 빨간색으로 바꾸기 위해서, 이렇게 CSS를 작성할 수 있습니다:

p {
  color: red;
}

한번 해봅시다: 여러분의 텍스트 에디터에 새파일 안으로 이 세 줄의 CSS 를 복사해 넣고, 그 다음 styles 폴더 안에 style.css 라고 저장하세요.

하지만 여러분의 HTML 문서에 CSS 를 적용할 필요가 있습니다, 그렇지 않으면 CSS 꾸미기는 여러분의 브라우저가 해당 HTML 문서를 어떻게 보여줘야 하는지에 영향을 주지 않을 것입니다. (만약 여러분이 우리 프로젝트를 따라오지 않으셨다면, 먼저 여러분이 필요한게 무엇인지 찾기 위해 파일들 다루기와 HTML 기본을 읽어보세요.)

index.html 파일을 열고 head의 어딘가에 아래의 코드를 붙여 넣으세요, 즉, <head> 와 </head> 태그 사이에 넣으세요:
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
index.html 를 저장하고 브라우저에서 불러오세요. 여러분은 이런 것을 보게 되실겁니다:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css. 문단의 글자가 빨간색이라면, 축하드립니다, 지금 여러분은 첫번째 성공적인 CSS 를 작성하셨습니다!

CSS 규칙 분석

위의 CSS 를 조금 더 자세히 들여다 봅시다:

전체 구조는 rule set 이라 불립니다 (하지만 종종 줄여서 "rule" 라고 합니다). 각 부분의 이름 또한 주목하세요:

셀렉터: rule set 의 시작에 있는 HTML 엘리먼트 이름. 이것은 꾸며질 엘리먼트를 선택합니다 (이 예시에서는, p 엘리먼트). 다른 엘리먼트를 꾸미기 위해서는, 셀렉터만 바꿔주세요.
선언: color: red 와 같은 하나의 규칙; 여러분이 꾸미기 원하는 엘리먼트의 특성을 구체화합니다.
특성: 주어진 HTML 엘리먼트를 꾸밀 수 있는 방법입니다. (이 예시에서, color 는 p 엘리먼트의 속성입니다.) CSS 에서, 여러분의 rule 안에서 영향을 주고 싶은 속성을 선택하면 됩니다.
특성 값: 특성의 오른쪽에, 콜론 뒤에, 주어진 특성을 위한 많은 가능한 결과중 하나를 선택하기 위해 특성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).

구문의 다른 중요한 부분들도 주목하세요:

각각의 rule set (셀렉터로 구분) 은 반드시 ({}) 로 감싸져야 합니다.
각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.
각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

여러 엘리먼트 선택하기

여러분은 엘리먼트의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할수도 있습니다. 여러 셀렉터는 콤마로 구분합니다. 예를 들면:

p,li,h1 {
  color: red;
}

셀렉터의 여러 종류

셀렉터는 많은 여러 타입이 존재합니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 엘리먼트를 선택하는 엘리먼트 셀렉터만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 셀렉터의 일반적인 타입들입니다:

셀렉터 이름	선택하는 것	예시
엘리먼트 셀렉터 (때때로 태그 또는 타입 셀렉터라 불림)	특정 타입의 모든 HTML 엘리먼트.	`p` `<p> 를 선택`
아이디 셀렉터	특정 아이디를 가진 페이지의 엘리먼트 (주어진 HTML 페이지에서, 아이디당 딱 하나의 엘리먼트만 허용됩니다).	`#my-id` `<p id="my-id">` `또는 <a id="my-id">` 를 선택
클래스 셀렉터	특정 클래스를 가진 페이지의 엘리먼트 (한 페이지에 클래스가 여러번 나타날 수 있습니다).	`.my-class` `<p class="my-class">` `와 <a class="my-class"> 를 선택`
속성 셀렉터	특정 속성을 갖는 페이지의 엘리먼트.	`img[src]` `<img src="myimage.png">` 를 선택하지만 `<img> 는 선택 안함`
수도(Pseudo) 클래스 셀렉터	특정 엘리먼트지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.	`a:hover` `<a>` 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함

탐구할 더 많은 셀렉터가 있습니다. 더 자세한 목록은 셀렉터 가이드에서 찾아보세요.

글꼴과 문자

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더 많은 rule 과 정보를 추가해봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

노트: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

먼저, 돌아가서 여러분이 안전한 어딘가에 저장해두었던 구글 글꼴의 결과물을 찾으세요. index.html 의 head 안 어딘가에 <link ... > 엘리먼트를 추가하세요 (다시 말해서, <head> 와 </head> 태그 사이 어디에나). 이런식이 될 겁니다:
```
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
다음으로, style.css 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아보이지는 않습니다.
아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 font-family 코드를 placeholder 줄에 덮어쓰세요. (font-family 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (<html> 이 전체 페이지의 부모 엘리먼트일 때, 이 안의 모든 엘리먼트는 같은 font-size 와 font-family 를 물려 받습니다):
```
html {
  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
}
```
이제 HTML 바디안에 문자를 포함하는 엘리먼트(<h1>, <li>, and <p>)를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 바디 컨텐트의 헤딩을 가운데 정렬하고 줄의 높이와 자간도 설정할 것입니다:
```
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}
```

px 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

박스, 박스, 박스의 모든 것

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 엘리먼트들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

a big stack of boxes or crates sat on top of one another

놀랍지 않게도, CSS 레이아웃은 박스모델을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

padding, 컨텐트 주위의 공간 (예, 문단 글자의 주위)
border, padding 의 바깥쪽에 놓인 실선
margin, 엘리먼트의 바깥쪽을 둘러싼 공간

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

여기서 이런 것도 사용합니다:

width (한 엘리먼트의 너비)
background-color, 엘리먼트의 컨텐트와 padding 의 배경 색
color, 한 엘리먼트의 컨텐트 색 (일반적으로 글자색)
text-shadow: 한 요소 안의 글자에 그림자를 적용
display: 엘리먼트의 표시 형식을 설정합니다 (이것에 대해선 아직 걱정하지마세요)

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

페이지 색 바꾸기

html {
  background-color: #00539F;
}

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던색으로 변경하세요.

바디외부 정렬하기

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

이제는 바디 엘리먼트를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

width: 600px; — 이것은 바디가 항상 600 pixels 의 너비를 갖도록 강제합니다.
margin: 0 auto; — 여러분이 margin 또는 padding 처럼 한 속성에 두개의 값을 설정할 때, 첫 번째 값은 엘리먼트의 상단과 하단 (이 예시에서는 0입니다) 에 영향을 주고, 두 번째 값은 좌측과 우측 (여기서, auto 는 가능한 수평공간의 왼쪽과 오른쪽을 같게 나눠주는 특별한 값입니다) 에 영향을 줍니다. 여러분은 또한 하나, 셋, 또는 네개의 값을 사용할 수도 있습니다. 여기에 문서화 되어 있습니다.
background-color: #FF9500; — 전과 같이, 이것은 엘리먼트의 배경색을 설정합니다. html 엘리먼트를 위한 짙은 파란색에 반대되도록 바디에는 붉은 빛을 띄는 오렌지색 같은 것을 사용했었습니다. 한번 시험해보세요. 흰색이나 여러분이 원하는 어떤 색이든 편하게 사용해보세요.
padding: 0 20px 20px 20px; — padding 에는 컨텐트의 주위에 약간의 공간을 주기 위한 네 개의 값이 있습니다. 이번엔 바디의 상단에 no padding, 그리고 왼쪽, 아래 그리고 오른쪽에 20 pixels 을 설정하고 있습니다. 상단, 우측, 하단, 좌측 순서로 값을 설정합니다.
border: 5px solid black; — 이것은 간단하게 바디의 모든 면의 border 를 5 pixels 두깨의 실선으로 설정합니다.

메인 페이지 제목 배치하고 꾸미기

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 <h1> 엘리먼트에 (다른 것들 사이에서) 어떤 초기 스타일링을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. margin: 0;.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

다음으로, 헤딩의 상단과 하단 padding 을 20 pixels로 설정하고, 헤딩 글자 색을 html 배경색과 같게 만들었습니다.

여기서 사용했던 꽤 흥미로운 속성 하나는 문자입니다-shadow, 엘리먼트의 문자 컨텐트에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

첫 번째 pixel 값은 그림자의 수평 오프셋을 설정합니다 — 얼마나 옆으로 이동시킬 것인지.
두 번째 pixel 값은 그림자의 수직 오프셋을 설정합니다 — 얼마나 아래로 이동시킬 것인지.
세 번째 pixel 값은 그림자의 흐림 반경을 설정합니다 — 큰 값은 더 흐릿한 그림자를 의미할 것입니다.
네 번째 pixel 값은 그림자의 기본 색상을 설정합니다.

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

이미지 가운데 정렬

img {
  display: block;
  margin: 0 auto;
}

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 바디에서 했듯이 다시 margin: 0 auto 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. 바디 엘리먼트는 block level 입니다, 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 inline 엘리먼트 입니다, 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는, display: block; 을 사용해 이미지에 block-level 성질을 주어야 합니다.

노트: 아직 display: block; 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 페이지에서 찾아보세요.

마무리

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 많은 것이 필요하시면, CSS 배우기 페이지로 가보세요.