Achievement Goals
- CSS의 사용목적을 이해할 수 있다.
- 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
- CSS의 기본 문법과 구조를 이해할 수 있다.
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
- 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
- id 및 class와 관련된 selector 규칙을 이해할 수 있다.
- CSS를 이용해 텍스트를 꾸밀 수 있다
- CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
- 각 단위가 적합한 경우를 구분할 수 있다.
- CSS 박스 모델을 이해할 수 있다
- box model
- width, height
- margin, padding, border
- 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
- box model
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
-
CSS 만들기
- CSS는 스타일링 도구이므로, 독립적으로 기능하지 않습니다.
반드시 HTML이 있어야만 동작할 수 있습니다. - 한 폴더에 간단하게 작성한 HTML 파일인 index.html이 있습니다. 같은 폴더에 새로운 css 파일 index.css을 만들어 웹사이트를 만들어봅니다.
- CSS는 스타일링 도구이므로, 독립적으로 기능하지 않습니다.
-
index.html 파일
<!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.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;
}-
셀렉터는 태그이름이나 id, 또는 클래스를 선택합니다.
셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다.
요소에 적용할 수 있는 내용을 속성이라고 합니다.
색상, 글자크기 등 다양한 속성이 있습니다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다. 그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링합니다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다. 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다. -
질문
-
위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
margin
padding
color
font-size
text-align
padding
background-color
color
background -
텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
text-align -
글자 색을 바꾸기 위한 속성은 무엇인가요?
color -
배경 색을 바꾸기 위한 속성은 무엇인가요?
background-color -
background 속성과 background-color 속성은 어떻게 다른가요?
background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성 들을 한번에 쓸 수 있는 속성입니다.
background-color 배경 색
background-image 배경 이미지
background-repeat 배경 이미지 반복 여부
background-position 배경 이미지 위치 -
em의 의미는 무엇인가요?
em과 rem은 둘 다 CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위입니다.
-
-
CSS 파일 추가
<link rel="stylesheet" href="index.css"/>- link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. link 태그의 rel은 연결하고자하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가합니다. href속성에는 파일의 위치를 추가해야 합니다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력합니다. 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />- layout.css
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;
}- id로 이름 붙여서 스타일링 적용하기
h4 {
color: red;
}-> 모든 h4 요소가 여러개 일때는 모두 바뀐다.
<h4 id="navigation-title">This is the navigation section.</h4>#navigation-title {
color: red;
}-> <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있습니다 이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록 합니다. id가 있는 요소를 선택할 때에는 #기호를 이용합니다. id는 하나의 문서에서 한 요소에만 사용해야 합니다.
- 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>.menu-item {
text-decoration: underline;
}->동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용합니다. navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 엘리먼트에 적용할 수 있습니다. class는 #이 아닌 .을 이용해 선택합니다.
- 여러 개의 class를 하나의 엘리먼트에 적용하기
<li class="menu-item selected">Home</li>->하나의 요소에 여러 class를 적용하는 방법
.selected {
font-weight: bold;
color: #009999;
}->특정 클래스(selected)를 통해 요소를 스타일링하는 모습
- ID와 CLASS 차이
출처 코드스테이츠
