[CSS3] 홈페이지를 이쁘게 해주는 CSS를 알아보자!
안녕하세요. 오늘은 CSS가 무엇인지?
어떻게 사용하는지 알려드리려고합니다.
CSS는 HTML문서의 스타일(색상, 크기등)을 조절하는데 사용되는 언어입니다.
기본적인 사용법은
아래처럼 스타일을 지정할 요소(html태그명 or 클래스명)를
선택하고 { 스타일지정값}을 정해줍니다.
CSS를 사용하는방식에는 대략 3가지 방법정도가 있어요.
inline방식
<직접 html태그에 기입하여 사용하는 방법>
<!-- 가장 우선적으로 적용되나 관리적인 면에서 용이하지 않습니다.-->
<span style="color:#ddffcc; font-size:30px;">나는 퍼블리셔다</span><index파일이나 보여주는 페이지 내에서 style태그로 사용하는방법>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>inline style사용</title>
<style>
.sc { font-size:30px; color:#fd0000;}
</style>
</head>
<body>
<span class="sc">sc클래스를 가진 span태그</span>
</body>
</html>이처럼 style 태그안에서 따로 클래스명이나
태그들을 가져와서 스타일을 지정해줄수 있습니다.
link 방식 (가장 관리가 편하고 많이사용)
<!-- index.html 파일 코드 -->
<head>
<title>잡블리셔의일상</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h3 class="a">잡블리셔는 왜 코딩할까?</h3>
</body>@charset "utf-8";
/* style.css 파일 코드 */
h3.a {color:red; font-size:30px;};꼭 외부 스타일로 사용하실경우에는 @charset "utf-8"; 을
선언해주셔야 정상적으로 css가 동작합니다.
이유는 인코딩셋팅을 해주지 않으면 간혹
인코딩이 잘못되어 깨지는 증상이 발생합니다.
그리고 CSS는 Cascading Style Sheets 의 약자로서
폭포식(계단식) 스타일 구조를 말합니다.
즉, 위에서부터 아래로 가장아래의 스타일을
마지막으로 인식하게 됩니다.
코드로 보여드리자면
a {color:red;}
a {color:orange;}이렇게 기입하면 a의 글자색상은 오렌지색이 적용됩니다.
단, 클래스명에 차이를 주거나 !important를 준다면 우선순위는 달라집니다.
다음은 우선순위에 대해 설명드리겠습니다.
스타일 지정위치에 따른 우선순위
인라인요소 > 내부스타일 > 외부스타일
요소값에 따른 우선순위 #(id값) > .(class값) > (태그명)
요소값의 대한 우선순위는
일반태그명이 1 점이라면
클래스값이10점
아이디값이 100점 정도의 우선순위를 가진다고 생각하시면 될 것 같아요.
절대적인 우선순위
태그명or클래스/아이디 !important ; //권장하지않음 규칙을 깨뜨리는 느낌
그럼 위에서 설명드린 절대적인 우선순위를
계속해서 쓴다면 어떻게될까요?
절대적인 우선순위끼리 같은 점수를 가진 요소라면
아래배정된 css를 먹겠죠?
아니면 점수가 더 높은 css가 적용될거에요.
여러분들은 css를 정리할때도 잘 정리하여
코딩할때 혼선이 없도록 노력해봅시다.
항상 부족하지만 조금이라도
지식을 공유하고자
오늘도 끄적입니다.
