선택자란?
HTML의 특정 요소를 선택하여 스타일주기 위해 사용하는 css의 문법스타일
선택자의 종류
- 전체 선택자(Universal Selector)
에스터리스크라고 하며, 모든 HTML문서에 있는 요소들에게 접근하여 공통적인 스타일을 줄 수 있는 선택자
* {
margin: 0 auto;
}
- 타입 선택자(Type Selector)
HTML문서에 있는 태그이름이 선택된 모든 요소들에게 스타일을 줄 수 있는 선택자
p {
color: blue;
}
h1 {color: red;}
- 아이디 선택자
- id는 웹페이지 내에서 유일하게 존재해야 되며, 여러개의 요소에게 적용 될 수 없다.
- ' # '이라는 문자를 사용하여 HTML문서내에 동일한 아이디이름을 가진 요소를 선택할 수 있다.
<head>
<meta charset="utf-8">
<title>id</title>
<style>
#blue { color : blue;}
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p id="blue">이 문단은 blue id를 부여하였습니다.</p>
</body>
아이디 속성을 이용하면 아래처럼 <a>태그의 href속성과 연결하여 다른 페이지로 이동하는 링크가 아닌 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있다.
<a href = "#아이디 이름"> 아이디를 나타내기 때문에 css 선택자와 유사하게 ' # '을 붙여주도록하자
이런 기능을 이용하기 위해 보통 section을 구성할 때 고유한 아이디를 부여한다.
- 클래스 선택자
id와는 다르게 클래스는 동일한 이름을 가지는 요소들이 존재할 수 있으며, 선택이 될 경우 요소들에게 공통적으로 스타일이 적용된다.
<head>
<meta charset="utf-8">
<title>id</title>
<style type ="text/css">
.blue { color : blue; }
.bic { font-size : 20px; }
.upper { text-transform : uppercase; } /*text-transform : 컨텐츠를 대문자로 만듭니다.*/
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p class="blue">이 문단은 blue class를 부여하였습니다.</p>
<p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
<p class="blue upper">이 문단은 blue, upper class를 부여하였습니다. </p>
</body>id와 class 이름을 짓을 때 유의사항
- 알파벳 또는 ' _ '(언더바) , ' - '(하이픈)으로 시작해야 된다.
숫자로 시작하는 경우 요소를 가져오지 못하는 경우가 발생하기 때문이다.
- 대소문자를 구분한다. 하지만 헷갈릴 수도 있기에 작명 할 경우에 소문자 통일해서 작명하는 것을 권장한다.
'Programming > Style' 카테고리의 다른 글
| CSS line-height (0) | 2022.09.17 |
|---|---|
| CSS Display속성 (0) | 2022.09.15 |
| RESET CSS (0) | 2022.09.08 |
| CSS란? (0) | 2022.09.08 |
| CSS 스타일 적용순서 (0) | 2022.09.08 |
선택자란?
HTML의 특정 요소를 선택하여 스타일주기 위해 사용하는 css의 문법스타일
선택자의 종류
- 전체 선택자(Universal Selector)
에스터리스크라고 하며, 모든 HTML문서에 있는 요소들에게 접근하여 공통적인 스타일을 줄 수 있는 선택자
* {
margin: 0 auto;
}
- 타입 선택자(Type Selector)
HTML문서에 있는 태그이름이 선택된 모든 요소들에게 스타일을 줄 수 있는 선택자
p {
color: blue;
}
h1 {color: red;}
- 아이디 선택자
- id는 웹페이지 내에서 유일하게 존재해야 되며, 여러개의 요소에게 적용 될 수 없다.
- ' # '이라는 문자를 사용하여 HTML문서내에 동일한 아이디이름을 가진 요소를 선택할 수 있다.
<head>
<meta charset="utf-8">
<title>id</title>
<style>
#blue { color : blue;}
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p id="blue">이 문단은 blue id를 부여하였습니다.</p>
</body>
아이디 속성을 이용하면 아래처럼 <a>태그의 href속성과 연결하여 다른 페이지로 이동하는 링크가 아닌 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있다.
<a href = "#아이디 이름"> 아이디를 나타내기 때문에 css 선택자와 유사하게 ' # '을 붙여주도록하자
이런 기능을 이용하기 위해 보통 section을 구성할 때 고유한 아이디를 부여한다.
- 클래스 선택자
id와는 다르게 클래스는 동일한 이름을 가지는 요소들이 존재할 수 있으며, 선택이 될 경우 요소들에게 공통적으로 스타일이 적용된다.
<head>
<meta charset="utf-8">
<title>id</title>
<style type ="text/css">
.blue { color : blue; }
.bic { font-size : 20px; }
.upper { text-transform : uppercase; } /*text-transform : 컨텐츠를 대문자로 만듭니다.*/
</style>
</head>
<body>
<p>이 문단은 평범한 p태그를 사용하였습니다.</p>
<p class="blue">이 문단은 blue class를 부여하였습니다.</p>
<p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
<p class="blue upper">이 문단은 blue, upper class를 부여하였습니다. </p>
</body>id와 class 이름을 짓을 때 유의사항
- 알파벳 또는 ' _ '(언더바) , ' - '(하이픈)으로 시작해야 된다.
숫자로 시작하는 경우 요소를 가져오지 못하는 경우가 발생하기 때문이다.
- 대소문자를 구분한다. 하지만 헷갈릴 수도 있기에 작명 할 경우에 소문자 통일해서 작명하는 것을 권장한다.
'Programming > Style' 카테고리의 다른 글
| CSS line-height (0) | 2022.09.17 |
|---|---|
| CSS Display속성 (0) | 2022.09.15 |
| RESET CSS (0) | 2022.09.08 |
| CSS란? (0) | 2022.09.08 |
| CSS 스타일 적용순서 (0) | 2022.09.08 |