CSS, link와 import

이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

지난 포스트

CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 gogogameboy.tistory.com/109 지난 포스트에 이어서 이번에도 트랜지션의 다른

gogogameboy.tistory.com

이번에 공부할 내용은 웹사이트를 만들 생각을 하고 계시는 분들에게는 정말 중요한 내용입니다.

우리는 지금까지 HTML 파일의 <head></head> 태그 안에 있는 <style></style> 안에 CSS 코드를 작성해왔습니다.

그런데 실제로 이렇게 웹사이트를 만들게 되면 사이트에 웹페이지가 점점 늘어날수록 CSS 코드를 바꾸기가 힘들어집니다.

모든 웹페이지의 CSS를 동시에 수정할 수 있는 정말 편리한 기능, 그리고 HTML 태그에 디자인을 담당하면 태그들이 사용 금지가 되고 CSS가 탄생하게 된 이유이기도 한 link와 import에 대해서 공부해보겠습니다.

link

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>page1</h1> </body> </html>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

CSS의 코드들만 작성해놓은 style.css 파일을 따로 만들어둬서, 위의 소스 코드처럼 <head> 태그 안에

<link rel="stylesheet" href="style.css"> 라는 코드를 넣어주시면 됩니다.

<!DOCTYPE html> <html> <head> <style> @import url("style.css"); </style> </head> <body> <h1>page2</h1> </body> </html>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

이렇게 하는 방법도 있습니다.

<head> 태그 안의 <style> 태그 안에 @import url("style.css"); 라는 코드를 넣어주는 겁니다.

link와 import의 다른 점은, link는 모든 웹페이지에 다 똑같은 CSS를 적용할 때에 사용하지만,

import는 중복되는, 공통되는 CSS 코드는 불러와서 사용을 하고, 다른 웹페이지에는 들어가지 않는 CSS 코드를 더 추가하거나 할 때 사용합니다.

생활코딩의 HTML 강의 때에도 가장 중요한 내용들을 마지막에 소개했었는데, CSS 강의 영상도 역시 마지막에 좋은 내용들이 더 많이 나오는 것 같습니다.

다음 포스트

CSS 코드 경량화 minify

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, link와 import 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분

gogogameboy.tistory.com

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

CSS 전처리기 preprocessor (0)	2021.01.17
CSS 코드 경량화 minify (0)	2021.01.15
CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 (0)	2021.01.13
CSS 트랜지션 (0)	2021.01.12
CSS 트랜스폼 중심축 바꾸기 (0)	2021.01.12