이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
이번에 공부할 내용은 웹사이트를 만들 생각을 하고 계시는 분들에게는 정말 중요한 내용입니다.
우리는 지금까지 HTML 파일의 <head></head> 태그 안에 있는 <style></style> 안에 CSS 코드를 작성해왔습니다.
그런데 실제로 이렇게 웹사이트를 만들게 되면 사이트에 웹페이지가 점점 늘어날수록 CSS 코드를 바꾸기가 힘들어집니다.
모든 웹페이지의 CSS를 동시에 수정할 수 있는 정말 편리한 기능, 그리고 HTML 태그에 디자인을 담당하면 태그들이 사용 금지가 되고 CSS가 탄생하게 된 이유이기도 한 link와 import에 대해서 공부해보겠습니다.
link
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
CSS의 코드들만 작성해놓은 style.css 파일을 따로 만들어둬서, 위의 소스 코드처럼 <head> 태그 안에
<link rel="stylesheet" href="style.css"> 라는 코드를 넣어주시면 됩니다.
@import
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
이렇게 하는 방법도 있습니다.
<head> 태그 안의 <style> 태그 안에 @import url("style.css"); 라는 코드를 넣어주는 겁니다.
link와 import의 다른 점은, link는 모든 웹페이지에 다 똑같은 CSS를 적용할 때에 사용하지만,
import는 중복되는, 공통되는 CSS 코드는 불러와서 사용을 하고, 다른 웹페이지에는 들어가지 않는 CSS 코드를 더 추가하거나 할 때 사용합니다.
생활코딩의 HTML 강의 때에도 가장 중요한 내용들을 마지막에 소개했었는데, CSS 강의 영상도 역시 마지막에 좋은 내용들이 더 많이 나오는 것 같습니다.
다음 포스트
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
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 |
댓글