반응형
CSS3 - CSS 삽입
인라인 스타일, 내부 스타일, 외부 스타일, 다중 스타일 (4)
오늘은 CSS3의 네번째 내용으로 CSS 삽입에
대해서 가볍게 알아 보도록 하겠습니다.
CSS도 HTML처럼 기초부터 알아보기 전에
압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.
(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)
(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)
먼저 CSS 삽입이란?
먼저 css 삽입이란 말그대로 스타일 시트(css)를 문서에 삽입 하는 내용인데
이러한 css 스타일 시트 삽입하는 방법은 아래와 같이 구분이 됩니다.
- 스타일 시트 삽입 방법 -
1. 인라인 스타일 시트
2. 내부 스타일 시트
3. 외부 스타일 시트
4. 다중 스타일 시트
우선 위 내용의 스타일 시트 삽입 방법을
순서대로 알아 보겠습니다.
1. 인라인 스타일 시트
먼저 인라인 스타일 시트 입니다.
인라인 스타일 시트란 용어 그대로 각각의 태그마다 스타일을 적용하는 방법인데
사용하는 방법은 앞서 배운 html에서 종종 다루었던 내용이지만 다시 설명 하도록 하겠습니다.
<인라인 스타일 사용법>
위는 인라인 스타일을 사용한 방법 이며 태그에 스타일을 적용하기
위해선 위와 같이 태그에 "style" 이라는 속성과 필요한 값을 적어주면 됩니다. ^^
2. 내부 스타일 시트
두번째 내부 스타일 시트 입니다.
내부 스타일 시트란 말그대로 태그가 아닌 html 문서 내에 css를 적용하는 방법인데
내부 스타일 까지의 내용은 앞서 설명을 잠깐 하긴 했지만 다시 설명 하도록 하겠습니다. ^^
<내부 스타일 시트 사용법>
위는 html 문서 내에 css를 적용한 방법인데 사용법은 "head 태그" 내에
"style 태그"를 삽입하고 앞서 배운 선택자로 태그를 선택해서 스타일일 적용 하시면 됩니다.
여기까지는 앞서 배운 포스팅에 조금씩 설명이 되어 있어던 내용이고
이다음 외부 파일로 저장된 스타일 시트를 가져오는 외부 스타일 시트에
대해서 알아 보도록 하겠습니다.
3. 외부 스타일 시트
세번째 외부 스타일 시트 입니다.
외부 스타일 시트는 다시 말하지만 말 그대로 스타일 시트를
외부 파일로 저장하여 그 파일을 html 페이지로 불러오는 방법으로
많은 페이지에 동일한 스타일을 적용하려 할 때 쓰는 방법 입니다.
여기서 외부 스타일 파일 만드는 방법은 아래 링크에
포스팅을 해두었으니 참고 바랍니다. ^^
http://yangbari.tistory.com/4
압타나 스튜디오 3 (Aptana Studio 3) - 파일생성 #3
먼저 외부 스타일 시트를 가져오는 방법은 html 페이지에
"link 태그"를 이용해서 "head 태그" 부분에 위치 시킨 후
외부 스타일 파일을 연결 해야 합니다.
<link 태그 사용법>
1. link 태그 : 외부 파일과 연결시 사용 되는 태그
2. type속성 : 외부 파일의 종류가 어떠한 것인지 정하는 것
예 : css (스타일시트) = text/css
예 : js (자바스크립트,제이쿼리) = text/javascript
3. rel 속성 : html 파일과 외부 파일 간의 관계를 나타냅니다.
예 : css (스타일시트) = stylesheet
4. href 속성 : 외부 파일의 위치 (상대경로, 절대경로)를 입력 합니다.
4. 다중 스타일 시트
네번째 다중 스타일 시트 입니다.
다중 스타일 시트란 하나의 태그에 대해여 인라인, 내부, 외부 스타일을 서로 다르게
지정하고 있을때 어떤 스타일이 사용이 되는가에 대한 내용입니다. ^^
위에 말이 잘 이해가 안되시는 분을 위해 좀더 자세히 이야기 한다면
예를들어 동일한 태그인 <body> 대하여 외부 스티일에서 background:blue (배경색 파랑)로
지정을 하고 있다고 가정하예 똑같은 태그를 내부 스타일에서는 background:red
(배경색 적색)로 지정하였다면 최종적으로 어떠한 스타일이 먹히는가에 관한 내용 입니다.
일반적으로 스타일 시트는 아래와 같은 규칙에 의해
하나의 가상적인 스타일로 통합이 되는데 이 내용은 아래와 같습니다.
- 스타일 시트 적용 우선 순위 -
1. 인라인 스타일 시트
2. 헤드 섹션에 저장된 내부 스타일 시트
3. 외부 스타일 시트
4. 웹 브라우저 디폴트 값
정확히 위의 내용을 말하자면
우선 순위는 위에 보이는 것과 같이 인라인 스타일 시트가 가장 높으며
즉 이러한 말은 인라인 스타일은 헤드 섹션에 지정된 내부 스타일인 외부에서
지정된 스타일 보다도 우선적으로 적용이 된다는 말입니다. ^^
이상 CSS3 - CSS 삽입 - 인라인 스타일, 내부 스타일, 외부 스타일, 다중 스타일 (4)에
관련된 포스팅을 마치도록 하겠습니다.
반응형
'웹 공부 > 3. CSS3' 카테고리의 다른 글
| CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6) (0) | 2017.05.30 |
|---|---|
| CSS3 - CSS 스타일 - 색상 지정방법 (5) (0) | 2017.05.29 |
| CSS3 - CSS 선택자 - 클래스 선택자, 의사 선택자, 속성 선택자 (3) (0) | 2017.05.27 |
| CSS3 - CSS 선택자 - 타입 선택자, 전체 선택자, 아이디 선택자 (2) (0) | 2017.05.26 |
| CSS3 - CSS와 문법 및 위치 (1) (0) | 2017.05.25 |
댓글