CSS란?
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>와 같은 html코드가 있다.
이 파일에 등장하는 header, main, nav, aside, footer 요소는
기능적으로는 div 요소와 똑같지만,
이 요소가 감싸고 있는 영역이 어떤 역할을 담당하는지 개발자가 쉽게 파악할 수 있도록 돕는 시맨틱 요소이다.
그러나 HTML 파일을 실행하더라도 구조가 눈에 보이지 않아 파악하기 힘들다.
이 문제를 해결하기 위해 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;
}CSS 문법 구성
셀렉터는 요소 이름이나 id, 또는 클래스를 선택한다.
셀렉터로 특정 요소를 선택했다면,
중괄호 안에서 이 요소에 적용할 내용을 작성한다.
요소에 적용할 수 있는 내용을 속성이라고 한다.
색상, 글자 크기 등 다양한 속성이 있습니다.
속성에 적용할 적절한 값을 입력하여 스타일을 표현한다.
그림에 나타나 있는 color: red;는
이 요소의 색상을 빨간색으로 스타일링 해준다.
속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다.
하나의 속성만 존재할 때는 세미콜론을 붙이지 않아도 무방하지만,
속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋다.
CSS 파일의 추가
CSS 파일을 HTML 파일에 연결할 때는,
link 태그 안에서 href 속성을 통해 파일을 연결한다.
<link rel="stylesheet" href="index.css" />link 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다. link 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가한다.
href 속성에는 파일의 위치를 추가해야 한다.
지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력한다.
다른 폴더에 파일이 존재하는 경우,
절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있다.
CSS 파일 적용 3가지 방법
CSS 스타일을 적용할 수 있는 방법은 3가지가 있다.
그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일,
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고
style 요소 내에 작성하는 내부 스타일 시트,
그리고 앞서 설명한 외부 스타일 시트 이다.
아래의 예제는 세 가지 방법 중 인라인 스타일에 해당한다.
<nav style="background: #eee; color: blue">...</nav>셀렉터 (selector)
아래의 h4 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있다.
이름을 붙일 때는 가능한 의미를 담아서 구분할 수 있도록 한다.
id가 있는 요소를 선택할 때는 #기호를 이용한다.
id는 하나의 문서에서 한 요소에만 사용해야 한다.
<h4 id="navigation-title">This is the navigation section.</h4>
#navigation-title {
color: red;
}id와 유사하게 특정 요소에 class를 지정하는 방법도 있다.
동일기능을 하는 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>
<li class="menu-item selected">Home</li>
</ul>.selected {
font-weight: bold;
color: #009999;
}id와 class의 차이점
