ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자)
      프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:18

      자식/자손의 개념

      자식 선택자 : > 부호 사용

      -       선택자 > 자식 선택자

      -       선택자A > 선택자B

      -       #header > h1 

       

      자손(후손) 선택자 : 띄어 쓰기 (스페이스)

      -       선택자 자손선택자

      -       선택자A 선택자B

      -       #header h1

      -       #pageNav ul li a:hover

       

      first-child 선택자

      -       첫 번째 자손 선택 : .wrap div:first-child

      -       두 번째 자손 선택 : .wrap div:first-child + div

      또는 nth-child(숫자)

      -       .wrap div:nth-child(1)

      -       .wrap div:nth-child(2)

      -       .wrap div:nth-child(3)

       

      first-child 선택자 예제 : first-child.html

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-child 선택자</title>
<style type="text/css">
	#content div{/* content의 모든 자손<div>*/
	width:400px;
	height:50px;
	border:soild 1px black;
}

	#content div:first-child { /*첫 번째 자손 <div>*/
	background:skyblue;
	}
	#content div:first-child + {	/* 두 번째 자손 <div>*/
	background:green;
	}
	
	#content div:nth-child(3) {	/* 세 번째 자손 <div>*/
	background:gold;
	}
	#content div:nth-child(4) {	/* 네 번째 자손 <div>*/
	background:pink	;
	}
	
	/* 띄어 쓰기 주의! div:first-child, div:nth-child 에서 콜론(:) 앞 뒤로 띄어 쓰기 하면 안 됨!	*/
</style>
	
</head>
<body>
	<div id = "content">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	
	</div>

</body>
</html>

       

      nth-child 사용 : 테이블에서 행 선택에도 사용

      테이블에서 짝수 행 선택 예제 : nth-child.html

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child 사용해서 테이블의 행 선택</title>
<style type="text/css">
	#stdTable{
		margin:0 auto;
		border-collapse:collapse; /* 단일 경계선 */
	}
	
	#stdTable th { color:white;background-color:blue;}
	#stdTable th.name {width:100px;}
	#stdTable th.email {width:200px;}
	
	#stdTable td {height:20px;}
	
	/* 짝수 행 선택 */
	#stdTable tr:nth-child(2n) td{
		background-color:yellow;
	
	}
	
	
	
</style>
</head>
<body>
	<table id = "stdTable" border="1">
		<tr><th class="name">이름</th><th class="email">이메일</th></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		
		</table>

</body>
</html>

      동적(반응) 선택자

      -       선택자:active - 마우스를 클릭한 태그 선택

      -       선택자:hover - 마우스를 올린 태그

      -       예제: dynamicSelector.html

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적 선택자</title>
<style type="text/css">
.content div {  /* content의 모든 자손<div>*/
	display:inline-block;
	background:blue;
	width:100px;
	height:50px;
}

.content div:hover{/*마우스 올렸을 때*/
	background:yellow;
}

.content div:active{/*클릭 했을 때*/
	background:red;
}
/* div 칸 띄어놓을려면 엔터쳐서 분리해놓으면된다 밑에 !*/
</style>
</head>
<body>
	<div class="content">
	<div></div> 
	<div></div>
	<div></div><div></div>
	</div>

</body>
</html>

       

      Overflow 속성

      -       자식 요소가 부모 요소의 범위를 벗어났을 때

      -       어떻게 처리할 것인지 지정

      -       hidden : 부모 영역을 벗어나는 부분은 보이지 않게 처리

      -       scroll : 스크롤바 표시 (가로 / 세로)

      -       auto : 자동으로 필요한 부분에만 스크롤바 표시

      -       예제 : overflow.html

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
	div{
		width:200px;
		height:175px;
		border:soild 1px black;
		/*overflow:hidden;*/	/*안 보이게 처리*/
		/*overflow:scroll;*/	/*가로/세로 스크롤바 표시 */
		overflow:auto;			/*자동으로 필요한 부분에만 스크롤*/
		}
	
		</style>
</head>
<body>
	<div>
		<img src="image/fashion1.png">
		<img src="image/fashion2.png">
		<img src="image/fashion3.png">
	</div>
</body>
</html>

      투명도 / 가시성

      투명도 (불투명도) : opacity 속성

      -       0 ~ 1 사이의 값 지정

      -       0 : 투명 (안 보임)

      -       1 : 불투명 : (보임)

      -       0.5 : 반투명

       

      가시성 (보임 / 안 보임)

      -       visibility 속성

      -       hidden : 숨김 (안 보임)

      -       visible : 보임

      예제 : visibility.html

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>투명도/가시성</title>
<style type="text/css">
		/* 마우스 올렸을 때 */
	#f1:hover{opacity:0.5;}
	
	/* 마우스 클릭했을 때 */
	#f1:active{opacity:1;}
	
	/* 마우스 클릭했을 때 */
	#f2:active{visibility:hidden	;}
	</style>
</head>
<body>
	<img id="f1" src="image/fashion1.png">
	<img id="f2" src="image/fashion2.png">

</body>
</html>

      그림자 효과 : box-shadow

      -       그림자 표시

      -       none | x-position y-position blur spread color | inset 

      -       box-shadow:0px 4px 8px 0 rgba(0, 0, 0, 0.3);

      -       none : 그림자 효과 없음

      -       x-position : 가로 위치에 그림자 표시. 양수(오른쪽), 음수(왼쪽)

      -       y-position : 세로 위치에 그림자 표시. 양수(아래쪽), 음수(위쪽)

      -       blur : 흐릿하게 표시. 값이 클수록 더 흐림

      -       color : 그림자 색상

      -       inset : 그림자를 요소의 안쪽에 표시

      -       boxShadow.html

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<link rel="stylesheet"type="text/css"href="externalCss.css">
<style type="text/css">
	
		</style>
</head>
<body>
	<div class="polaroid">
		<img src="image/pic1.jpg">
		<div class="container">
			<p>카드 놀이 하는 사람들</p>
			</div>
		</div>
		
		
	<div class="polaroid">
		<img src="image/pic2.jpg">
		<div class="container">
			<p>길가의 집</p>
			</div>
		</div>
		
</body>
</html>

      '프론트엔드 프로그래밍 > CSS' 카테고리의 다른 글

      반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스)  (0) 2022.01.26
      CSS 연습문제  (0) 2022.01.26
      CSS 속성 선택자  (0) 2022.01.26
      CSS의 기본 형식 + 선택자(태그, 아이디, 클래스)  (0) 2022.01.26
      CSS (스타일 시트)란?  (0) 2022.01.26

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바