HTML로 시작하기 (Starting with some HTML)
우리의 출발점은 바로 HTML 문서입니다. 여러분의 컴퓨터에서 직접 작업하고 싶다면 아래 코드를 복사해서 사용하시면 돼요. 복사한 코드는 여러분 컴퓨터의 폴더에 index.html이라는 이름으로 저장해 주세요.
💡 강사의 팁: > 파일 이름을
index.html로 짓는 이유는 웹 서버가 폴더에 접근했을 때 가장 먼저 찾아 보여주는 기본(default) 파일 이름이기 때문이에요. 일종의 '메인 페이지'라는 약속이죠!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Getting started with CSS</title>
</head>
<body>
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text. In the text is a
<span>span element</span> and also a
<a href="[https://example.com](https://example.com)">link</a>.
</p>
<p>
This is the second paragraph. It contains an <em>emphasized</em> element.
</p>
<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
</body>
</html>브라우저에서 이 문서를 열어보면 아래처럼 렌더링(화면에 표시)됩니다.
(디자인이 전혀 적용되지 않은 흑백의 텍스트와 파란색 링크만 보이는 기본 HTML 화면이 나옵니다.)
참고:
만약 지금 파일을 쉽게 만들 수 없는 모바일 기기나 환경에서 이 글을 읽고 있다면 걱정하지 마세요. MDN 원본 페이지의 라이브 샘플에서 "Play" 버튼을 눌러 MDN Playground를 열면 됩니다. 거기서 아래에 안내될 CSS와 HTML 코드를 수정하고, 합쳐진 결과를 실시간으로 확인할 수 있어요.
우리 문서에 CSS 추가하기 (Adding CSS to our document)
우리가 가장 먼저 해야 할 일은 HTML 문서에게 "우리가 사용할 CSS 규칙들이 있어!"라고 알려주는 거예요. HTML 문서에 CSS를 적용하는 방법에는 여러분이 흔히 접하게 될 세 가지 방법이 있습니다. 바로 외부 스타일시트(external stylesheets), 내부 스타일시트(internal stylesheets), 그리고 인라인 스타일(inline styles)입니다. 자, 하나씩 살펴볼까요?
(만약 MDN Playground를 통해 이 글을 실습하고 있다면, 로컬 컴퓨터에서 코드를 작성하는 분들처럼 이 섹션의 과정을 똑같이 따라 하지는 못할 수 있어요. MDN Playground는 백그라운드에서 암묵적으로 HTML에 CSS를 추가하는 방식을 처리하거든요. 그렇더라도 어떤 내용인지 알아두기 위해 이 섹션을 꼭 읽어보시길 권합니다.)
외부 스타일시트 (External stylesheets)
외부 스타일시트는 CSS 코드를 .css 확장자를 가진 별도의 파일에 작성하는 방식이에요. 이것이 문서에 CSS를 가져오는 가장 일반적이고 유용한 방법입니다. 하나의 CSS 파일을 여러 웹 페이지에 연결할 수 있어서, 단 하나의 CSS 파일만으로 모든 페이지의 스타일을 한 번에 꾸밀 수 있죠.
여러분의 HTML 문서가 있는 폴더와 같은 위치에 새 파일을 만들고 styles.css라는 이름으로 저장해 보세요.
이제 styles.css를 index.html에 연결하기 위해, HTML 문서의 <head> 태그 안쪽 어딘가에 다음 코드를 추가해 줍니다.
<link rel="stylesheet" href="styles.css" />이 <link> 요소는 rel 속성을 통해 브라우저에게 우리가 연결하려는 파일이 '스타일시트'라는 것을 알려주고, href 속성의 값을 통해 그 스타일시트가 어디에 있는지 위치를 알려줍니다.
CSS가 잘 작동하는지 테스트해 볼까요? styles.css 파일에 규칙을 하나 추가해 봅시다. 여러분의 코드 에디터를 열고 CSS 파일에 다음 코드를 작성해 보세요.
h1 {
color: red;
}HTML과 CSS 파일을 모두 저장하고 웹 브라우저에서 페이지를 새로고침(Reload) 해보세요. 문서 맨 위에 있는 가장 큰 레벨 1 제목(<h1>)이 빨간색으로 변했을 겁니다. 만약 그렇게 됐다면, 축하합니다! HTML 문서에 CSS를 성공적으로 적용하신 거예요. 혹시 변하지 않았다면 오타가 없는지 모든 코드를 주의 깊게 다시 확인해 보세요.
💡 강사의 팁: > 실무에서는 99% 이상 외부 스타일시트 방식을 사용합니다. HTML은 뼈대, CSS는 옷이라고 생각해보세요. 옷과 뼈대를 따로 관리해야 유지보수하기 훨씬 편하겠죠? 게다가 브라우저는 외부 CSS 파일을 한 번 다운로드하면 '캐시(Cache)'라는 곳에 저장해 두기 때문에, 다른 페이지로 이동할 때마다 스타일을 다시 다운받지 않아도 되어서 웹사이트 속도도 훨씬 빨라집니다.
다양한 위치에 있는 스타일시트 불러오기
위의 예제에서는 CSS 파일이 HTML 문서와 완전히 같은 폴더에 있었죠. 하지만 CSS 파일을 다른 곳에 두고 경로만 수정해서 불러올 수도 있습니다. (HTML 이미지 불러오기 방식과 똑같아요!) 다음 세 가지 예시를 살펴볼까요?
<!-- 현재 디렉토리 안에 있는 'styles'라는 하위 디렉토리에 있을 때 -->
<link rel="stylesheet" href="styles/style.css" />
<!-- 현재 디렉토리 안에 있는 'styles' 디렉토리, 그 안의 'general' 디렉토리에 있을 때 -->
<link rel="stylesheet" href="styles/general/style.css" />
<!-- 현재 디렉토리에서 한 단계 위(부모 디렉토리)로 올라간 다음, 'styles'라는 디렉토리에 있을 때 -->
<link rel="stylesheet" href="../styles/style.css" />💡 강사의 부연 설명:
여기서../기호는 "지금 내가 있는 폴더에서 한 칸 밖으로 나가라"는 뜻입니다. 디렉토리 구조가 복잡해지면 파일의 상대적 위치를 잘 파악하는 게 아주 중요하답니다.
내부 스타일시트 (Internal stylesheets)
내부 스타일시트는 HTML <head> 태그 안에 들어가는 <style> 요소 안에 CSS를 작성하는 방식입니다. 한번 만들어 볼까요?
HTML 문서의 <head>와 </head> 태그 사이 어딘가에 다음 코드를 추가해 보세요.
<style>
p {
color: purple;
}
</style>저장하고 새로고침을 해보면, 모든 문단(<p>)의 글자 색상이 보라색으로 변한 것을 볼 수 있을 겁니다.
특정한 상황에서는 내부 스타일시트가 꽤 유용할 수 있어요. 예를 들어, 외부 CSS 파일을 수정하지 못하도록 막혀 있는 콘텐츠 관리 시스템(CMS, 예: 워드프레스, 네이버 블로그 등) 환경에서 작업해야 할 때 말이죠.
하지만, 페이지가 여러 개인 웹사이트의 경우 내부 스타일시트는 외부 스타일시트보다 효율성이 떨어집니다. 내부 스타일시트를 이용해 여러 페이지에 일관된 스타일을 적용하려면, 모든 웹 페이지마다 똑같은 내부 스타일시트 코드를 반복해서 복사/붙여넣기 해야 하거든요. 이런 비효율성은 사이트를 유지보수할 때도 고스란히 나타납니다. 내부 스타일시트를 사용하면, 디자인 하나만 살짝 바꾸려 해도 모든 웹 페이지를 하나하나 열어서 수정해야 하는 엄청난 위험을 감수해야 합니다.
다음 단계로 넘어가기 전에, 지금 HTML에 작성했던 <style> 요소와 그 안의 내용들을 모두 지워주세요.
인라인 스타일 (Inline styles)
인라인 스타일은 단 하나의 HTML 요소에만 영향을 미치는 CSS 선언으로, 해당 태그의 style 속성(attribute) 안에 직접 작성합니다. 한번 적용해 볼까요?
HTML 코드에 있는 <span> 요소에 style 속성을 추가해서 아래와 같이 만들어 보세요.
<span style="color: purple; font-weight: bold">span element</span>저장하고 새로고침 해보시면, 오직 그 <span> 태그 안의 텍스트만 보라색에 굵은 글씨로 변한 것을 볼 수 있습니다. 세미콜론(;)으로 구분해서 style 속성 안에 더 많은 규칙을 추가해 보거나, 다른 요소들에도 style 속성을 추가하며 실험해 보세요.
실험이 끝났다면 작성했던 style 속성들을 모두 지워주세요.
가능하다면 이런 방식의 CSS 사용은 피하셔야 합니다. 이것은 아주 좋지 않은 관행(bad practice)이에요. 첫째로, 유지보수 측면에서 가장 최악의 CSS 적용 방식입니다. 디자인 하나를 바꾸기 위해 하나의 웹 페이지 안에서도 수많은 코드를 일일이 찾아 고쳐야 할 수 있거든요. 둘째로, 인라인 CSS는 꾸미기 위한 코드(CSS)와 내용물(HTML)을 마구 뒤섞어버려서 코드를 읽고 이해하기 매우 어렵게 만듭니다. 코드와 콘텐츠를 분리해야 웹사이트를 작업하는 모든 사람이 유지보수하기가 훨씬 수월해집니다.
물론 작업 환경이 너무 제한적이라면 어쩔 수 없이 인라인 스타일을 써야 할 때도 있습니다. 앞서 말했듯 CMS에서 HTML의 <body> 부분만 수정할 수 있게 허용하는 경우가 그렇습니다. 또한, 세상에 존재하는 수많은 이메일 클라이언트(아웃룩, 지메일 등)와의 호환성을 맞추기 위해 HTML 이메일을 만들 때는 인라인 스타일을 도배하다시피 사용하는 것을 흔하게 볼 수 있어요. 그리고 자바스크립트를 사용해 동적으로 스타일을 적용할 때도 인라인 스타일이 꽤 흔하게 쓰인답니다.
💡 강사의 팁: > 나중에 '우선순위(Specificity)'라는 개념을 배우게 될 텐데, 인라인 스타일은 외부 스타일이나 내부 스타일보다 적용 우선순위가 훨씬 높습니다. 그래서 인라인 스타일을 남용하면 나중에 외부 CSS에서 스타일을 덮어쓰고 싶어도 안 바뀌는 아주 답답한 상황을 마주하게 될 거예요!
흔히 쓰이는 선택자 사용해보기 (Using common selectors)
이번 섹션에서는 여러분이 앞으로 자주 마주치게 될 더 일반적인 선택자(selector) 종류에 대해 짧게 둘러보겠습니다.
HTML 요소 선택하기 (Selecting HTML elements)
앞서 제목(<h1>)을 빨간색으로 만들면서, 우리가 HTML 요소를 직접 타겟팅해서 스타일을 입힐 수 있다는 것을 이미 보여드렸죠. 우리는 이것을 요소 선택자 (element selector) 또는 타입 선택자 (type selector) 라고 부릅니다. HTML 태그 이름과 정확히 일치하는 선택자예요. 문서 내의 모든 문단을 타겟으로 삼고 싶다면 p라는 선택자를 쓰면 됩니다. 모든 문단을 초록색으로 만들고 싶다면 이렇게 쓰면 되죠.
p {
color: green;
}선택자들을 쉼표(,)로 구분하면 한 번에 여러 개의 선택자를 타겟팅할 수도 있어요. 만약 모든 문단(p)과 모든 리스트 아이템(li)을 둘 다 초록색으로 만들고 싶다면 규칙을 이렇게 작성하면 됩니다.
p,
li {
color: green;
}💡 강사의 팁:
이렇게 쉼표로 연결하는 것을 그룹 선택자(Grouping Selector)라고 부릅니다. 공통된 스타일을 가진 요소들을 묶어주면 코드의 길이를 확 줄일 수 있겠죠?
아래 예제(또는 여러분의 로컬 컴퓨터)에서 직접 "Play"를 눌러 테스트해 보세요.
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="[http://example.com](http://example.com)">link</a>.
</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>h1 {
color: red;
}
p,
li {
}(원문에 있는 Scrimba 인터랙티브 레슨 링크는 마크다운에서 직접 렌더링되지 않지만, CSS 기초 연습을 위해 Scrimba 과정을 살펴보시는 것도 좋습니다.)
클래스 추가하기 (Adding a class)
지금까지 우리는 HTML 요소의 이름을 바탕으로 스타일을 적용했습니다. 이 방식은 문서 내에 있는 해당 타입의 모든 요소가 똑같이 보이기를 원할 때만 유용합니다. 하지만 다른 요소들은 그대로 두고 특정한 일부 요소들만 선택해서 스타일을 바꾸고 싶다면 어떨까요? 그럴 때는 HTML 요소에 class를 추가하고 CSS에서 그 클래스를 타겟팅하면 됩니다.
- 여러분의 HTML 문서에서 두 번째 리스트 아이템(
<li>)에 class 속성을 추가해 보세요. 이제 리스트는 아래처럼 보일 겁니다.
<ul>
<li>Item one</li>
<li class="special">Item two</li>
<li>Item <em>three</em></li>
</ul>- CSS에서는 선택자 앞에 마침표(
.)를 붙여서special이라는 클래스를 타겟팅할 수 있습니다. CSS 파일에 다음 내용을 추가해 보세요.
.special {
color: orange;
font-weight: bold;
}- 저장하고 새로고침해서 결과를 확인해 보세요.
이제 여러분은 방금 꾸민 리스트 아이템과 똑같은 디자인을 적용하고 싶은 페이지 내의 다른 요소들에 special 클래스를 추가하기만 하면 됩니다. 첫 번째 문단 안에 있는 <span> 태그에도 special 클래스를 추가한 다음 페이지를 다시 불러와보세요. 그 태그 역시 주황색의 굵은 글씨로 변했을 겁니다!
💡 강사의 부연 설명:
HTML에는 요소에 이름을 붙일 수 있는id라는 속성도 있어요. 하지만id는 한 페이지에 단 하나만 존재해야 하는 고유한 이름표입니다. 반면class는 동일한 이름을 여러 요소에 얼마든지 반복해서 쓸 수 있어요. CSS는 재사용성이 핵심이므로, 스타일을 지정할 때는id보다class를 사용하는 것이 훨씬 좋은 습관입니다.
문서 내 위치에 따라 스타일링하기 (Styling things based on their location in a document)
요소가 문서의 어느 위치에 있느냐에 따라 다르게 보이게 만들고 싶을 때가 있을 겁니다. 이를 도와주는 선택자들이 여러 개 있는데, 우선 두 가지만 살펴볼게요.
우리의 문서에는 두 개의 <em> 요소가 있습니다. 하나는 문단(<p>) 안에 중첩되어 있고, 다른 하나는 리스트 아이템(<li>) 안에 중첩되어 있죠. 오직 <li> 요소 안에 중첩된 <em>만 선택하고 싶다면, 두 선택자 사이에 띄어쓰기(공백)를 하는 자손 결합자(descendant combinator)를 사용하면 됩니다.
스타일시트에 다음 규칙을 추가해 보세요.
li em {
color: rebeccapurple;
}이 선택자는 <li>의 자손(내부에 있는 요소)인 모든 <em> 요소를 선택할 겁니다. 따라서 예제 문서를 확인해보면, 세 번째 리스트 아이템에 있는 <em>은 보라색(rebeccapurple)으로 변했지만, 문단 안에 있는 <em>은 변하지 않은 것을 알 수 있어요.
💡 강사의 팁: > '자손'이라는 말은 바로 아래 자식뿐만 아니라 손자, 증손자 등 하위 요소면 전부 포함된다는 뜻이에요. 즉
<li>태그 안에 얼마나 깊이 들어가 있든 상관없이 그 안에 있는<em>을 다 찾는답니다.
한 가지 더 해볼까요? HTML에서 같은 계층에 있으면서, 어떤 제목 바로 뒤에 나오는 문단만 꾸미고 싶을 때가 있습니다. 이럴 때는 선택자들 사이에 + 기호(인접 형제 결합자, next-sibling combinator)를 넣으면 됩니다.
스타일시트에 아래 규칙도 추가해 보세요.
h1 + p {
font-size: 200%;
}아래 라이브 예제에는 위 두 가지 규칙이 모두 포함되어 있습니다. 직접 연습해 볼까요? '문단(p) 안에 있는 스팬(span)'을 빨간색으로 만드는 규칙을 추가해 보세요. 첫 번째 문단에 있는 span만 빨간색으로 변하고 첫 번째 리스트 아이템에 있는 span은 색이 변하지 않는다면 정답을 맞히신 겁니다!
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="[http://example.com](http://example.com)">link</a>.
</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>li em {
color: rebeccapurple;
}
h1 + p {
font-size: 200%;
}
/* 여기에 여러분의 코드를 작성해보세요! (정답: p span { color: red; } ) */참고:
보시다시피 CSS는 요소를 타겟팅하는 아주 다양한 방법을 제공합니다. 그리고 지금까지 배운 건 정말 빙산의 일각에 불과해요! 이 코스 후반부에 가면 이 모든 선택자뿐만 아니라 훨씬 더 많은 선택자들에 대해 제대로 파헤쳐 볼 예정입니다.
상태를 기준으로 스타일링하기 (Styling things based on state)
이번 튜토리얼에서 살펴볼 마지막 스타일링 방식은 '상태(state)'에 따라 스타일을 다르게 주는 방법입니다.
가장 이해하기 쉬운 예시가 바로 링크를 꾸밀 때예요. 링크를 스타일링하려면 일단 <a> (앵커) 요소를 타겟팅해야 하죠. 하지만 이 앵커 요소는 상태가 여러 가지입니다. 사용자가 아직 방문하지 않은 상태일 수도 있고, 이미 방문한 상태일 수도 있고, 마우스를 위에 올려둔(호버) 상태일 수도 있고, 키보드로 포커스를 맞춘 상태일 수도 있고, 클릭하고 있는 찰나(활성화)의 상태일 수도 있습니다.
CSS를 사용하면 이런 다양한 상태들을 타겟팅할 수 있어요. 아래 CSS 코드는 아직 방문하지 않은 링크를 분홍색으로, 방문한 적 있는 링크를 초록색으로 만들어줍니다.
a:link {
color: pink;
}
a:visited {
color: green;
}사용자가 링크 위에 마우스를 올렸을 때(호버했을 때) 링크의 모습을 바꿀 수도 있죠. 예를 들어 다음 규칙을 사용하면 마우스를 올렸을 때 밑줄을 없앨 수 있습니다.
a:hover {
text-decoration: none;
}아래 예제에서 링크의 다양한 상태에 대해 값을 직접 바꿔가며 놀아보세요. 위의 규칙들을 미리 적어두었는데, 막상 보니 분홍색이 너무 밝아서 글씨를 읽기가 좀 힘드네요. 더 보기 편한 색깔로 바꿔보는 건 어떨까요? 링크 글씨를 굵게 만들 수도 있을까요?
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="[http://example.com](http://example.com)">link</a>.
</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}💡 강사의 팁:
링크의 상태 선택자들을 정의할 때는 순서가 아주 중요해요! 보통 Link -> Visited -> Hover -> Active 순서로 작성해야 서로 덮어쓰는 오류를 막을 수 있습니다. 앞 글자만 따서 "LoVe HAte (사랑과 전쟁)"라고 외우면 절대 안 까먹는답니다!
우리는 마우스를 올렸을 때 링크의 밑줄을 지워봤습니다. 물론 모든 상태의 링크에서 밑줄을 아예 지워버릴 수도 있죠. 하지만 실전 웹사이트를 만들 때는, 방문자가 이게 링크라는 것을 확실히 알 수 있게 해줘야 한다는 점을 명심해야 합니다. 밑줄을 남겨두는 것은 문단 속에 있는 글씨 중 어떤 것이 클릭 가능한지 알려주는 아주 중요한 단서예요. 사람들은 파란색 밑줄 친 글씨가 링크라는 사실에 이미 익숙해져 있거든요. CSS로 모든 것을 마음대로 바꿀 수 있지만, 여러분의 변경 사항이 문서를 사용하기 더 불편하게 만들(접근성을 떨어뜨릴) 가능성도 항상 존재합니다. 저희는 적절한 타이밍마다 이러한 잠재적 위험들을 짚어드릴 예정입니다.
참고:
MDN 문서와 이 강의를 보다 보면 접근성(accessibility)이라는 단어를 자주 접하게 될 거예요. 우리가 접근성을 이야기할 때는, 우리의 웹페이지가 모든 사람에게 이해 가능하고 사용하기 쉬워야 한다는 필수 조건을 의미합니다. 마우스나 트랙패드를 사용하는 사람이든, 터치스크린 스마트폰을 쓰는 사람이든, 키보드만으로 탐색하는 사람이든, 화면의 내용을 소리내어 읽어주는 스크린 리더기를 사용하는 시각장애인이든 상관없이 말이죠.
선택자와 결합자 섞어서 사용하기 (Combining selectors and combinators)
알아두어야 할 중요한 사실이 하나 있습니다. 여러 개의 선택자와 여러 종류의 결합자를 여러분 마음대로 조합해서 쓸 수 있다는 점이에요. 예를 들면 아래처럼요.
/* <article> 안에 있는, <p> 안에 있는 모든 <span>을 선택합니다. */
article p span {
}
/* <h1> 바로 다음에 오는 <ul>, 그 <ul> 바로 다음에 오는 모든 <p>를 선택합니다. */
h1 + ul + p {
}심지어 서로 다른 타입들을 다 섞어서 쓸 수도 있습니다. 아래 코드를 여러분의 코드에 직접 추가해 보세요.
h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}이 규칙은 " <h1> 바로 다음에 오는 <p> 안에 있으면서, 클래스 이름이 special인 요소"를 스타일링합니다. 휴, 길기도 하네요! 이 규칙은 여러분 코드에 있는 <span class="special">span element</span> 요소를 정확히 찾아낼 거예요.
지금 당장 이 내용이 너무 복잡해 보인다고 해도 걱정하지 마세요. CSS를 계속 작성하다 보면 금방 감이 오고 자연스러워질 테니까요.
기타 CSS 문법 기능들 (Other CSS syntax features)
지금까지 몇 가지 CSS 기능들을 만져보았는데요, 이제 앞으로 이 코스에서 만나게 될 다른 CSS 문법 기능들을 가볍게 수박 겉핥기 식으로 둘러보겠습니다. 어떤 기능에 대해 더 자세히 알고 싶다면 이 페이지 맨 위의 검색창에 기능 이름을 검색하거나 MDN CSS reference를 찾아보시면 됩니다.
아래 소개될 코드들을 실험해보고 싶다면, 아까 만들었던 로컬 파일이나 MDN Playground에 HTML과 CSS를 직접 추가해서 테스트해보세요.
함수 (Functions)
대부분의 CSS 속성 값은 'red', 'bold' 같은 비교적 단순한 키워드나 '10px' 같은 숫자 값입니다. 하지만 어떤 값들은 '함수(function)'의 형태를 띠기도 합니다.
calc() 함수
대표적인 예가 calc() 함수입니다. 이 함수를 쓰면 CSS 안에서 간단한 수학 계산을 할 수 있어요.
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}이 코드를 실행하면 어떻게 될까요? 박스의 너비가 부모 컨테이너 너비의 90%에서 30픽셀을 정확히 뺀 크기로 맞춰집니다.
함수는 '함수 이름'과 그 함수에 전달할 값을 감싸는 괄호 ()로 이루어집니다. 위 calc() 예제에서 괄호 안의 식은 "이 박스가 담겨있는 컨테이너 너비의 90%에서 30픽셀을 빼라"는 뜻입니다. 화면 크기가 줄어들면 90%의 값도 줄어들기 때문에 계산 결과도 유동적으로 바뀌게 되죠!
Transform (변형) 함수
또 다른 예로 transform 속성에 쓰이는 rotate() 같은 다양한 값들이 있습니다.
<div class="box"></div>.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
}위 코드의 결과는 보라색 네모 박스가 기울어져 있는 모습으로 나타납니다. rotate(0.8turn)은 박스를 0.8바퀴(약 288도) 회전시키라는 뜻의 함수거든요.
💡 강사의 팁: > 아래 링크된 속성들의 다양한 값들을 한번 찾아보세요. 그리고 이 함수들을 사용해서 다양한 HTML 요소에 직접 스타일을 적용하는 CSS 규칙을 작성해 보는 연습을 추천합니다.
transform(스케일 키우기, 이동하기 등)
background-image(특히 그라데이션 값 적용해보기)
color(특히 rgb 값이나 hsl 함수 사용해보기)
@규칙 (@rules)
CSS의 @rules (발음: "앳 룰스")는 CSS가 어떻게 행동해야 하는지 구체적인 지시사항을 제공합니다. 여러분이 가장 흔하게 마주치게 될 @rule 중 하나는 @media입니다. 이것은 미디어 쿼리 (media queries)를 만들 때 사용되죠. 미디어 쿼리는 특정한 조건(예: 화면 크기)이 맞을 때만 CSS 스타일을 적용하도록 하는 '조건부 논리'입니다.
아래 예제에서 스타일시트는 기본적으로 <body> 요소의 배경색을 분홍색으로 지정합니다. 하지만 그 바로 뒤에 미디어 쿼리가 따라오죠. 이 미디어 쿼리는 브라우저 화면의 너비(viewport)가 30em보다 넓을 때만 <body>의 배경색을 파란색으로 바꿉니다.
body {
background-color: pink;
}
@media (width >= 30em) {
body {
background-color: blue;
}
}💡 강사의 팁:
스마트폰에서 볼 때와 PC에서 볼 때 레이아웃이 다르게 바뀌는 웹사이트들을 본 적 있죠? 이것을 '반응형 웹 디자인(Responsive Web Design)'이라고 하는데, 이 반응형 웹의 핵심 마법이 바로 이@media쿼리랍니다!
단축 속성 (Shorthand properties)
font, background, padding, border, margin 같은 일부 속성들은 단축 속성(shorthand properties)이라고 불립니다. 왜냐하면 여러 개의 속성 값을 단 한 줄로 줄여서 작성할 수 있게 해주기 때문이죠.
예를 들어, 아래의 딱 한 줄짜리 코드는:
/* padding이나 margin 같이 4개의 값을 갖는 단축 속성에서,
값은 상(Top), 우(Right), 하(Bottom), 좌(Left) 순서(시계 방향)로 적용됩니다.
값이 2개만 있는 단축 속성도 있는데, 이 경우 첫 번째 값은 상/하, 두 번째 값은 좌/우를 뜻합니다. */
padding: 10px 15px 15px 5px;아래의 네 줄짜리 코드와 완전히 똑같은 역할을 합니다:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;💡 강사의 팁:
시계 방향이라는 것만 기억하세요! 12시(Top) -> 3시(Right) -> 6시(Bottom) -> 9시(Left). 실무에서는 코드를 간결하게 만들기 위해 이 단축 속성을 정말 숨 쉬듯이 사용한답니다.
또 다른 예로, 이 한 줄의 코드는:
background: red url("bg-graphic.png") 10px 10px repeat-x fixed;아래의 다섯 줄 코드와 같습니다:
background-color: red;
background-image: url("bg-graphic.png");
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;이 강의 코스를 진행하다 보면 이 외에도 정말 많은 단축 속성의 예시를 만나게 될 거예요. 지금은 이 단축 속성이 어떤 식으로 작동하는지 익숙해지기 위해 여러분의 코드에 직접 사용해 보는 것을 추천합니다.
CSS 주석 (CSS Comments)
어떤 코딩 작업을 하든, 주석(comments)을 남기는 것은 최고의 습관(best practice)입니다. 주석은 나중에 버그를 고치거나 기능을 추가하려고 코드를 다시 봤을 때, 그 코드가 어떻게 작동하는지 기억나게 도와줍니다. 또한 같이 일하는 동료들이 여러분의 코드를 이해하는 데도 큰 도움을 주죠.
CSS 주석은 /* 로 시작해서 */ 로 끝납니다. 아래 예제를 보면, 코드의 각 섹션이 시작하는 부분에 주석을 달아두었습니다. 이렇게 하면 코드베이스가 점점 커질 때 탐색하기가 훨씬 수월해집니다. 코드 에디터에서 검색 기능을 활용해 이 주석만 찾으면 원하는 코드 영역을 순식간에 찾아갈 수 있거든요.
/* 기본 요소 스타일링 처리 */
/* ---------------------------- */
body {
font:
1em/150% "Helvetica",
"Arial",
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (width >= 70em) {
/* 더 큰 화면이나 창에서 가독성을 높이기 위해 전역 폰트 크기를 키웁니다 */
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
/* DOM에 중첩된 특정 요소들 처리 */
/* ---------------------------- */
div p,
#id::first-line {
background-color: red;
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}코드를 "주석 처리"하는 것은 테스트를 위해 일시적으로 특정 코드의 작동을 멈추고 싶을 때도 아주 유용합니다. 아래 예시를 보면 .special 규칙이 "주석 처리"되어 비활성화된 것을 볼 수 있습니다.
/* .special {
color: red;
} */
p {
color: blue;
}여러분의 CSS 파일에도 주석을 다는 연습을 해보세요!
CSS에서의 공백 (White space in CSS)
'공백(White space)'이란 스페이스(띄어쓰기), 탭(들여쓰기), 엔터(줄바꿈)를 모두 일컫는 말입니다. 브라우저가 HTML 코드 안에 있는 불필요한 공백들을 무시하는 것처럼, 브라우저는 CSS 안에 있는 여분의 공백들도 전부 무시합니다. 그럼 공백을 왜 쓰냐고요? 공백의 가장 큰 장점은 사람이 코드를 훨씬 읽기 쉽게 만들어 준다는 것입니다.
아래 예제를 보면, 각 선언문(그리고 규칙의 시작과 끝 중괄호)이 각각 독립적인 줄에 나뉘어 작성되어 있습니다. 틀림없이 이게 CSS를 작성하는 가장 좋은 방법입니다. 코드를 이해하고 유지보수하기 훨씬 쉬워지니까요.
body {
font:
1em/150% "Helvetica",
"Arial",
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (width >= 70em) {
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}다음 예제는 위의 코드와 완전히 똑같은 CSS를 불필요한 공백을 모두 제거한 채 '압축된' 형태로 보여줍니다. 두 예제는 완벽히 똑같이 작동하지만, 아래에 있는 코드는 사람이 읽기에는 숨이 막히게 어렵죠.
body{font:1em/150% "Helvetica","Arial",sans-serif;padding:1em;margin:0 auto;max-width:33em;}
@media(width>=70em){body{font-size:130%;}}
h1{font-size:1.5em;}💡 강사의 팁:
실무에서는 여러분이 작업할 때는 위의 보기 좋은 포맷으로 작업하고, 실제로 웹에 배포할 때는 파일 용량을 줄이기 위해 아래처럼 공백을 싹 없애주는 'Minify(최소화)' 과정을 거치게 됩니다. 사람이 읽을 코드와 기계가 읽을 코드를 분리하는 거죠!
하지만 주의할 점이 있습니다. 어떤 곳에서는 공백을 없애거나 추가하면 오류가 발생할 수 있습니다! 속성 이름(Property names) 중간에는 절대 공백이 들어가선 안 됩니다. 반대로 속성 값(Property values)에 여러 개의 값을 나열해야 할 때, 구분하기 위한 띄어쓰기를 지워버리면 유효하지 않은 코드가 되어버립니다.
예를 들어 아래 선언들은 완전히 올바른 CSS입니다.
margin: 0 auto;
padding-left: 10px;하지만 아래의 선언들은 오류가 나는 잘못된 코드입니다.
margin: 0auto;
padding- left: 10px;어디서 띄어쓰기 에러가 났는지 보이시나요? 첫째, 0auto는 margin 속성에 들어갈 수 있는 유효한 값이 아닙니다. 이 값은 원래 0과 auto라는 두 개의 독립된 값이어야 하거든요. 둘째, 브라우저는 padding- 이라는 속성을 알지 못합니다. 올바른 속성 이름인 padding-left 안에는 공백이 있으면 안 되기 때문이죠.
항상 서로 다른 독립적인 값들 사이에는 최소한 한 칸 이상의 스페이스(띄어쓰기)를 두어야 합니다. 반대로 속성 이름 한 단어, 혹은 속성 값 한 단어 안에서는 문자들을 쪼개지 말고 온전한 하나의 문자열로 붙여 써야 한다는 것을 명심하세요.
띄어쓰기 때문에 CSS가 어떻게 망가질 수 있는지 알아보기 위해, 여러분의 테스트 CSS 코드에서 띄어쓰기를 넣었다 뺐다 하며 장난을 쳐보세요! 직접 눈으로 보면 금방 이해될 겁니다.
요약 (Summary)
이번 글에서는 문서에 CSS 스타일을 입히는 다양한 방법들을 살펴보았습니다. 앞으로 남은 강의들을 들으며 이 지식들을 계속 발전시켜 나갈 예정이에요. 하지만 지금 여러분이 배운 것만으로도, 이미 텍스트를 꾸미고 문서 내 요소들을 타겟팅하여 CSS를 적용할 수 있는 충분한 지식을 갖추셨습니다. 정말 고생 많으셨어요!
