-
CSS의 기본 형식 + 선택자(태그, 아이디, 클래스)프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:31
스타일 시트의 기본 형식
- 선택자 (selector)
- 스타일을 적용할 대상
- HTML 문서의 태그, 아이디, 클래스, 속성
- {속성명:값;}
- 변경하고자 하는 속성
- 클꼴, 크기 색상 등
- 사용 예
- 모든 <h1> 태그에 스타일 적용
- h1 { color:red; }
선택자 유형
(1) 태그 선택자
(2) 아이디 선택자
(3) 클래스 선택자
(4) 속성 선택자
(5) 상태 선택자
(1) 태그 선택자
- 태그명 사용
- 요소 (element) 선택자라고도 함
- HTML 문서에 있는 같은 모든 태그에 동일하게 적용
- 태그명 { 속성명:값; }
태그 선택자 예제 : tagSelector.html
h3 { background-color:#000; color:#fff; width:50%; /* 가로 길이 */ margin-left:20px; /* 왼쪽 여백 (들여쓰기) */ } li { color:red; }
(2) 아이디 선택자
- # 사용
- 문서에서 특정 부분에만 필요한 스타일 적용할 때 사용
- 필요한 부분에 유일한 아이디를 지정하고 CSS 적용
- 식별 선택자라고도 함
- 사용법
- #idName {속성명:값;}
- 태그에 반드시 id로 지정 되어 있어야 함
- <태그명 id=”idName”> </태그명>
아이디 선택자 예제 : idSelector.html
<style type="text/css"> #cookBox { border:3px solid #000; /* 테두리 : 굵기 유형 색상 */ width:500px; padding:10px; /* 안쪽 여백 */ margin-left:70px; /* 바깥쪽 여백 */ font-size:12px; color:rgb(0, 0, 255); background-color:gold; } #sourceBox { background-color:#ffc; line-height:150%; /* 행 높이 */ list-style:none; /* 목록(리스트) 글머리 기호 안 보이게 */ width:200px; color:red; padding:5px; border:1px solid #000; margin-left:30px; } </style>
클래스 선택자
- . 사용 (도트 선택자)
- 문서에서 특정 그룹에 필요한 스타일 적용할 때 사용
- .className { 속성명:값;}
- HTML 태그의 class 속성이 지정되어 있어야 함
- <태그명 class=”className”></태그명>
- <태그명 class=”className”></태그명>
클래스 선택자 예제 : classSelector.html
<style type="text/css"> .cookTitle1 { width: 30%; background-color:#f03; color:#fff; padding:5px; border:1px solid #000; margin-left:20px; } .cookTitle2 { width: 30%; background-color:#ffcc33; padding:5px; border:1px solid #f00; margin-left:20px; } .redDotLine { color:#f00; font-weight:bold; border-bottom:1px dashed #f00; } </style>
속성 선택자
- HTML 태그의 속성 값에 따라 선택자로 정의
- <a title=”산업기사”>산업기사</a>
- 예: <a>의 title 속성 값으로 선택해서 스타일 지정
- 문법
- 태그명[속성명=”값”]
- 태그명[속성명^=”값”]
- 태그명[속성명$=”값”]
- 태그명[속성명*=”값”]
속성 선택자 예제 : attrSelector.html에 추가
<style type="text/css"> /* 속성 선택자 : <a> 태그의 href 속성에 스타일 적용 */ a[href="http://www.naver.com"] { color:green; } /* 속성 선택자 : <a> 태그의 href 속성 값 중에서 '#'으로 시작하는 속성값에 스타일 적용 */ a[href^="#"] { background-color:gold; } </style>
상태 선택자
- 태그의 상태로 선택해서 스타일 적용
- 상태 : 체크된 상태, 포커스 받은 상태, 사용 가능 또는 불가능한 상태
- 선택자:checked - 체크된 input 태그 선택
- 선택자:focus - 포커스를 받은 input 태그 선택
- 선택자:enabled - 사용 가능한 input 태그 선택
- 선택자:disabled - 사용 불가능한 input 태그 선택
상태 선택자 예제 : stateSelector.html
<style type="text/css"> /* input 태그가 사용 가능한 경우에 입력란 색상 지정 */ input:enabled { background-color:white;} /* input 태그가 사용 불가능한 경우에 입력란 색상 지정 */ input:disabled { background-color:skyblue; } /* input 태그에 초점이 맞춰진 경우 입력란 색상 지정 */ input:focus { background-color:orange; } </style>
'프론트엔드 프로그래밍 > CSS' 카테고리의 다른 글
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스) (0) 2022.01.26 CSS 연습문제 (0) 2022.01.26 자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자) (0) 2022.01.26 CSS 속성 선택자 (0) 2022.01.26 CSS (스타일 시트)란? (0) 2022.01.26