CSS의 기본 개념과 html에 외부 스타일시트(CSS)를 불러오는 방법을 알아봅시다!
* CSS : Cascading Style Sheets의 약자
단계적으로 html요소를 선택해서 꾸미는 역할을 한다.
html만 사용해서 웹 페이지를 만들 경우, 태그 하나 하나에 세부 스타일을 지정해야하고, 이후의 유지 보수 또한 힘들고 번거롭다. 때문에 유지보수가 쉽고, 사이트를 일관성 있게 꾸밀 수 있는 CSS를 필수로 이용 함 한다.
html 문서에서 분리되어 있는 CSS 외부스타일 시트는 확장자 .css를 사용, <link>태그를 이용하여 html문서로 불러온다.
CSS와 HTML, 연결 방식 3가지
1. embed :
- <style>태그를 이용, <head>영역 내에 작성하거나 html 중간에 얹는 방법
- 해당 html문서 내에서만 css스타일 적용가능.
- <head>내에 작성하는 bolck, 요소에 직접 스타일링하는 inline 작성이 있는데, inline 방법은 보수가 힘들어서 거의 사용하지 않는다!
- 링크는 스타일보다 위에 적는다.
2. link :
- 웹 사이트의 스타일을 html외의 스타일시트에서 변경할 수 있도록 해준다.
- 외부 스타일시트를 html과 연결하는 <link>태그를 이용하여 css를 불러온다.
- link rel 을 "stylesheet" 로 지정하고 href 에 해당 CSS 파일의 경로를 적는다.
<head> <link rel="stylesheet" href="../파일경로/파일이름.css"> </head>
css를 처음 접하는 초심자(는 나^^) 는 파일경로 설정하는 게 이해하기 어려울 수 있는데, '내컴퓨터'의 폴더 경로를 생각하면 이해가 된다!
(해당 html문서 기준) 상위폴더로 이동할 땐 ../ 를 사용하고,
현재폴더에 위치한 경우에는 따로 써줄 필요 없이 바로 파일명.css를 쓰면 됨!
<link rel="stylesheet" href="style/파일명.css"> 현재 위치에서 'style' 하위 폴더 안의 '파일명.css' 불러올 때 <link rel="stylesheet" href="style/common/파일명.css"> 현재 위치에서 'style' 하위폴더, 'common'하위 폴더 안의 '파일명.css' 불러올 때 <link rel="stylesheet" href="../style/파일명.css"> 현재위치보다 상위폴더로 이동, 'style'하위 폴더 내의 '파일명.css' 불러올 때
*이 방법은 추후에 이미지나, 아이콘을 불러 올 때도 쓰이니 알아둘 것!
3. import :
- <head>섹션 내의 <style>태그 안에서 사용한다.
- CSS를 html내에 기재하는 <style>태그 내부에서 → 다시 css를 위한 @import를 쓰는 방법이다.
- 외부 css파일 입장에서도 @import할 수 있다.
(html에서 (1)외부 css파일을 <link>로 불러낸 뒤, (1)해당 외부 css에서 다시 (2)css를 불러 내는 방법)
- 복잡한 파일을 좀 더 알아보기 쉽게 관리 할 수 있긴하나, 속도면에서 link 태그를 사용하는 게 더 좋다
/* html 문서에 <link>로 '파일명.css'를 로드 함 */ <html> <head> <link rel="stylesheet" href="파일명.css"> </head> </html> /* '파일명.css'안에서 다른 .css파일을 로드 함 */ @import url("style-header.css"); @import url("style-main.css"); @import url("style-footer.css"); @import url("style-sidebar.css");
*공부하면서 vs code에 정리했던 것도 올려요! 클릭해서 보세요 :o
'Archive > CSS' 카테고리의 다른 글
| CSS 기초 - 구조 의사 클래스(structural pseudo-class) (0) | 2021.09.19 |
|---|---|
| CSS 기초 - 선택자 우선순위 점수(CSS Property-specificity) (0) | 2021.08.24 |
| CSS 기초 - CSS작성순서 팁 / 선택자 [attribute] 알아보기 (0) | 2021.08.23 |
| CSS text-overflow: nowrap, ellipsis (행 나누기, 줄 바꿈 속성 line break) (0) | 2021.08.23 |
댓글