728x90
오랜만의 포스팅입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id 가 list 의 요소의 자손들중에 li를 전부 선택 */
#test1 li {
color:red;
border : 2px dotted #512335;
margin : 7px;
padding : 5px;
}
/* id 가 list 인 요소의 자식인 li 의 자식인 span 요소를 선택 */
#test2>li>span {
color : blue;
}
/*
1) 요소 선택자 : 요소명
2) id 선택자 : '#'
3) class 선택자 : '.'
4) 자손 선택자 : ' '
5) 자식 선택자 : '>'
*/
</style>
</head>
<body>
<ul id="test1">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
<ul id="test2">
<li>리스트1 <span>1</span></li>
<li>리스트2 <span>2</span></li>
<li>리스트3 <span>3</span></li>
<li>리스트4 <span>4</span></li>
</ul>
<ul>
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
<li>테스트4</li>
</ul>
</body>
</html>
저번에 했던 선택자에서 추가적으로 선택자를 더 정확히 구분하기 위한 코드입니다.
자손 선택자는 ' ' (띄어쓰기)로 구분하며 자식 선택자는 '>'를 이용해서 나타낼 수 있습니다.
예를들어서 test2라는 id를 가진 li에서 span을 선택하고 싶으면 자식 선택자를 이용해서 나타내면
#test2>li>span
이런식으로 나타내 주면 됩니다.
결과를 보고 바로 말하면
처음 css 에서는 test1의 자손 선택자인 li 요소에 해당되는 css가 적용되어있으며
두번째 리스트에서는 test2 의 자식 인 li 에서 그 자식인 span 만 css가 적용이 되어있습니다.
만일 요소 선택자를 이용하면 예를들면 li에서 css 속성을 주게되면 모든 li가 적용됩니다.
이를 방지하기 위해서 선택자의 개념을 사용하여 자신이 원하는 요소에 css속성을 추가합니다.
추가적으로 가상클래스_요소 선택자에대한 내용입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 & 요소</title>
<style>
/*
가상클래스 선택자 : ":"
- link : 다녀오지 않은 하이퍼링크 (브라우저 기본 : 파란색)
- visited : 다녀온 하이퍼링크 (브라우저 기본 : 보라색)
- hover : 마우스 오버시
- active : 마우스 클릭시
- focus : 마우스 포커스가 맞을 경우
가상 요소 : 가상으로 인라인레벨 요소가 들어감 "::" (CSS 2.1 에서는 : 한개)
- before : 부모를 기준으로 첫번째 자식요소로
- after : 부모를 기준으로 마지막 자식요소로
*/
hr {
margin-top: 20px;
margin-bottom: 20px;
}
#naver:hover
{
font-size:30px;
color:blue;
}
/*a:link {*/
/*color:red;*/
/*}*/
/* ctrl + / 을 하면 주석 처리를 한다. */
a {
color: #424242;
text-decoration : none;
}
a:hover {
text-decoration: underline;
}
#daum:hover {
color: green;
font-size: 30px;
}
#nate:hover {
color: red;
font-size: 30px;
}
#box {
width: 200px;
height: 150px;
background: #FF33DD;
/* 숫자 변경을 부드럽게 처리 css 3.0 부터 추가 */
transition: 500ms;
}
#box:hover {
width: 500px;
height: 300px;
background-color: #00F123;
border-radius: 30px 30px 30px 30px;
}
#box:active {
background-color: lightcoral;
}
input {
transition : .3s ease;
}
input:focus {
font-size: 20px;
background-color: lightgreen;
border : 3px solid #424242
}
#ve {
width : 300px;
height : 200px;
background-color: cornflowerblue;
/* 글자(인라인) 수평가운데 정렬 */
text-align: center;
/* 블록 레벨안에 인라인 레벨을 수직 가운데 정렬
height 와 line-height 의 크기를 같게 */
line-height: 200px;
display: block;
}
#ve::before {
/* 가상요소는 반드시 content 를 써야함 */
content:"a";
background-color: green;
/* 인라인레벨은 width, height 가 적용안됨 */
width: 100px;
height: 100px;
}
#ve::after {
content:"!!!";
background-color: yellow;
}
</style>
</head>
<body>
<h1>가상 클래스</h1>
<a id="naver" href="https://naver.com" target="_blank">네이버</a>
<a id="daum" href="https://daum.net" target="_blank">다음</a>
<a id="nate" href="https://nate.com" target="_blank">네이트</a>
<input/>
<hr/>
<div id="box"></div>
<hr/>
<h1>가상 요소</h1>
<div id="ve">가상요소</div>
</body>
</html>
가상 요소 선택자입니다 . 가상 요소는 before와 after가 있는데 일단 내부에서 웹 브라우저 내에서 결과 화면을 보게되면
다음과 같이 등록이 됩니다. 가상요소에서는 반드시 content 속성을 기재해주어야 합니다.
content에 값이 들어가지 않더라도 (기재할 텍스트가 없음) 빈 공간 ' ' 으로 라도 무조건 기재해주셔야 가상 클래스가 생성이 됩니다.
밑에 박스에서 a 는 가상 클래스 before 그리고 !!! 는 가상클래스 after입니다.
다음 포스팅은 박스모델에 대하여 알아보겠습니다.
반응형