안녕하세요 대남이입니다. 오늘은 css 파일은 html 문서에 어떻게 삽입하여 효과가 출력되게 할 지
방법에 대하여 배워 보도록 하겠습니다. 방법은 크게 3가지가 있습니다.
첫째 : 외부 스타일 시트 ( external style sheet )
둘째 : 내부 스타일 시트 ( internal style sheet )
셋째 : 인라인 스타일 시트 ( inline style sheet )
이렇게 세가지가 있습니다. 이름으로 어느정도 감이 오지 않나요?
그럼 하나하나씩 예시와 함께 자세히 살펴보도록 하겠습니다.
1. 외부 스타일 시트
외부 스타일 시트는 말 그대로 스타일 시트, css 파일은 외부에 저장하는 것입니다. 이런한 방법은 외부의 하나 css를
많은 페이지에 동일하게 적용하려고 할 때 유용하게 쓰일수 있는 방법입니다. 외부 스타일 시트를 사용하여
전체 웹 페이지의 스타일을 하나의 스타일 파일로 변경할 수 있습니다.
그럼 html 문서에서 외부 스타일 시트 (css) 파일을 불러오는 태그 예시를 보겠습니다.
이와 같이 나타냅니다. <link> 태그를 이용하여 외부 파일과 연결할 수 있는데, 여기서 외부파일은 css 파일이 됩니다.
위에서 볼 수 있듯이 type 에는 외부 파일의 종류를 적습니다. 이때, css 를 적어줍니다.
그다음 rel이라는 속성 html과 외부파일의 관계를 나타 냅니다. 앞서 html강좌에서 href는 링크 태그를 배울 때 보았습니다.
목적지(파일 이름)을 나타냅니다. 이런 구조를 잘 이해하고 계시면, 코딩할 때 유용합니다.
그럼 간단한 예시를 보겠습니다.
이와 같이 웹 브라우저에 출력하려고 합니다. 그러면 일단 html에는 어떤 요소가, css로 어떤 스타일이 적용되었는지 생각합니다.
일단 텍스트를 보면 h1 태그, p 태그가 쓰였고 스타일에서는 색상이 변경되 있습니다.
그럼 처음으로는 html을 통해 h1,p 태그를 써서 텍스트를 작성합니다.
html은 이와같이 나타냅니다.( link 태그는 head에 넣어주시면 됩니다. )
그리고 스타일을 적용시키기위해 외부 파일을 위와 같이 연결시켜줍니다.
그러면 외부 파일 즉 css 에는 h1 태그를 빨간색으로 변경시켜주고, p 태그를 푸른색으로 변경시켜줘야 합니다.
즉 이와같이 나타내면 됩니다. 이때 파일이름을 style1로 저장했다면, html에서 link태그를 사용할 때 href 속성에
반드시 파일이름과 일치시켜야합니다. 이렇게 외부 스타일 시트는 파일을 한번 만들어보면 불러주기만 하면 되기때문에
여러페이지에 같은걸 편하게 적용시킬 수 있습니다.
2. 내부 스타일 시트
내부 스타일 시트는 말 그대로 내부에 스타일을 정의하는 겁니다. 즉, html 문서안에 css를 정의 합니다.
이때 내부 <head> 속 <style> 태그 안에다가 css 태그를 작성하시면 됩니다.
그러면 위와같은 똑같은 예제를 보시겠습니다.
html 텍스트는 똑같이 작성하면 되고 css 태그도 빨간 파랑 으로 하지만 css 태그를 <style> 태그안에다가 작성합니다.
이와 같이 작성하면 됩니다. 어느 특정페이지에만 필요할 때 이렇게 내부 스타일 시트를 이용하면 좋습니다.
하지만 동일하게 적용해야된다면 외부 스타일 시트로 파일을 하나 만들어 불러오는게 유용합니다.
3. 인라인 스타일 시트
인라인 스타일 시트 또한 말 그대로 해석 한다면 각각의 요소마다 스타일 지정하는 것입니다.
인라인 스타일 시트는 하나를 특정하게 간편하게 지정할 수 있습니다. 하지만 방대한 양의 html 구성을 다룰 때는
크게 많이 사용 되지는 않습니다. 이때 설정 방법은 각 요소 뒤에다가 <태그 style="tag : 값"> 이와 같이 나타냅니다.
위와 같은 예시의 코드값을 보시겠습니다.
이렇게 <body> 태그안에서 각 요소의 태그안에다가 정의합니다.
즉 말 그대로 인라인 스타일 시트 입니다.
* 우선 순위 ?
만약 html,css문서를 작성해보신다면 css를 삽입하는데 한가지 방법만 사용하는게 아니라
여러가지를 복합적으로 사용합니다. 이럴 때 뭐가 우선적으로 설정되는지 알아보겠습니다.
1. 웹 브라우저의 디폴트 값 ( 기본 값 )
2. 외부 스타일 시트
3. 내부 스타일 시트
4. 인라인 스타일 시트
이와 같이 같이 설정됩니다.
-
오늘은 css를 삽입하는 방법 3가지를 배워봤습니다.
이번 강좌가 유용한 정보가 되었는지 모르겠습니다.
다음번에는 좀 더 유용한 정보와 좋은 강좌로 돌아오겠습니다.
'PROGRAMING > CSS' 카테고리의 다른 글
| #04 CSS강좌 html 폰트 크기, 스타일 적용 (0) | 2017.11.27 |
|---|---|
| #03 CSS강좌 html 색 넣기 (0) | 2017.11.26 |
| #01 CSS 강좌 선택자가 무엇인지 개념 그리고 종류 (0) | 2017.11.18 |