css3 기초-문자선택자, 링크선택자, 부정선택자
11.문자 선택자
특정 문자 또는 문자열을 선택하여 속성을 설정한다.
(1)첫 번째 글씨
#score::first-letter{
}
(2)첫 번째 라인
#score::first-line{
}
(3)드래그 했을 때의 설정
id="content"의 첫 번째 <p>만 선택하여 ::selection 속성 적용
ex)
#content p:first-child::selection{
background-color:yellow;
color:blue;
}
**********************************
margin:0 auto;
여백을 뜻하고
디폴트는 margin 0 0 0 0; 이다.
상하는 0 값
좌우는 자동으로 반 값씩 갖기 때문에 가운데 정렬이 된다
**********************************
border-bottom:1px;
테두리를 밑에만 준다
**********************************
<p>는 16px이 기본
**********************************
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
width:800px;
margin:0 auto;
}
#header {
border-bottom:1px solid #ff6a00;
}
#history2:first-letter, #history1::first-letter {
font-size:2em;
}
#history2:first-line, #history1::first-line {
font-weight:bold;
color:#4cff00
}
#footer ul {
overflow:hidden;
border:2px solid #ff6a00;
}
#footer ul li {
list-style:none;
float:left;
padding:20px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>설립 개요</h1>
</div>
<div id="content">
<p>어쩌구1</p>
<p id="history2">
어쩌구저쩌구 tatata
</p>
<p id="history1">
어쩌구저쩌구 blah blah
</p>
</div>
<div id="footer">
<ul>
<li><img src="hash3.jpg" /></li>
<li><img src="hash4.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
12.링크 선택자
href되어 있는 문자를 선택하여 속성을 설정한다.
첨부된 링크주소를 '-' 뒤에 적어준다.
#content a::after{
content: '-' attr(href);
}
13.부정 선택자
선택한 것을 제외한 나머지에 속성을 적용한다.
li 중 fa가 아닌 나머지에 적용된다.
li:not(.fa){
}
**********************************
padding: 30px 35px;
위아래 간격 / 글자간 간격
**********************************