블로그에 글 쓰기
CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?
그래서 CSS가 뭔가요?
HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.
p {
color: red;
}
한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.
아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)
index.html파일을 열고 head의 안쪽 어딘가(즉,<head>와</head>태그 사이)에 아래의 코드를 붙여 넣으세요:HTML<link href="styles/style.css" rel="stylesheet" type="text/css" />index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!
CSS의 ruleset 해부
위의 CSS를 좀 더 자세히 살펴 봅시다:
전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 “rule”이라고 합니다). 각 부분의 이름에도 주목하세요:
- 선택자(selector)
- rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
- 선언
color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.- 속성(property)
- 주어진 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> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함 |
탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드 (en-US)에서 찾아보세요.
글꼴과 문자
지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더 많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.
참고: “px” 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.
- 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물 (en-US)을 찾으세요.
index.html의 head 안 어딘가에<link>요소를 추가하세요 (다시 말해서,<head>와</head>태그 사이 어디에나). 이런식이 될 겁니다:HTML<link href="http://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를 물려 받습니다):CSShtml { font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */ font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다. }
LEAVE A COMMENT