해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다.
기본 CSS선택자
CSS는 CSS규칙을 토대로 웹 페이지상의 엘리먼트 스타일을 정의하는 식으로 작동한다.
CSS규칙은 세가지 형태의 선택자를 사용해 적용한다.
- HTML 선택자: 특정 태그를 참조하는데 사용
- 클래스 선택자 : 엘리먼트에 개별 적용됨
- ID 선택자 : 페이지내 단일 엘리먼트에 적용됨.
| 형식 | 선택자명 | 스타일이 적용되는 엘리먼트 |
| a | HTML | 지정된 모든 HTML |
| .myClass | 클래스 | 클래스가 적용된 모든 HTML 태그 |
| a.myClass | 의존 클래스 | 클래스가 적용된 특정 HTML 태그 |
| #myID | ID | ID가 적용된 모든 HTML 태그 |
| a#myID | 의존 ID | ID가 적용된 특정 HTML 태그 |
| * | 공통 | 모든 HTML 태그 |
인라인 스타일 - HTML 태그 내의 스타일 추가
개별 태그내에서 스타일을 설정하는 방식.
헤드나 외부 스타일 시트에 스타일을 설정한 다음 개별 태그에 한해 스타일을 재정의할 때 유용하게 활용할 수 있다.
하지만 인라인 스타일은 스타일을 적용할 때 우선순위가 가장 높으므로 사실상 재정의가 불가능 하기에 항상 최후의 수단으로만 사용해야 한다.
- 왜 최종 웹 사이트에서 인라인 스타일을 사용하지 말아야하나?
: 위의 내용과 동일. 인라인 스타일은 가장 마지막에 적용되는 스타일로 임베디드한 스타일 시트나 외부 스타일 시트에서 재정의 할 수 없기 때문이다.
페이지 내 스타일 - 웹 페이지에서의 스타일 추가
단일 엘리먼트(인라인)나 전체 웹사이트(외부 스타일)가 아니라 단일 웹 페이지에 적용할 스타일을 추가하려면 <style>태그를 사용해 웹페이지에 스타일 규칙을 직접 기입하다.
이 방식으로 스타일 추가하더라도 HTML태그에 직접 추가할 때와 보이는 내용은 동일하지만 공통된 위치 (주로 문서의 <head>부분)에 스타일을 두면 문서의 전체 스타일을 변경 할 때도 쉽게 작업할 수 있다.
외부 스타일 - 전체 웹 사이트 차원의 스타일 추가
CSS규칙을 텍스트 파일로 설정 후 <link>태그나 @import규칙을 사용해 HTML문서에서 이 파일을 링크하거나 불러오는 방식
- 스타일 시트 링크
: 외부 스타일 시트 파일을 <link>태그를 사용해 모든 HTML파일에 적용할 수 있다. CSS파일을 링크하면 문서 헤드에 스타일을 직접 임베드할 때처럼 문서에 스타일이 적용된다.
하지만 스타일이 외부파일에 존재하므로 여러 웹 페이지에서 코드를 재사용하고 한 파일에서 스타일을 수정해 여러 페이지에 영향을 줄 수 있다.
<link rel="stylesheet" href="filenams.css" type="text/css" media="all">
스타일 시트를 더 많이 링크할수록 서버에서 웹페이지를 호출하는 부담이 늘어나 페이지 로딩이 느려진다. 필요한 만큼만 링크하되 가능하면 파일을 병합해 최소한으로 유지하는게 좋다
- 스타일 시트 불러오기
: 스타일 시트를 불러올 때의 장점은 HTML문서 파일 내에서 스타일을 불러올 수 있을 뿐 아니라 외부 CSS파일 자체에서도 다른 스타일 시트을 불러올 수 있다는 점이다.
@import url(filename.css)
HTML 태그 (재)정의
새로운 CSS선언을 HTML 선택자에 추가하면 해당 태그를 사용한 모든 엘리먼트를 원하는대로 바꿀 수 있다.
p{ font-size : 1em;}
재사용 가능한 클래스의 정의
특정 태그에 자동으로 적용되는 HTML선택자와는 달리 클래스 선택자는 고유한 이름을 사용해 HTML태그나 기타 스타일을 사용할 태그에서 style 어트리뷰트에 지정한 클래스명을 사용해 스타일을 적용한다.
클래스를 활용하면 특정 HTML태그에만 스타일을 적용하는 의존적인 클래스를 만들 수도 있다.
.authorName { font-size : 1em;}
p.authorName { font-size : 1em;}
고유 ID 정의
ID는 HTML에서 페이지 레이아웃 구조를 구성하고 코드상의 고유 엘리먼트를 식별해 특정 엘리먼트를 별도 처리하는데 사용한다.
또한 CSS나 자바스크립트에서의 위치지정에도 사용된다.
#content {position : relative;}
div#content {position : relative;}
공통 스타일 정의
공통 선택자는 특정 자리에 오는 모든 HTML 타입 선택자를 나타내는 데 사용하는 와일드카드 문자를 말한다.
IE6에서는 동작하지 않는다. 공통선택자를 사용하면 CSS리셋을 쉽게 만들 수 있다.
*{ margin:0; }
그룹 지정 - 동일 스타일을 사용하는 엘리먼트 정의
둘 이상의 선택자가 동일 선언을 사용하게 하려면 콤마로 구분해 선택자를 그룹으로 지정할 수 있다.
필요하다면 선언 블록에 공통 어트리뷰트를 정의한 다음 개별 선택자에 이를 보완할 추가 규칙을 지정할 수도 있다.
h1,h2,.copy,#head { font-size : 1em; }
CSS에 주석 추가
<style>태그 안이나 외부 CSS 파일에 입력하면 된다.
/* 주석내용 */
'CSS' 카테고리의 다른 글
| 06. 폰트 속성 (0) | 2021.06.09 |
|---|---|
| 05. 선택적 스타일 적용 (2) (0) | 2021.06.07 |
| 04. 선택적 스타일 적용 (1) (0) | 2021.06.07 |
| 02. HTML5 기초 (0) | 2021.05.31 |
| 01. CSS 이해 (0) | 2021.05.28 |
