css
선택자 - 특정 태그를 사용하여, 해당 태그의 속성을 변경하는 목적으로 사용된다.
선택자 안에 스타일 속성과 속성값을 넣으면 된다.
tag 선택자
특정 태그를 선택하여 css 속성을 적용할 수 있다. (li, p, hn, div 등)* 선택자
전체라는 의미의 * 선택자를 사용하면 문서 전체를 선택하는 의미이다.
주로 전체 속성을 지정하고 후에 태그 선택자를 사용한다.
css 초기화 할 때 사용한다.id(#)와 class(.)
태그의 id와 class를 이용하여 css 속성을 설정 할 수 있다.
<div id=“wrap”>이면 css에서 #wrap { }으로 사용하면 된다.
<div class=“content”>이면 css에서 .content { }로 사용하면 된다.속성 선택자
태그의 속성을 선택하여 css의 속성을 설정할 수 있다.
ex) input[type=“text”], img[src]후손 및 자손 선택자
태그의 속성을 선택하여 css의 속성을 설정할 수 있다.
후손이 더 큰 개념
후손 – div p { }, div li { }
자손 – div > h1 { }동위 선택자(+, ~)
태그의 동등한 위치를 판단하여 css의 속성을 설정할 수 있다.
~는 동등한 위치의 태그를 모두 선택, +는 동등한 위치의 태그 중 바로 밑을 선택반응 선택자
마우스의 반응에 따른 속성을 설정할 수 있다.
:hover { }상태 선택자
상태에 따라서 css속성이 변하는 설정을 할 수 있다.
:focus { }, input:enabled { }, input:disabled { }구조 선택자
구조에 따라서 css 속성이 변하는 설정을 할 수 있다.
:first-child { }, :last-child { }
:nth-child { 2n+1 }
:first-of-type { }, :last-of-type { }문자 선택자
특정 문자 또는 문자열을 선택하여 css 속성을 설정할 수 있다.
::first-letter { }, ::first-line { }
::selection { } - selection은 드래그 했을 때 링크 선택자
문서에서 링크로 되어 있는 문자를 선택하여 css 속성을 설정할 수 있다.
a::after { content: ‘ - ’ attr(href); }
-> 구글 – http://www.google.com 이런식으로 출력 됨부정 선택자
나를 제외한 모든 태그에 css 속성을 적용할 수 있다.
::not(.클래스이름) { } - 선택한 클래스를 제외한 것에 스타일 적용CSS 구체성 단위
여러가지 형태로 조합된 css 셀렉터는 태그, class, id 형식의 요소가
몇 번 지정되었는가에 따라 각각 점수를 부여 받는다.
부여된 점수가 높은 형식이 우선적으로 적용된다.
태그 1점
클래스 10점
ID 100점
HTML태그의 style 속성 사용 1000점사용 예제
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
header,
footer {
background-color: paleturquoise;
}
body {
border: 1px solid black;
width: 400px;
margin: 0 auto;
text-align: center;
}
#wrap {
border: 1px solid #999999;
}
.container {
background-color: skyblue;
}
.container ul li:first-child {
color: white;
}
.container ul li:nth-child(2n) {
color: cornflowerblue;
background-color: powderblue;
}
.container ul li:last-child {
color: whitesmoke;
}
.container ul li::first-letter {
color: cornflowerblue;
}
</style>
</head>
<body>
<header>header</header>
<main>
<div id="wrap">
<div class="container">
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
<li>리스트 4</li>
<li>리스트 5</li>
<li>리스트 6</li>
</ul>
</div>
</div>
</main>
<footer>footer</footer>
</body>
Hello World!