https://hbsowo58.tistory.com/470?category=894677
HTML Basic Analysis
HTML은 문서이며, 기본 양식이 존재합니다. Hello Wolrd 메모장에 최소한의 코딩만으로도 브라우저에 원하는 내용을 출력 가능합니다. 최소한의 문서 구조를 위해 IDE에 EMMET 명령어를 사용하겠습니
hbsowo58.tistory.com
상단의 글에서 이어서 작성합니다.
CSS는 HTML에 디자인을 추가하는 목적입니다.
어떤 "HTML" element(요소)에 디자인을 입힐지 선택해야 하기 때문에
먼저 학습해야 될 내용은 selector "선택자"입니다.
특정 elements를 선택하지 않은 경우에도 "전체 선택자" 를사용해야 합니다.
위와 같은 코드가 작성되어 있을 것이며,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
HELLO, WOLRD
</body>
</html>확인 안 하신 분은 이 코드를 사용해주세요
body안에, Hello, wolrd를 입력해주도록 하겠습니다.
다른 글을 참고하여 HTML 파일을 실행해보면, 아래처럼 보입니다.
스타일을 입히기 위해, style elements안에, *(전체 선택자)를 사용해, 글자의 색상을 바꿔보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
HELLO, WOLRD
</body>
</html>
title elements 아래, 선택자가 추가되었고, 표현법은 객체를 사용하는 것과 비슷합니다.
*{
color:red;
}
<!-- 여기서는 color가 property key가 되고, red가 property 값이 됩니다 -->문제는 뭐가 있을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
HELLO, WOLRD
I AM HEO BEOMSUNG
</body>
</html>HELLO WOLRD 아래 새로운 글을 추가했더니
우리 페이지 내 모든 콘텐츠들은 빨간색이 될 것입니다.
구분하기 위해 콘텐츠들의 Element를 추가해주겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1>HELLO, WOLRD</h1>
<p>I AM HEO BEOMSUNG</p>
</body>
</html>
구조는 변경되었으나, 색상은 동일합니다. Element라는 구분점이 생겼으니 유형(element) 선택자를 사용하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>HELLO, WOLRD</h1>
<p>I AM HEO BEOMSUNG</p>
</body>
</html>
인사는 강조하고, 자기소개는 가만히 두었습니다.
그럼에도 유형 선택자에도 단점이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>HELLO, WOLRD</h1>
<p>I AM HEO BEOMSUNG</p>
<h1>I LOVE SOCCER</h1>
</body>
</html>
유형(element)이 늘어나면 모든 elements에게도 적용이 되겠죠
방지하기 위해 html attribute를 사용해 element에 속성을 부여하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#red{
color:red;
}
</style>
</head>
<body>
<h1 id="red">HELLO, WOLRD</h1>
<p>I AM HEO BEOMSUNG</p>
<h1>I LOVE SOCCER</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<h1>HELLO, WOLRD</h1>
<p class="red">I AM HEO BEOMSUNG</p>
<h1 class="red">I LOVE SOCCER</h1>
</body>
</html>
위의 차이는 id선택자와 class선택자의 차이입니다.
id는 identifier(식별자)라는 뜻으로, 페이지 내에 식별되는 "한 가지" 일 때 사용을 합니다.
class는 중복될 때 사용합니다.
고유하다면 id를, 여러 개라면 class를 쓰는 것인데
우리 가족은 "저, 동생, 그리고 아빠"가 있고, "우리 가족"은 class의 개념이라
우리 가족에 해당하는 사람들은 빨간색이 된다, 하면 모두가 빨간색이 되는 것이고, (class)
저에게만 빨간색을 칠하는 경우는 id를 사용하여야 합니다
마지막으로, 특성 선택자도 있습니다.
종류가 다양해서 MDN 중 한 가지 예제만 사용해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[title] {
color: red;
}
</style>
</head>
<body>
<h1>HELLO, WOLRD</h1>
<p title="show title">I AM HEO BEOMSUNG</p>
<h1 class="red">I LOVE SOCCER</h1>
</body>
</html>p태그에 title이라는 attribute를 주었고, p의 title에 빨간색 css를 디자인하였습니다.
선택자를 이용하여, HTML의 구조를 변경하지 않는 선에서 가독성을 높일 수 있도록 선택자와 CSS속성들을 통해 글을
디자인할 수 있습니다.
나머지 내용은 MDN을 이용하여 검색하면서 찾아보면 될 것 같습니다
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
CSS 선택자 - CSS: Cascading Style Sheets | MDN
CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
developer.mozilla.org
'1.웹개발 > CSS' 카테고리의 다른 글
| [CSS] pointer-events 사용으로 인한 클릭 이슈 (0) | 2021.11.08 |
|---|---|
| [CSS] Float 정의 & Float 부작용 제거방법 (0) | 2020.10.07 |
| [CSS] BOX-MODEL (0) | 2020.10.07 |
