CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다.
HTML이 웹페이지의 구조를 담당한다면 CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다. 같은 HTML 구조를 가지고 있는 문서에 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>index.html 파일을 만들어 코드를 붙여 넣어보자.
등장하지 않았던 낯선 태그를 두려워할 필요는 전혀 없다. 이 파일에 등장 하는 <header>, <main>, <nav>, <asdie>, <footer> 태그는 <div> 태그와 똑같다. 그러나 태그를 부르는 이름이 다르다. 이렇게 이름에 의미를 붙여 부르는 태그를 시맨틱 태그라고 부른다.
index.html 파일을 살펴보았다. 위의 HTML파일은 다양한 구조를 나타낸다. 그러나 HTML 파일을 실행하더라도 구조가 눈에 보이지 않아 아 파악하기 힘들다. 이 문제를 해결하기 위해 index.css 파일을 작성한다.
CSS를 이용해 멋지게 꾸미기 전에 각 영역에 고유한 색상을 지정한다. 눈에 보이지 않는 영역을 구분하기 위해 단순한 색상을 주로 사용한다. index.css 파일이 비어있다면 아래의 내용을 붙여넣어보자.
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
}
main {
background: #f9f9f9;
}
aside {
background: #eee;
}index.css 파일을 만들어 코드를 붙여넣어 보자.
결과는?
codepen에서 확인해보자.
셀렉터는 태그이름이나 id, 또는 클래스를 선택한다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성한다. 요소에 작성할 수 있는 내용을 속성이라고 한다. 색상, 글자크기 등 다양한 속성이 있다.
속성에 적용할 적절한 값을 입력하여 스타일을 표현한다. 그림에 나타나있는 color: red; 는 이 요소의 색상을 빨간색으로 스타일링한다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다. 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋다.
위에서는 HTML파일과 CSS 파일을 작성했다. 이번에는 CSS 파일에 작성된 내용을 HTML에 적용하는 방법을 학습한다. 이미 두 파일은 연결 되어있으나, CSS을 HTML 파일과 연결하는 부분은 index.html 파일의 6번째 줄에 있다. CSS 파일을 HTML 파일에 연결할 때에는, link 태그 안에서 href 속성을 통해 파일을 연결한다.
<link rel = "stylesheet" href = "index.css" />link 태그와 link태그의 속성
link 태그는 파일과 다른 파일을 연결하는 목적으로 사용한다.
link 태그의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다. CSS는 Style sheet이므로 rel 속성에 stylesheet 을 추가한다. href 속성에는 파일의 위치를 추가해야 한다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력한다. 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있다.
똑같은 구조에 다른 스타일을 적용하면 완전히 다른 스타일로 탈바꿈할 수 있다. 새로운 CSS파일을 layout.css 라는 이름으로 만들고 다음의 내용을 붙여넣어보자. 그리고 이 CSS 파일을 연결하기 위해 새로운 <link>태그를 추가해보자. layout.css 파일은 index.css 파일과는 달리 HTML 태그를 배치하는 역할을 한다. 이 파일에서 나타나는 flex와 같은 다양한 속성은 레이아웃을 학습할 때 좀 더 자세히 살펴보겠다.
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />index.html 파일에 새로운 link 태그를 추가한다.
body {
min-height : 100vh;
display : flex;
flex-direction : column;
}
.container {
display : flex;
flex : 1;
}
main {
flex : 1;
padding : 0 20px;
}
nav {
flex : 0 0 180px;
padding : 0 10px;
}
aside {
flex : 0 0 130px;
padding : 0 10px;
}layout.css 파일을 만들고 위 내용을 붙여 넣어보자.
CSS 스타일을 적용할 수 있는 방법은 3가지가 있다.
그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style 태그 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부스타일 시트이다. 아래의 예제는 세 가지 방법 중 인라인 스타일에 해당한다.
<nav style="background: #eee; color: blue">...</nav>[코드]CSS 스타일 적용법 중 인라인 스타일
codepen에서 확인해보자.
id로 이름 붙여서 스타일링 적용하기
위에서 작성해본 HTML 문서에는 <h4> 나 <p> 요소(elements가 여럿 존재한다. navigation section 아래의 <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있다. 이름을 붙일 때는 가능한 의미를 담아서 구분할 수 있도록 하고 id가 있는 요소를 선택할 때에는 #기호를 이용한다. id는 하나의 문서에서 한 요소만 사용해야 한다.
h4{
color: red;
}[코드] h4 태그의 색상을 변경
codepen에서 확인해보자.
class로 스타일을 분류하여 적용하기
id와 유사하게 특정 요소에 class를 지정하는 방법도 있다. 이번에는 navigation section의 <li> 요소와 footer의 <li> 요소를 구분한다. 가장 먼저 시도했던 태그를 선택하는 방법으로 <li> 요소를 스타일링 한다.
li {
text-decoration : underline;
}[코드] li 요소에 밑줄을 친다.
codepen에서 확인해보자.
이번에는 의도와 다르게 footer에 있는 <li> 요소에도 스타일링이 적용되었다. 그러나 앞서 id는 한 문서에서 한 번만 사용할 수 있다고 안내하였다. 만약 다음 예제는 navigation section의 모든 <li> 요소에 id를 추가하고 CSS를 적용했다고 해보자. 이 예제는 id를 잘못 사용한 예제이다. id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.
<!-- 잘못된 예제 -->
<ul>
<li id="menu-item">Home</li>
<li id="menu-item">Mac</li>
<li id="menu-item">iPhone</li>
<li id="menu-item">iPad</li>
</ul>[코드] 잘못된 id의 사용
동일한 기능을 하는 CSS를 여러 요소에 사용하기 위해서 class를 사용한다. navigation section의 모든 li 요소에 동일한 class를 추가하면 동일한 스타일을 여러 엘리먼트에 적용할 수 있다. class는 #이 아닌 .을 이용해 선택한다.
<!-- 바른 예제 -->
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>[코드] 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다.
.menu-item {
text-decoration: underline;
}[코드] class menu-item을 선택하여 밑줄을 적용한다.
여러 개의 class를 하나의 엘리먼트에 적용하기
바로 위 예제에서 하나의 class를 여러 요소에 적용했다. 이번에는 반대로 여러 class를 하나의 요소에 적용한다. 여러 class를 하나의 요소에 적용하기 위해서는 공백으로 적용하려는 class의 이름을 분리한다. 다음 예제를 통해 <li> 요소에 적용된 여러 class 중에서 selected class를 통해 적용된 내용을 확인할 수 있다.
요소를 만들거나 요소에 스타일링을 적용할 때에는 항상 이름과 목적이 일치하는지 잘 살펴보자.
<li class="menu item selected">Home</li>[코드] 하나의 요소에 여러 class를 적용하는 방법
.selected {
font-weight: bold;
color: #009999;
}[코드] 특정 클래스(selected)를 통해 요소를 스타일링하는 모습
마무리
id와 class의 차이점을 반드시 기억하자.
| id | class |
| # 으로 선택 | . 으로 선택 |
| 한 문서에 단 하나의 요소만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
'My Wiki (CodesStates) > HTML,CSS' 카테고리의 다른 글
| (2-1) HTML/CSS 중급 - 레이아웃 (0) | 2021.08.03 |
|---|---|
| (1-5) HTML/CSS 기초 - CSS 기초 (박스 모델) (0) | 2021.07.10 |
| (1-4) HTML/CSS 기초 - CSS 기초 (텍스트 꾸미기) (0) | 2021.07.10 |
| (1-2) HTML/CSS 기초 - HTML 기초(자주 사용하는 HTML 요소) (0) | 2021.07.10 |
| (1-1) HTML/CSS 기초 - HTML 기초 (기본구조와 문법) (0) | 2021.07.10 |
댓글