CSS : Selector(선택자) 1
2023. 3. 13. 14:20ㆍHTML, CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS - Selector</title>
<!-- HTML 요소의 스타일을 지정하기 위해 스타일 시트를 작성 -->
<!-- → 외부파일(.css)을 불러오는 방식 -->
<!-- → HTML 문서 내에서 작성하는 방식 -->
<!-- HTML 문서 내에서 작성할 때는 -->
<!-- head 태그 내에서 style 태그로 작성 -->
<style>
/* 요소의 스타일을 지정하기 위한 영역 */
/* h2 요소와 h3 요소의 글자 색상을 보라색으로 설정 */
h2, h3 {
/* h2 요소에 설정할 스타일을 작성하기 위한 블록(영역) */
color: blueviolet;
}
</style>
<style>
/* 선택자(Selector) */
/* - 요소를 선택하기 위한 문자(기호) */
/* - 스타일을 적용할 요소를 명확히 지정하기 위해 사용되는 방식 */
/* - 선택자의 종류가 많으며, 기준 또는 상황에 따라 맞춰서 사용 */
/* - 하나의 선택자는 하나의 요소만 선택될 수 있고 */
/* 다수의 요소가 선택될 수 있다. */
/* - 하나의 CSS 블록에는 다수의 선택자가 작성될 수 있다. */
/* → 쉼표(,)를 구분으로 나열 */
/* - 선택자는 CSS 에서 뿐만 아니라 javaScript, jQuery 에서도 사용 */
/* + VS Code 의 마크업을 자동 완성으로 만들 때도 사용 */
/* CSS 의 우선 순위 */
/* - 여러 CSS 블록을 통해 동일한 요소가 선택이 될 수 있으며 */
/* 이때 동일한 스타일 속성이 지정된 경우 */
/* 어느 속성을 적용할 것인지 결정하는 규칙 */
/* 1. 중요도(Important) */
/* - 사용자 스타일 시트의 중요 스타일 */
/* - 개발자 스타일 시트의 중요 스타일 */
/* 중요한 스타일 속성의 값 뒤에 '!important' 작성 */
/* property : value !important; */
/* - 개발자 스타일 시트의 일반 스타일 */
/* - 브라우저의 기본 스타일 시트 */
/* 2. 명시도(Spectificity*/
/* - 인라인 스타일 */
/* - id 선택자 */
/* - class 선택자 */
/* - 태그 선택자 */
/* 3. 순서(Source Order) */
/* - 나중에 작성된 스타일이 적용 */
/* 전체 선택자 */
/* - 모든 요소를 선택하는 선택자 */
/* - 화면에 보여지지 않는 요소들도 선택될 수 있다. */
/* → head, meta, link ... */
* {
/* 밑 줄 */
text-decoration: underline ;
}
/* 태그 선택자 */
/* - HTML 태그의 이름을 지정하여 요소를 선택하는 선택자 */
h1 {
color: red;
}
/* id 선택자 */
/* - 요소의 id 속성을 지정하여 요소를 선택하는 선택자 */
/* - id 속성 */
/* : HTML 문서 내에서 요소를 식별하기 위한 속성 */
/* : 문서 내에서 고유한 값을 가져야하며 */
/* 한 번 정해지면 수정하면 안된다. */
/* : 하위 요소에 여러 개를 작성하기 보다는 */
/* 상위 요소에 작성하는 것이 일반적이다. */
/* - 형태 */
/* #id 속성 */
/* id 속성 값이 'selector1'인 요소를 선택 */
#selector1 {
/* 기울기 */
font-style: italic;
}
/* class 선택자 */
/* - 요소의 class 속성의 값을 지정하여 요소를 선택하는 선택자 */
/* - class 속성 */
/* : 다수의 요소를 하나의 그룹으로 묶거나 */
/* 요소의 상태를 나타내기 위해 사용되는 속성 */
/* : 언제든 추가/수정/삭제가 가능 */
/* : 한 요소에 다수의 속성 값을 지정할 수 있다. */
/* 다수의 값을 지정할 때는 공백을 구분으로 나열 */
/* - 형태 */
/* .class속성 */
.new-item {
font-style: italic;
}
.hot-item {
color: red;
}
/*------------------------------------------------------- */
/* 두개 이상의 선택자에 모두 포함하는 요소를 선택하려는 경우 */
/* 선택자들을 모두 이어서 작성(공백 없이 작성) */
/* p 태그 이면서 class 속성의 값이 'new-item'인 요소를 선택 */
p.new-item {
background-color: yellowgreen;
}
.new-item.hot-item {
background-color: #ffcccc;
}
</style>
</head>
<body>
<h2>Hello World!</h2>
<h2>Hello CSS!</h2>
<h3>Cascading Style Sheet</h3>
<hr>
<h1>Header Tag</h1>
<h2 id="Selector1">id Selector!</h2>
<ul>
<li class="new-item hot-item">Item A</li>
<li class="new-item">Item B</li>
<li>Item C</li>
<li class="hot-item">Item D</li>
<li>Item E</li>
</ul>
<p class="new-item">What is Lorem lpsum?</p>
<!-- VS 자동완성 기능 -->
<!-- - emmet 기능 -->
<!-- p -->
<p></p>
<!-- p#paragraph -->
<p id="paragraph"></p>
<!-- p.wrap -->
<p class="wrap"></p>
<!-- p#comment.wrap -->
<p id="comment" class="wrap"></p>
<!-- p.wrap1.wrap2 -->
<p class="wrap1 wrap2"></p>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| CSS : Selector(선택자) 3 (1) | 2023.03.13 |
|---|---|
| CSS : Selector(선택자) 2 (0) | 2023.03.13 |
| CSS : CSS (0) | 2023.03.13 |
| HTML : Input(입력) (0) | 2023.03.13 |
| HTML : Image Tag (0) | 2023.03.13 |