[코딩 초보 개발일지] 상세_02. 내외부스타일

그동안 style은 head에 작성하였음.
style이 있는 head와 본문이 있는 body가 함께 있는 것인데,
이를 내부 스타일이라고 한다.

그러나 style이 간단하지 않기 때문에
계속 길어지다보면 가장 중요한 body를 놓칠 수 있다.

그런 의미에서 style을 다른 파일로 저장해두고
link를 걸어 작용하도록 한다. = 외부 스타일

참..글을 작성하다보니 지칭하는 말을 헷갈리는데,
style는 태그이고 css는 스타일을 지정하는 언어이다.
 
<Step 01.>
파일을 생성할 때에 link를 걸어줄 css 폴더를 생성한다.

"EXPLORER-마우스오른쪽클릭(또는 exporer 내 우측상단 아이콘)-
뉴폴더생성-css로 지정-해당 폴더 클릭-뉴파일생성-style.css로 지정"

<Step 02.>

728x90

style.css로 이동
@ 입력- @charset 입력 - " 입력 - 가운데 utf-8 입력 - ; 마감
 
@charset "utf-8";
 
.html 이동
link 입력 후 엔터 - href에 ./ 입력 - 상위 디렉토리에 나오는 css 클릭or엔터 - style.css 연속 클릭or엔터
 
<link rel="stylesheet" href="./css/style.css">
 
<중요> ./ 입력 후 직접 css를 작성하는게 아니라, 꼭 하단에 딸려오는
css&style.css를 클릭하여 link를 입혀야 한다. 
 
<참고> 
 

 index.html 에서 style.css의 link 설정 = style.css가 들어가 있는 CSS폴더에서 가져와야 함.

index가 들어가 있는 2교시 폴더라는 동일 폴더에서 css 폴더 내 파일을 가져오는 것이므로. 1개로 표현하여   ./

 

만약 style.css 에서 이미지를 가져오려면 style.css가 들어가있는 css 폴더로 올라가서 2교시 폴더 안에 있는 images 폴더에서 불러와야하므로. 2개로 표현하여  ../

 
<Step 03. 검사>
잘 반영되었는지 확인해보자.

Go Live 후, 마우스 오른쪽 클릭 - 페이지 소스보기(html만 나온다.)
head에 있는 css link 클릭(별도 창으로 style.css가 나옴)
 
 
여기서 잠깐!
검사를 꼭 해야하는지..?

 

물론 필수과정은 아니지만
한참 style를 작성해놓고선 link가 제대로 걸리지 않으면
막상 css가 잘못된건지 어디서 충돌이 난건지 모를 수 있다.
따라서 link가 문제없음을 미리 사전에 확인해놓고 가는 것이 오류를 줄일 수 있음!
 
<끝>