1/2

박인태·2023년 1월 2일

WEB

목록 보기

5/12

head의 style 태그를 사용하는 대신 태그의 속성에 직접 style을 입력해서 그 부분만 따로 설정할 수 있다.

CODE

<li><a href="1.html">우왁굳</a></li>
<li><a href="2.html" style="color:black">이세계아이돌</a></li>
<li><a href="3.html">고정멤버</a></li>

Web

우왁굳

이세계아이돌

고정멤버

위 코드는 html 이지만 style이라는 속성코드는 뒤에 반드시 css가 온다고 약속한다.

반면 어제 공부한 head에 들어가는 style은 효과를 누구에게 지정할 지를 설정해서 적용하기로 약속한다.
그리고 이 때 a{ } 부분은 선택자(selector)라고 하며, color:black 부분을 효과(declaration)이라고 한다.

정리하자면, 특정 태그에 직접 스타일을 넣을때는 선택자 없어 효과선언만 해주면 된다.
추가로 또 다른 효과를 넣어줄 경우 ;를 써서 효과선언이 끝났음을 표시해주는 것이 좋다.

	a{
	color:red;
	}
a : 선택자(selector)
color:red; : 효과(선언,declaration)
color : 속성(property)
red : 값(value)

CSS 선택자의 기본

태그의 속성을 통해서 여러 개의 선택자를 해당 태그에 적용시킬 수 있다.
class 속성의 값은 여러개가 올 수 있으며 띄어쓰기로 구분한다.
다만 style에서 나중에 온 선택자가 속성에 미치는 영향력이 더 크기 때문에 같은 선택자를 쓰는 속성을 중복으로 부여하는 것은 별로 좋지 못하다.

선택자 우선순위 => 구체적이 우선순위
id선택자# > class선택자. > tag선택자

id의 value는 중복해서 사용하면 안된다.

박스모델

bolck : 화면 전체를 쓰는 태그
inline element : 컨텐츠 만큼의 부피를 쓰는 태그

같은 속성이 중복된다면 ,를 이용해서 합쳐주자

h1{
border-width: 5px;
border-color: red;
border-style: solid;
}
a{
border-width: 5px;
border-color: red;
border-style: solid;
}
=>
h1, a{
border-width: 5px;
border-color: red;
border-style: solid;
}