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)
태그의 속성을 통해서 여러 개의 선택자를 해당 태그에 적용시킬 수 있다.
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;
}
h1{
border-width: 5px;
border-color: red;
border-style: solid;
}
=>
h1{
border: 5px, red, solid;
웹페이지 우클릭 -> 검사(개발자 도구 진입) -> 스타일
해당 컨텐츠의 css 스타일 영역을 확인할 수 있다
(숫자)fr - 화면 비율을 자동으로 맞춰주는 단위, 크기에 따라 유동적으로 설정됨
cf) caniuse.com : 태그의 사용빈도, 사용가능여부를 보여주는 사이트
개발자 도구의 레이아웃을 통해 그리드들의 적당한 크기를 파악할 수 있다
@media(min-width:00){ }
@media(max-width:00){ }
-> 창 크기가 변하는 것에 반응하는 코드