CSS란?
CSS(Cascading Style Sheet)는 스타일이 적용되는 방식이 단계적으로(Cascading) 적용된다고 해서 붙여진 이름이고, 여기서 스타일이란 html 문서의 글꼴이나 색상 등을 의미한다. 단계적으로의 의미는 내가 <div> 태그에 스타일을 적용하였는데 그 안에 <p>태그가 있는 경우, <p>역시 스타일이 적용된다는 것을 의미한다.
(Sheet가 붙은 이유는 Style을 관리하기 쉽게 모아놨기 때문이다)
선택자(selector)란?
스타일을 적용하기 위해선 대상을 '선택'하는것 부터 시작해야 한다. 선택은 html 페이지 내 모든 태그를 선택할 수도 있고, 특정 태그를 선택할 수도 있고, 클래스를 선택할 수도 있다.
클래스(class)란?
'이름표'라고 생각하면 된다.
CSS 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아무것도 모르고 시작하는 코딩 | 지노스</title>
<style>
.red-font {
color: red;
}
</style>
</head>
<body>
<h1 class="red-font">로그인 페이지</h1>
<div class="red-font">
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</html>
<body>에 <h1>을 보면, <h1 class="red-font">로그인 페이지</h1>라고 되어있는 것을 볼 수 있다.
즉, <h1>태그에 "red-font"라는 이름의 이름표(class)를 달아준 것이다.
CSS는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다.
위의 식에서 .red-font { color: red; }라고 적혀있는 것을 볼 수 있다. 이는 red-font라는 이름표(클래스)를 가진 녀석에게 color: red;를 적용하라는 뜻이다.
(이름 앞에 . 을 빼먹지 말자! red뒤에 ;를 빼먹지 말자!)
red-font라는 클래스는 <h1> 태그와 <div> 태그에 달려있다. 그리고 앞서 설명했듯 CSS는 단계적으로 적용이 되기 때문에 <div> 태그 안에 있는 <p>태그에도 적용이 되어 'ID'와 'PW'도 빨간색으로 적용이 되었다.
다양한 선택자들
CSS가 선택하는 선택자들을 살펴보자
1. 전체 선택자(HTML 페이지 내부의 모든 태그를 선택 : * 사용)
* {
margin: 0;
text-decoration: none;
}2. 태그 선택자 (여기선 p tag 선택)
p {
background: yellowgreen;
color: darkgreen;
}
3. 클래스 선택자(class1 선택)
.class1 {
background: yellowgreen;
color: darkgreen;
}4. 클래스 선택자(div태그안에 있는 class2만 선택)
div.class2 {
background: darkgreen;
color: yellowgreen;
}
5. 클래스 선택자(class3 중에 h1만 선택)
<head>
<style>
.class3 > h1 {
color: red;
}
</style>
</head>
<body>
<div class="class3">
<h1>이건 빨강이지</h1>
<h2>이건 검정이지</h2>
</div>
</body>
class는 중첩도 가능하다.(이름표를 여러개 가지는건 가능하지)
<p class="class1 class2">이렇게 적으면 클래스1,클래스2 둘 다 적용된다</p>
이 이외에도 여러가지 선택자들이 있으니, 필요한 경우 구글에서 찾아서 적용하면 된다.
<참조 : 자주쓰는 css 속성들>
배경관련 background-color background-image background-size
사이즈 width height
폰트 font-size font-weight font-famliy color
간격 margin padding
공감 부탁 드려요 :)
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| MARGIN 과 PADDING | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
|---|---|
| HTML 주석 달기, 파이참 코드정렬 단축키 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| meta viewport 태그 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| HTML 로그인 박스 만들기 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| HTML 구조(tag, 태그) | 아무것도 모르고 시작하는 코딩 (0) | 2020.07.31 |