상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child
[ 상태선택자 ]
거의 쓰진 않지만 일단 알아두자.
# 비밀번호는 내가 못바꾸게 해놓고 싶을 때?
사용할 수 없게 하는 속성은 disabled="disabled"
속성명과 속성값이 같으면 하나만 써도 가능!
# input : disabled 는
사용할수 없게 한 속성을 선택하는 상태선택자임.
# placeholder 속성: 가상의 값을 넣어주는것.
# 커서가 들어가 있는 상태를
: focus
라고 함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_상태선택자</title>
<style>
input:enabled{
color:orange;
}
input:disabled{
color:red;
}
input:focus{
padding:2px;
color:aqua;
border-color:orange;
outline:none;
border-radius:3px;
}
</style>
</head>
<body>
<form action="#">
이름: <input type="text" placeholder="홍길동"><br>
아이디: <input type="text" placeholder="영문과 숫자만 사용해주세요" size="25"><br>
비밀번호: <input type="password" value="12345" disabled>
</form>
</body>
</html># 사실 위에것들 잘 안씀. 그나마 쓰게 되는건
input:focus 사용선택자다.
padding을 줘서 박스크기를 크게 한다던지...
아니면, 글씨의 색깔을 다르게 줘서 내가 뭔가 입력하는 것들을
다른색상으로 입력이 된다던지...
혹은 border컬러가 맘에 안들어서 border color를 바꾸겠다해서
입력할때 border컬러가 다른 색상으로 나타난다던지...etc
[ 반응선택자 ]
# a태그에서 마우스가 올라갔을때, 스타일이 바뀌는것.
클릭하면 색깔이 바뀐다던지 밑줄이 그어졋다던지..
마우스를 올렸을때 텍스트컬러나 배경색, 글자의 크기를 바꾼다던지..
a태그에 이미 들어가있는 default값을 변경할때 사용한다던지...etc
a:link
a:visited
a:hover
a:active
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_반응선택자</title>
<style>
ul li{
list-style: none;
}
nav a{
text-decoration: none;
}
nav a:link, a:visited{
color:black;
}
nav a:hover, nav a:active{
color:pink;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="http://www.naver.com">menu1</a></li>
<li><a href="http://www.naver.com">menu2</a></li>
<li><a href="http://www.naver.com">menu3</a></li>
<li><a href="http://www.naver.com">menu4</a></li>
</ul>
</nav>
</body>
</html>
# 기본스타일이 보라색이었는데 누를 때 빨간색으로 바뀜.
마우스를 올리면 바뀌는게 없고 누르고있으면 빨간색으로 바뀌는게 active상태.
active 상태의 default값이 빨간색컬러다.
# link가 들어간 컬러가 보라색이 싫으면
link상태의 색상을 바꾸면 된다!~~
보통은 티나게 안주고, 링크가 걸려있거나 방문을 했거나...
그냥 컬러값을 씀.
고로 link나 vistied는 잘 활용안함.
실제로 활용을 많이 하는건, hover 하고 active다.*/
nav a: hover 라고 쓰면 안됨. 한칸 을 띄면 a태그 안에 있는 구조가 되어버리므로!! 붙여쓸것:0*
[ 구조선택자 ]
# 반응선택자가 별표 3개라면
구조선택자는 별표 100개!!
# CSS3의 새로운 선택자 nth-of-type, nth-child / Border-radius 속성
nth에서 n은 임의의 수.
nth-child(숫자n) : 타입과는 상관없이 n번째 자식요소 선택
nth-of-type(숫자n) : 즉정 요소 유형 타입의 n번째 선택
nth-child(2n) : 2의 배수번째(짝수)를 선택한다.
nth-child(2n+1) : 홀수번째를 선택한다.
nth-child(3n+5) : 5부터 시작하여 세번째식 선택한다.
first-child : 첫번째
last-child : 마지막째
nth-child(odd) : 홀수번째
nth-child(even) : 짝수번째
# nth-child와 nth-of-type의 차이점을 잘 구분하자.
type 이란 얘를 쓰면
그 태그중에서 __번째를 선택해줌.
같은태그를 세느냐 안 세느냐의 차이다.
타입을 줬을땐 그 태그인걸 세고.~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_구조선택자</title>
<style>
*{margin: 0;
padding: 0;}
ul li, ol li{
list-style: none;
}
nav{
width: 30%;
border:1px solid purple;
margin: 10px;
}
nav li{
border: 1px solid red;
text-align: center;
height: 50px;
line-height: 50px;
background-color: yellow;
width: 100%;
}
nav a{
text-decoration: none;
background-color: orange;
color: white;
width: 100%;
height: 100%;
display: block;
}
nav a:hover{
background-color: pink;
color:hotpink;
}
nav#gnb li:nth-child(1) a{
background-color: aqua
}
nav#gnb li:nth-child(odd) a{
background-color: linen
}
nav#gnb li:nth-child(even) a{
background-color: lightblue
}
nav#gnb li:nth-child(2) a{
background-color: purple
}
nav{
float: left;
}
nav#lnb li:nth-of-type(1) a{
background-color: aqua
}
nav#lnb li:nth-of-type(odd) a{
background-color: linen
}
nav#lnb li:nth-of-type(even) a{
background-color: lightblue
}
nav#lnb li:nth-of-type(2) a{
background-color: purple
}
</style>
</head>
<body>
<nav id="gnb">
<ul>
<li><a href="#">menu1</a><li>
<li><a href="#">menu2</a><li>
<li><a href="#">menu3</a><li>
<div><a href="#">menu4</a></div>
<li><a href="#">menu5</a><li>
<li><a href="#">menu6</a><li>
<li><a href="#">menu7</a><li>
<li><a href="#">menu8</a><li>
</ul>
</nav>
<nav id="lnb">
<ul>
<li><a href="#">menu1</a><li>
<li><a href="#">menu2</a><li>
<li><a href="#">menu3</a><li>
<div><a href="#">menu4</a></div>
<li><a href="#">menu5</a><li>
<li><a href="#">menu6</a><li>
<li><a href="#">menu7</a><li>
<li><a href="#">menu8</a><li>
</ul>
</nav>
<mark>
포인트1) nth-child일 때에는 태그에 상관없이 순서를 센다.
하지만, nth-of-type일 때에는 정확하게 선택한 태그 중에서 첫 번째, 두번째 등으로 순서를 센다!!
포인트2) a태그는 인라인요소이므로 width height를 지정했을 때 사이즈를 갖지 못한다.
인라인요소가 사이즈를 갖으려면 display:block을 준다!
포인트3) nth-child든 of-child-type이든 (n)을 넣으면 n:0부터의 숫자를 대입하여
계산한 결과번째가 선택된다!
</mark>
</body>
</html>
# nth-child일 때에는 태그에 상관없이 순서를 센다.
하지만, nth-of-type일 때에는 정확하게 선택한 태그 중에서 첫 번째,
두번째 등으로 순서를 센다!!
# a태그는 인라인요소이므로 width height를 지정했을 때 사이즈를 갖지 못한다. 인라인요소가 사이즈를 갖으려면 display:block을 준다!!
# nth-child든 of-child-type이든 (n)을 넣으면 n:0부터의 숫자를
대입하여 계산한 결과번째가 선택된다(:
'IT' 카테고리의 다른 글
| Sprite 속성 / Sprite animation 연습 (1) | 2022.07.02 |
|---|---|
| position : absolute / fixed / relative / static / z-index (0) | 2022.06.30 |
| 레이아웃 연습하기 / Z 레이아웃 (0) | 2022.06.28 |
| float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습 (0) | 2022.06.27 |
| 속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float (0) | 2022.06.26 |