본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
ID선택자
이전 시간에 li태그만 따로 선택하여 변경을 주는 태그 선택자에 대해 알아봤습니다.
<style>
li {
color: red;
text-decoration:underline; // 밑줄
}
</style>다음 코드는 코드 내에 모든 li태그에 영향을 줍니다.
아이디 선택자는 아이디를 지정하여 해당 아이디를 갖고 있는 영역에만 영향을 줍니다.
<style>
#selector{
font-size: 50px;
}
</style>
<li id = "selector">CSS</li>다음 코드는 body에 ul태그내에 CSS를 출력하는 하나의 리스트에 id를 selector라 저정하였고,
head부분에 style에 id가 selector인 영역의 사이즈를 50px로 만들었다.
이때 아이디를 호출할때는 '#'을 앞에 붙여준다.
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
color: red;
text-decoration:underline; // 밑줄
}
#selector{
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id = "selector">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>실행결과
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 상속 (0) | 2022.07.28 |
|---|---|
| CSS 기본부터 활용까지 - 가상클래스 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 부모 자식 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 선택자와 선언 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 준비단계 (0) | 2022.07.25 |