1. CSS 문서의 삽입
(1) 내부 스타일시트
<HEAD>
<STYLE></STYLE> <!-- 내부 스타일시트 -->
</HEAD>
(2) 외부 스타일시트
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="CSS/STYLE.CSS" /> <!-- 외부 스타일시트 -->
</HEAD>
CSS를 사용하기에 앞서서, CSS문서를 HTML이 읽도록 하기 위해서는 반드시 문서 내에서 호출이 이루어져야 한다.
여기서 방법이 두 가지가 있는데, 하나는 내부 문서에서 CSS를 직접 작성하는 방법(내부 스타일시트)과, 외부 문서로 만들어서 연결하는 방법(외부 스타일시트)이 있다. HTML5 웹표준에서 권장하고 있는 것은 외부스타일시트이다.
이 외에도 HTML 태그의 STYLE 속성으로 처리하는 요소가 있는데, 이 경우를 인라인(INLINE)이라고 한다. 일부 파일 속성을 제외하고 HTML5웹 표준에 위반하므로 사용을 지양해야 한다.
2. CSS 기본규칙 : 선택자와 선언부
(1) 선택자{ 선언부 } -
선택자{선언부}
선택자{속성:값 ; 속성:값 ;}
선택자1,선택자2{속성:값;}CSS는 선택자와 선언부로 구성되며, 선언부에는 속성과 값을 넣을 수 있다. 각 속성 뒤에는 콜론(:)이 위치하고 그 뒤에 속성값이 위치한다. 각 속성은 세미콜론(;)으로 구분되며 정확하게 작성하지 않는다면, 제대로 된 속성이 출력되지 않을 수 있다.
또한 선택자에는 자신 하나 뿐만 아니라, 그 외에 여러 선택자를 동시에 선택할 수 있다.
(2) 선택자의 대상 : ID&CLASS
<H1></H1> <!-- 요소 -->
<H2 ID="ID"></H1> <!-- ID -->
<H3 CLASS="CLASS1 "></H1> <!-- CLASS -->
<H3 CLASS="CLASS1 CLASS2 CLASS3"></H1> <!-- CLASS -->CSS의 선택자에는 HTML요소와 ID와 CLASS라고 하는 선언된 대상을 지칭할 수 있다. ID와 클래스의 선언은 HTML 시작태그 안에서 선언된다. ID는 단일 대상에만 사용할 수 있지만, CLASS는 한 대상에 여러 개를 사용할 수 있고, 여러 대상에 같은 클래스명을 사용할 수 있다.
H1{ }
#ID{ }
.CLASS{}CSS 선택자를 사용할 때는 ID앞에는 '#'을, CLASS 앞에는 '.'으로 구분한다. 주의할 점은, H1은 모든 H1요소를 지칭하고, .CLASS는 CLASS로 선언된 모든 요소를 지칭하며, ID는 자신으로 선언된 딱 한 대상만 지칭한다.
(3) 우선 순서 : #ID > .CLASS > H1
각각 대상의 범위가 다르므로, 클래스와 ID는 우선하는 순서도 다르다. 가장 적은 숫자인 #ID > 선언된 대상만 지칭하는 .CLASS > 모든 요소를 지칭하는 요소명 순서로 우선한다.
*자세한 내용은 다음 파트에서 기술한다.
3. CSS 기본규칙 : 주석
/* css의 주석처리 */CSS는 설명 혹은 기타 참조사항이 있을 경우, 주석을 사용할 수 있다. 주석은 소스에 포함되나 아무런 CSS 시트에 아무런 영향을 미치지 않는다.
'웹디자인 기능사 시험예제 > 1) 컨텐츠 구성하기' 카테고리의 다른 글
| CSS (3) FONT와 TEXT의 기본적인 속성 (0) | 2019.07.29 |
|---|---|
| CSS (2) 선택자와 우선순위 (0) | 2019.07.29 |
| HTML 텍스트 강조 요소 (0) | 2019.07.29 |
| HTML 기초 태그 (3) 이미지와 멀티미디어 (0) | 2019.07.29 |
| HTML 기초 태그 (2) 목록 (0) | 2019.07.29 |
