8. 반응 선택자
마우스 반응에 따른 속성을 설정한다.
houver : 커서를 갖다댔을 때의 상태
ex)
ul {
foot=size : 30px
color:blue;
}
ul:houver{
color:red;
}
**********************************
margin:30px;
상하좌우 30픽셀 여백 줌
margin: 5 5 3 3;
상하좌우 개별적으로 여백 주기
margin:0 auto;
가운데 정렬
**********************************
font-size:3em;
글자 3배 커짐
**********************************
9. 상태 선택자
상태에 따라서 css속성이 변화하는 설정을 준다.
input:focus : 글자 입력할 때의 상태
enabled : 글자 입력 한 후의 상태
disabled : 변경 불가능
padding : input하는 곳을 마우스로 눌렀을 때 깜박이는 커서와 input칸 과의 간격
ex)
input:focus {
padding: 15px;
}
input:enabled {
color:#색상번호;
}
input:disabled{
font-weight:bold;
}
<body>
<form>
비밀번호 : <input type="password" name="upw" value="1004" disabled="disabled"/>
</form>
</body>
10. 구조 선택자
구조에 따라 변화하는 설정을 준다.
ex)
(1)
li:nth-child(2n*1){
}
홀수 선택
(2)
li:nth-child(2n){
}
짝수 선택
(3)
li:first-child li:last-child{
}
처음과 끝 선택
(4)
li:first-of-type{
}
처음 선택
(5)
li:first-of-type{
}
끝 선택
**********************************
list-style:none;
<ul>의 모양을 없앤다.
**********************************
border-radius:10 10 0 0;
테두리를 둥글게 만든다.
좌상단 우상단 우하단 좌상단 값
**********************************
<a> 태그 중 target="_blank"
(추가)
_blank : 새 창에 열기
_parent: 부모창에 열기
_self:자신의 창에 열기
_top:모든 프레임을 지우고 전체 화면에 열기
**********************************
왼쪽 정렬
float:left;
값 없으면 재활용한다. 30 0 30 0 이 순서대로 적용
border-radius:30px 0;
**********************************
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8 /">
<title></title>
<style>
#header, #content, #footer {
width:1000px;
margin:0 auto;
overflow:hidden;
}
#header .left_space, #content .left_space, #footer .left_space {
width:150px; height:150px;
float:left;
background-color:#808080;
border:1px solid #00ffff;
}
#header .center_space, #content .center_space, #footer .center_space {
width:694px; height:150px;
float:left;
background-color:#eaa4a4;
border:1px solid #000000;
}
#header .right_space, #content .right_space, #footer .right_space {
width:150px; height:150px;
float:right;
background-color:#ffd800;
border:1px solid #0094ff;
}
#header .left_space, #footer .right_space{
border-radius:30px 0;
}
#header .right_space, #footer .left_space{
border-radius:0 30px;
}
#content .left_space{
border-radius:0 30px 30px 0;
height:300px;
}
#content .right_space{
border-radius:30px 0 0 30px;
height:300px;
}
#header .center_space{
border-radius:0 0 30px 30px;
}
#content .center_space{
border-radius:30px;
height:300px;
}
#footer .center_space{
border-radius:30px 30px 0 0;
}
#content .center_space ul li{
list-style:none;
float:left;
padding:0 40px;
font-weight:bold;
font-size:20px;
}
#content .hiseoul{
clear:both;
padding:10px;
}
</style>
</head>
<body>
<div id="header">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
<div id="content">
<div class="left_space"></div>
<div class="center_space">
<div>
<ul>
<li>info</li>
<li>gallery</li>
<li>talk</li>
<li>contact</li>
</ul>
</div>
<div class="hiseoul">
<h1>타이틀 : 하이서울</h1>
<p>내용 설명 어쩌구 저쩌구 블라블라 따따따</p>
</div>
</div>
<div class="right_space"></div>
</div>
<div id="footer">
<div class="left_space"></div>
<div class="center_space"></div>
<div class="right_space"></div>
</div>
</body>
</html>
'programing > html5&css3' 카테고리의 다른 글
| css3 기초 - gradient 속성 (그라데이션) (0) | 2018.01.09 |
|---|---|
| css3 기초 (0) | 2018.01.08 |
| css3 기초-문자선택자, 링크선택자, 부정선택자 (0) | 2018.01.07 |
| css기초 - 선택자와 태그 (0) | 2018.01.07 |
| html5 기초-태그와 레이아웃 (0) | 2018.01.07 |