반응형
Css로 웹을 스타일링을 하기 위해서는, 어떠한 요소를 스타일링 할건지 지칭해야합니다.
그 어떠한 요소를 선택하는 방법을 알아봅시다.
0. 먼저 태그에 이름(id)과 별명(class)을 지어봅시다.
- id: 한 .html 파일에 하나만 지정할 수 있음(like 이름)
- class: 여러태그에 여러개를 지을 수 있음(link 별명)
예를 들어, 저는 "사람"입니다. 그리고, 저의 이름은 "금복례" 입니다.하지만, 저의 친구들은 저를 "금붕어"라고 별명 지었습니다.
이를 Html/Css에서 같은 관점으로 보자면,
Html에 "p태그"가 여러개 있습니다. 첫번째 p태그의 id는 "unique-name"입니다. 세번째 p태그의 class는 "third-paragraph"입니다.
<!-- 태그에 id 속성으로 이름을 지어줍니다. -->
<p id="unique-name">
"unique-name" 이라는 이름을 가진 p태그
</p>
<p>
그냥 p태그
</p>
<!-- 태그에 class 속성으로 별명을 지어줍니다. -->
<p class="third-paragraph another">
"third-paragraph와 another" 이라는 별명을 가진 p태그
</p>
1. 태그를 선택해봅시다.
아래 예시 코드를 보고, 이렇게 해석해봅시다. "p태그의 색상(color)을 오렌지색으로 설정하라."
/* style.css */
/* p태그의 color를 red로 설정하라 */
p {
color: red;
}
2. class(별명)을 선택해봅시다.
아래 예시 코드를 보고, 이렇게 해석해봅시다. "custom-class라는 class(별명)을 가진 태그의 color를 red로 설정하라."
*별명 앞에 무조건 .(점)을 넣읍시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<!-- 태그에 class 속성으로 별명을 지어줍니다. -->
<p class="custom-class">"custom-class"이라는 별명을 가진 p태그</p>
<p>그냥 p태그</p>
</body>
</html>/* style.css */
/* custom-class라는 class(별명)을 가진 태그의 color을 red로 설정하라 */
.custom-class {
color: red;
}
3. id(이름)을 선택해봅시다.
*이름 앞에 무조건 #(샵)을 넣읍시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<!-- 태그에 id 속성으로 이름을 지어줍니다. -->
<p id="unique-name">"unique-name"이라는 이름을 가진 p태그</p>
<!-- 태그에 class 속성으로 별명을 지어줍니다. -->
<p class="custom-class">"custom-class"이라는 별명을 가진 p태그</p>
<p>그냥 p태그</p>
</body>
</html>/* style.css */
/* unique-name라는 이름을 가진 태그의 color를 red로 설정하라 */
#unique-name {
color: blue;
}
/* custom-name라는 별명을 가진 태그의 color를 red로 설정하라 */
.custom-class {
color: red;
}
아래 네가지를 알아두면 편합니다.
- tag를 선택해서 스타일링하는것은, 전역적으로 스타일링할 때 사용합니다(ex. 모든 p태그의 색상을 파란색으로)
- id를 선택해서 스타일링은 가급적 피합시다.
일단은 그냥 관례라 생각합니다. - 거의 대부분은 class로 스타일링을 합니다.
- 이름은 무조건 잘지어야 합니다.(ex. x asdf 같이 이름 대충지으면, 망해요)
웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/mm-guide/
로또 번호 생성기도 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea
반응형
'Coding > Css' 카테고리의 다른 글
| Css 단위 알아보기(px, %, vw, vh, etc) (58) | 2024.01.01 |
|---|---|
| 주요 Css 속성(Property) 알아보기 (68) | 2023.12.28 |
| Css 파일 만들기(with Visual Studio Code) (83) | 2023.12.26 |
| Css 란? (73) | 2023.12.26 |
