일단 스타일을 적용하기 위한 HTML문서를 만들자.
CSS를 사용하기 위해서는 HTML문서에 CSS규칙을 사용하려 한다는 것을 알려야 한다. 적용 방법에는 여러 가지가 있지만, head에서 연결하는 방법이 가장 일반적이고 유용하다.
- HTML문서와 같은 폴더에 파일을 만들고,
styles.css라고 저장한다. styles.css파일을 링크하기 위해서 HTML문서의<head>안에 다음을 추가한다.<link rel="stylesheet" href="styles.css">
HTML 요소 스타일링
요소이름1, 요소이름2 {
속성: 값;
속성: 값;
}위와 같은 형식으로 써주면 된다.
요소의 기본 동작 변경
HTML에서는 요소마다 기본으로 적용되는 서식이 있다. 하지만 이를 원하지 않을 수도 있다. 그럴 경우, 변경하려는 HTML 요소를 선택해서 CSS 규칙으로 변경해주면 된다. 예를 들어서, unordered list의 글머리 기호를 없애고 싶다면 다음과 같이 하면 된다.
li{
list-style-type: none;
}class 추가하기
앞서 HTML 요소 이름에 따라 요소의 스타일을 지정하는 방식으로 스타일을 변경해줬다. 하지만 동일한 요소더라도 일부분만 변경하고 싶을 경우에는 이 방법을 쓸 수 없다. 이를 수행하기 위한 방법으로 HTML 요소에 class를 추가하고, 해당 class의 스타일만 변경하는 방법이 있다.
다음과 같이 하면 된다.
- HTML 문서에서 class 속성을 추가한다. 이는
<list>,<span>등 모든 요소에서 가능하다. <ul> <li>first one</li> <li class="special">second one is special</li> <li>third one</li> </ul>- CSS에서 마침표 문자로 시작하는 선택자를 작성하면 특정 클래스를 대상으로 스타일을 추가할 수 있다.또는 다음과 같이 작성할 수도 있다.위는 special 클래스를 가지는 모든 li요소를 대상으로 스타일을 지정해준 것이다.
li.special{ color: green; }.special{ color: green; font-weight: bold; }
문서에서의 위치에 따라 스타일 지정
문서 안에서 위치에 따라 다르게 보여주고 싶을 수 있다. 이를 해결하기 위한 방법으로는 여러 가지가 있다.
대표적인 방법은 descendant combinator를 사용하는 것이다.
li em{
color: purple;
}위와 같이 작성하면, <li>의 하위 요소인 <em>을 선택할 수 있다.
또는 adjacent sibling combinator를 사용할 수도 있다.
h1 + p{
font-size: 150%;
}위와 같이 작성하면 h1 바로 다음에 오는 단락의 스타일을 변경할 수 있다.
상태에 따른 스타일 지정
문서 요소의 상태에 따라 스타일을 지정할 수도 있다. 대표적으로는<a> 요소를 대상으로 한 링크 스타일링이 있다. 링크의 방문 여부, mouse hover, 키보드를 통한 포커스 여부 등에 따라 다르게 지정할 수 있다.
a:link{
color: violet;
}
a:visited{
color: pink;
}
a:hover{
text-decoration: none;
}위와 같이, <a>요소의 상태에 따라 스타일을 지정해 줄 수도 있다.
여러 선택자와 결합자 결합
마지막으로, 여러가지 선택자와 결합자를 결합할 수도 있다.
article p span{
...
}
body h1 + li.special{
...
}
출처:https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/Getting_started