CSS를 적용하는 세 가지 방법
- 인라인 스타일(inline style) : HTML 태그마다 style속성을 사용해서 CSS코드를 넣어주는 방식, 재사용이 불가능하고, HTML과 CSS의 코드가 분리되지 않아 잘 사용하지 않는다.
- 내부 스타일 시트(internal style sheet) : head 태그 안에(꼭 head는 아니라고한다.) style 태그를 두고 그 내부에 CSS코드 작성하는 방식, CSS가 해당 HTML에서만 사용되고 코드량이 적을 때 사용
- 링킹 스타일 시트(linking style sheet) : 외부의 CSS 파일을 HTML 문서에 연결하는 방식, HTML이랑 CSS코드가 분리되어 여러 HTML파일에 사용할 수 있어 자주 사용된다.
인라인 스타일(inline style) 적용 예시
<body> <p style="color: green">치코리타</p> 여기는 적용 안되지롱 </body>실행결과
style속성 중 color라는 옵션을 통해서 색을 지정해 주었다. 태그마다 이렇게 지정해 줘야해서 코드도 엄청 지저분해 질 것 같고 이렇게 잘 안 쓸것 같다.
내부 스타일 시트(internal style sheet) 적용 예시
<body> <p class="chiko">치코리타</p> <ol class="chiko"> <li>이상해씨</li> <li>이상해풀</li> <li>이상해꽃</li> </ol> </body><style> <!--html코드의 head부분에 style태그를 이용하여--> .chiko{ <!--chiko클래스에 해당하는 부분은 green색상으로 변경하도록 설정--> color: green } </style>실행결과
p태그도, ol태그도 chiko클래스이기 때문에 전부 green색상으로 변한 모습
하나의 html문서의 위쪽에 작성한 스타일이기 때문에 다른 html문서에 사용하려면 복붙해서 막 지저분 하게 또 코드 늘어날 것 같다. 해당 html에서만 쓰는 스타일이라면 사용해도 괜찮을 것 같다.
링킹 스타일 시트(linking style sheet) 적용 예시
<link rel="stylesheet" href="./style4.css"> <!--head 내부--><body> <p class="chiko">치코리타</p> <ol class="chiko"> <li>이상해씨</li> <li>이상해풀</li> <li>이상해꽃</li> </ol> </body>**CSS파일 코드(style.css의 내부)
p{ /*css파일의 주석 사용법 이대로 여러줄도 가능*/ color:green /*p 태그에 해당하는 것은 color를 green으로 변경*/ } }실행결과
고촬
이렇게 적용했을 때 우선순위는 뭐가 높을까?라는 생각이 들어 실험을 해봤다.<link rel="stylesheet" href="./style4.css"> <style> .chiko{ color:blue } </style> <title>Document</title> </head> <body> <p class="chiko" style="color:red">치코리타</p> <ol class="chiko"> <li>이상해씨</li> <li>이상해풀</li> <li>이상해꽃</li> </ol> </body>p{ /*css코드*/ color:green } ol{ color:red }결과
해당 실험을 통한 결과이긴 해서 정확하진 않을 수 있지만 일단은
1.인라인 2.내부 스타일 3.링킹 스타일 순으로 우선순위가 높은 것 같다.
꾸준히 진득하게 앞으로