CSS 인라인 / 내부 / 외부 스타일 개념 및 적용 방법

예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다.

 

인라인 방식

지금 보시는 마크업 중 빨간색 표시가 된 부분이 인라인 방식 입니다. 태그 요소에 직접 스타일을 부여해서 적용하는 방법입니다. 스타일 적용 방법 중 가장 최우선으로 적용됩니다.

 

내부 방식

노란색 표시 부분이 내부스타일 방식으로 적용된 모습 입니다. head 요소 안에 스타일을 따로 만들고, 그 안에 모두 모아두고 관리를 하죠. 장점이 바로 이 것입니다. 관리가 편합니다. 하지만 정리를 잘 해놔야지, 나중에 어떤 부분에서의 스타일인지 알 수 있습니다. 통상적으로는 본문이 헤드, 콘텐츠, 사이드바, 풋 부분으로 구별되어있듯 마크업도 비슷하게 구별해서 작성 하는 편 입니다.

 

이렇게해서 웹으로 출력해보면 빨간 글씨를 제외한 나머지는 내부스타일로 적용되어 정상적으로 잘 출력이 되고 있음을 확인할 수 있습니다.

 

외부 방식

마지막은 외부 스타일 방식 입니다. 아까 내부스타일에 마크업해둔 스타일 태그들을 모두 잘라내기를 하고, 새 문서를 만들어 붙여넣기 합니다. 현재 사용 프로그램은 브라켓 입니다. 그리고 맨 위에 저렇게 꼭 적어주셔야 합니다.

 

@charset "utf-8"

 

head 태그 안에 meta 태그로 넣어주셨던 것과 같습니다. 인코딩 방식을 지정해주는 것 입니다. 꼭 넣어주세요!

 

그리고 저장을 하시면 되는데 확장자는 꼭 CSS로 해주시면 됩니다. 파일 이름은 그냥 본인만 알아볼 수 있으면 됩니다.

 

폴더는 왠만하면 CSS 폴더를 따로 만들어 보관하시는것을 추천합니다. 디렉터리 (경로) 는 현재 메인페이지가 있는 최상위 루트 폴더 안쪽에 만드시는게 아무래도 편합니다.

 

다 저장하셨으면 적용시키고자 하는 html 문서에서 css 문서를 불러와야겠죠? 그러려면 위처럼 적어주시면 됩니다.

 

<link rel="stylesheet" type="text/css" href="경로 및 파일명.css">

 

이렇게 html 헤드 요소 안쪽에 작성해주시면 됩니다. 주의사항은 경로를 잘 지정해주셔야 한다는 점 입니다. 대소문자도 구별하기 때문에 하나라도 오타가 있다면 스타일은 적용되지 않습니다. 꼭! 신경써서 작성해 주시기 바랍니다. 끝.