그냥 그래
CSS 기초부터 활용하기 2편 (스타일 시트 편) 본문
안녕하세요 도롱군입니다.
이번 포스팅은 전 CSS 기초부터 활용까지 1편을 이어서 진행하도록 하겠습니다.
지난 포스팅에서 CSS 스타일 시트를 어떻게 만드는지 배웠는데, 이번엔 이렇게 만든 css 파일을 어떻게
사용할 수 있는지에 대해, 또한 내부 스타일을 어떻게 줘야하는지에 대해 알아보도록 하겠습니다.
CSS를 사용하는 3가지 방법
CSS를 사용할 수 있는 방법은 3 가지가 있습니다.
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
이렇게 3가지의 방법을 이용하여 HTML 문서에 스타일을 적용 시킬 수 있습니다.
심화
1. 외부 스타일 시트
외부 스타일 시트는 css 파일만 수정하여 해당 css 파일을 사용한 모든 HTML 문서의 스타일을 변경 할 수 있습니다.
<link> 태그를 이용하여 외부 스타일 시트를 불러올 수 있으며 <head> 세션 안에 들어가야 합니다.
또한 스타일 시트는 중요한 것이 html 확장자가 아닌 css 확장자를 사용하기에 문서의 끝은 .css로 끝이 나야 합니다.
위의 사진을 보면 custom.css를 <link> 태그를 이용하여 불러온 것을 볼 수 있습니다.
그렇다면 같은 디렉토리 안에서의 custom.css라는 스타일 시트 파일이 있다는 것을 알 수 있죠.
custom.css파일을 들여다 보겠습니다.
위와 같은 형식으로 되어 있고 이것을 해석하자면,
body 태그 즉 배경색상은 black을 기본 값으로 하며, p 태그에 들어가는 문자열의 색상은 모두 흰색으로 지정한다는 의미입니다.
2. 내부 스타일 시트
외부 스타일 시트를 사용하지 않는 경우, HTML 내부에서 스타일 지정하여 적용할 수 있도록 해주는 것이
내부 스타일 시트입니다. 외부 스타일과의 차이점과 같은점은 <link>를 이용하지 않는 것과 <head>세션에 들어가는 것은 같습니다.
<link> 태그 대신 내부 스타일 시트에는 <head>세션 내의 <style>태그를 이용하여 css 코드를 기입할 수 있습니다.
물론 똑같이 css와 같이 코딩을 하시면 됩니다.
3. 인라인 스타일
인라인 스타일은 HTML 문서 내 태그 안에 기입할 수 있는 스타일 서식을 지칭합니다.
예를 들면 아래 사진과 같이 <p style="color: white;"> 등 그대로 css 서식을 사용할 수 있습니다.
하나 혹은 하나 이상의 단락을 직접적으로 수정하고 싶을 때 주로 사용됩니다.
4. Cascading 순서 (중요합니다)
하나의 HTML 문서안의 다중으로 스타일 시트가 들어 갈 경우 어떻게 표시가 되나요?
다중으로 스타일 시트가 선택자에 의해서 정의가 되어있다면 마지막으로 읽히는 스타일 시트 속성 값이 적용 되어 출력됩니다.
아래는 순서도입니다. ( 1번 부터가 가장 높은 우선 순위입니다. )
- 인라인 스타일 (HTML 요소에 사용되는 style 서식)
- 외부,내부 스타일 시트 (<head>세션에 사용되는 스타일 시트)
'Web > CSS3' 카테고리의 다른 글
| CSS 기초부터 활용하기 3편 (색상 편) (0) | 2017.08.24 |
|---|---|
| CSS3 그라디언트 배경화면 만들기 (0) | 2017.08.20 |
| CSS 기초부터 활용까지 1편 (0) | 2017.08.14 |
| CSS 웹 폰트 적용시키기 (0) | 2017.08.12 |
| CSS를 이용한 Loader 만들기 (0) | 2017.08.11 |
