[CCS강좌] CSS 셀렉터(선택자) 사용하는 법
태그명으로 선택자를 사용하는 방법에 대해서 알아보겠습니다.
이것은 매우 간단합니다 태그명을 적고 괄호를 열고 닫고 하면 됩니다. 다음과 같이요.
예를 들어 p태그를 선택한다고 하면..
p{CSS속성:값}
태그를 선택자로 사용한다는 것은 해당 태그로 감싸진 부분은 모두 적용이 된다는 것을 의미해요. 다음과 같이 p태그를 여러번 사용했을 경우 모든 태그에 같은 CSS속성이 적용됩니다.
p태그의 텍스트 칼라를 빨강으로 지정해 보도록 하겠습니다. 이부분에서 우리가 배울것은 동일 태그에 대한 스타일을 적용시키는 것입니다.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>태그명을 선택자로 사용</title>
<style>
p{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello usa</p>
<p>hello korea</p>
<p>hello japan</p>
<p>hello germany</p>
<p>hello france</p>
<h1>hello france</h1>
</body>
</html>
위의 소스를 에디터 또는 에버디벨 연습장(왼쪽 메뉴 상단)에서 복사 붙여넣기 혹은 직접 작성(추천)해보시면 결과를 p태그로 감싸진 텍스트의 칼라가 전부 빨강으로 되신것을 보실 수 있습니다.
text red
위의 이미지 처럼 p 태그로 선언한 텍스트의 색은 빨강으로 표현됩니다. 반면h1태그는 적용되지 않는걸 보실 수 있습니다.
태그에 클래스 속성을 지정하여 선택자 사용
위의 소스와 똑같은데 hello korea만 빨강으로 표현되게 해봅시다.
즉, 같은 태그라도 그 중에 특정 태그만 스타일을 적용시키는 방식인데요 그렇게 할려면 그 특정태그에 별도의 이름을 부여 해야 합니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0) | 2017.11.14 |
|---|---|
| CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용 (0) | 2017.11.14 |
| CSS3 / div 태그 속성값과 그 활용예제 (0) | 2017.09.25 |
| [CSS3] 기초 메뉴만들기 floaat를 기반으로 (0) | 2017.09.07 |
| [CSS3 ] 여백설정하기margin, padding 값넣기 (0) | 2017.09.06 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.