CSS 선택자 스타일 정리 (기본)
오늘은 스타일을 부여할 요소를 식별하는
아주아주 기본적인 방법을 정리해보려고 한당.
혼자 책보고 공부하면서 정리하는 내용~
1. 태그 선택자: 페이지 단위 스타일링
태그 선택자, 요소 선택자는 같은 페이지에 있는
동일한 html 태그에 같은 스타일을 적용할 수 있다.
예를 들어 h2 선택자를 입력하면
같은 페이지 내의 모든 h2 태그에
같은 스타일을 적용할 수 있다.
h2를 선택자로 갖는 CSS 스타일을 정의하면,
해당 페이지의 모든 h2가 표시되는 방식을 제어할 수 있다.
2. 클래스 선택자: 정밀 조준
클래스 선택자는 html 태그와는 상관없이,
스타일을 조정할 요소를 정밀하게 골라낼 수 있다.
만약 태그 안에 포함된 단어 몇 개에만 클래스 선택자를
적용하고 싶다면 <span> 태그의 도움을 받아야 한다.
참고로 클래스 선택자 이름 앞에는 .(마침표)가 붙는다.
1) 모든 클래스 선택자 이름은 마침표로 시작한다.
2) 클래스 선택자 이름은 알파벳, 숫자, 하이픈, 밑줄 기호만 사용
3) 마침표 다음에는 반드시 알파벳이 나와야 한다.
4) 클래스 이름은 대소문자를 구분한다.
예를 들어서 특정 요소를 강조하기 위해
.special 스타일을 정의했다고 치자.
이 스타일을 특정 단락에 적용한면 다음과 같이
<p> 태그의 class 속성을 사용한다.
<p class="special">
또한~ <span> 스타일을 사용하면 클래스 스타일을 단락이나
단어의 일부에만 적용할 수 있다.
참고로 클래스 스타일을 생성하고 나면 페이지 내의
거의 아무 태그에나 적용할 수 있다!
이렇게 내가 지정한 곳에만 효과가 적용된 것을
확인할 수 있당.
★참고 <div>와 <span>
1) div
div 태그는 페이지를 배너, 내비게이션 바, 사이드바,
꼬리말 등의 논리적인 구획으로 나눌 때 사용한다.
페이지의 일정 영역을 차지하는 요소를
감싸는데 사용할 수 있다.
이것들을 블록 수준 요소(block-level-element)라고 부르기도 한다.
예를 들어 이미지를 넣고 캡션을 붙였다고 치면
div 태그를 이용해서 이미지와 캡션을 한 번에 묶을 수 있다.
2) span
span 태그는 ID 스타일을 태그 내용의 일정 부분에만 적용할 수 있다.
<span> 태그를 사용하면 단어나 구절 각각에 독립적으로
서식을 부여할 수 있는데, inline 요소라고 부르기도 한다.
<span> 태그 사용하는 예는 위에 정리했으니 패쓰!
3. ID 선택자: 특정한 페이지 요소 지정
CSS의 ID 선택자는 배너나 내비게이션 바, 주요 콘텐츠 영역과 같은
페이지 내의 특정 영역을 식별하는 데 사용된다.
ID 선택자는 자바스크립트를 사용할 때,
그리고 아주 긴 웹 페이지를 만들 때 유용하다.
그 외의 경우엔 클래스 대신
ID 선택자를 사용해야만 하는 이유는 찾기 어렵다.
ID 스타일을 정의할 때는 해시 기호 '#'를 사용한다.
4. 여러 태그 한 번에 스타일 주기
1) 그룹 선택자 생성
h1, h2, h3, h4, h5 { color: #F1CD33; }
그리고 클래스가 지정된 모든 태그,
ID를 갖는 모든 태그도 같은 색상으로
표시되도록 할 수 있다.
h1, p, .copyright, #banner { color: #F1CD33; }
2) 일괄 선택자 '*'
일괄 선택자는 * 기호로 표시하며
'모든 태그'라는 의미다.
즉 페이지의 모든 태그에 동일한
CSS 속성이 적용되도록 만들 수 있다.
* { font-weight: bold; }
만약 .banner* 같은 선택자는
'banner class를 적용한 페이지 요소 안의 모든 태그'라는 뜻이다.
5. 태그 안 태그에 스타일 지정하기
1) 하위 선택자 만들기
예를 들어서 <h1>표제어가 있고
그 가운데 단어를 <strong>태그로 강조할 때
<strong>의 색상만 다르게 하고 싶다면?
h1 strong { color: red; }
이렇게 하면 <h1> 태그 안에 오는
<strong> 태그만 빨간색으로 표시된다.
또한, 하위 선택자는 클래스를 적용한
선택자에게도 적용할 수 있다.
.intro a { color: yellow; }
"이 스타일을 .intro 클래스가 적용된 태그의
안쪽에 놓인 모든 <a> 태그에 적용해주세요"
이런 뜻!
2) 모듈 만들기
이렇게 하면 뉴스란에 오는 <h2> 태그는 빨간색,
<p>는 파란색으로 표시된다.
이런식으로도 활용 가능
일단 여기까지 정리!!!!!