022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정

Top

Daily Study/Web Dev

2021. 2. 25.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css3 selector</title>
	<style>
	:root {font-size: 20px}
	body {font: 12px 'Trebuchet MS',sans-serif;}
	h1 {font-size: 1rem}
	.wrap h1 ~ p {background-color: lime}
	/* wrap 안에 있는 (h1 다음에 오는) 모든 p에 적용, 형제 요소들에만 적용 */
	.wrap a[href ^= "http"] {background-color: orange}
	/* http로 시작하는 a에만 적용 */
	.wrap a[href ^= "mail"] {background-color: blue; color: white}
	.wrap a[href $= "pdf"] {background-color: lime}
	/* a 요소 중에 pdf로 끝나는 애들만 적용 */
	.wrap a[title *= "이동"] {color: red}
	/* a 요소 안에 '이동'이라는 글자가 들어있으면 적용 */
	.wrap p:empty {border-bottom: 1px solid green}
	/* 완전히 공백도 없이 비어있을때 적용 */
	/*ul li:nth-child(3) {border-bottom: 3px solid red}*/
	/*ul li:first-child {border-bottom: 3px solid red}*/
	/*ul li:last-child {border-bottom: 3px solid red}*/
	/*ul li:nth-child(2) {border-bottom: 3px solid red}*/
	/*ul li:nth-child(3n) {border-bottom: 3px solid red}*/
	/* 3번째마다 스타일 적용*/
	/*ul li:nth-child(3n+2) {border-bottom: 3px solid red}*/
	/* 2번째 적용하고 거기부터 3번째마다 스타일 적용 */
	ul li:nth-last-child(3n) {border-bottom: 3px solid red}
	/* 끝에서 3번쨰마다 적용 */
	dl dt:nth-child(2) {background-color: silver}
	#sample {display: none}
	#sample:target {display: block}
	</style>
</head>
<body>
	<div class="wrap">
		<p>Lorem ipsum dolor sit amet.</p>
		<h1>css3 selector</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, dignissimos voluptatibus rem vitae iusto debitis repellendus blanditiis et atque corrupti alias adipisci nobis velit consequatur impedit ea voluptas consequuntur repudiandae?</p>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Atque, ratione.</p>
		<p><a href="#sample">DL sample</a></p>
		<dl id="sample">
			<dt>description terms</dt>
			<dd>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Ab, nostrum.</dd>
			<dt>description terms</dt>
			<dd>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Ab, nostrum.</dd>
			<dt>description terms</dt>
			<dd>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Ab, nostrum.</dd>
			<dt>description terms</dt>
			<dd>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Ab, nostrum.</dd>
			<dd>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Ab, nostrum.</dd>
		</dl>
		<ul>
			<li><a href="http://naver.com" title="네이버로 이동">naver</a></li>
			<li><a href="http://daum.net" title="다음으로 이동">daum</a></li>
			<li><a href="mailto:qnkqnk@naver.com">mailing</a></li>
			<li><a href="download/sample.pdf" title="pdf파일 다운로드">download</a></li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
			<li>Lorem ipsum dolor, sit amet.</li>
		</ul>
		<p></p>
		<!-- 공백 없이 붙어있어야 empty로 인식 -->
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem rerum animi ullam maxime beatae fuga dolorem, eius a asperiores quaerat! Qui vel aspernatur facere accusamus obcaecati officia laboriosam veritatis maiores.</p>

	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>shadow</title>
	<style>
	/*
		selector {
			-webkit-attribute: value; Chrome, Safari
			-moz-attribute: value; Firefox
			-ms-attribute: value; IE, Edge, Outlook
			-o-attribute: value; Opera
			attribute: value; 표준 브라우저
		}
	 */
		
	#wrap {width: 600px; margin: 0 auto}
	#wrap h1 {
		border: 1px solid #333;
		padding: .5em;
		font: bold 100px arial,sans-serif;
		text-transform: uppercase;
		text-shadow:
			2px 2px 0 rgba(255,255,255,1),
			-20px 10px 10px rgba(0,0,0,.4);
		/* 위에서부터 순서대로 적용, 겹치기 가능*/
		box-shadow:
			10px 10px 0 rgba(0,0,0,.5),
			inset 5px 5px 30px 10px rgba(255,0,0,.3);
			/* inset 안쪽 outset 바깥쪽 */
	}
	</style>
</head>
<body>
	<div id="wrap">
		<h1>shadow</h1>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>shadow</title>
	<style>
	#wrap {
		width: 600px;
		padding: 20px;
		margin: 0 auto;
		border: 1px solid black;
		border-width: 0 1px;
		font: 12px arial, sans-serif;
	}
	.sample {
		display: block;
		overflow: hidden;
		/* 넘치는 부분 가리기 */
		width: 100%;
		/* 크기 지정 */
		white-space: nowrap;
		/* 줄 바꿈 해지 */
		text-overflow: ellipsis;
		/* 넘치는 부분 ...으로 대체 */
	}
	</style>
</head>
<body>
	<div id="wrap">
		<p class="sample">Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Voluptates sint, culpa totam repellendus, suscipit facilis? Maxime, ratione necessitatibus earum, voluptate molestias eos laudantium hic nemo fugit aliquid, culpa minus autem?</p>
		<span class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam cumque sit explicabo architecto blanditiis aliquam doloribus illum beatae non consectetur, a ullam, reiciendis deserunt, impedit natus quos, eius quasi sunt.</span>
	</div>
</body>	
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>shadow</title>
	<style>
	body {background: url(img/wendy.jpg)}
	#wrap {
		width: 600px;
		padding: 20px;
		margin: 0 auto;
		font: 12px arial, sans-serif;
	}
	#wrap h1.sample1 {
		border: 1px solid black;
		color: #f00;
		font-size: 100px;
		background-color: rgba(255,0,0,.2);
		/*background-color: hsla(180,100%,50%,.3);*/
	}
	#wrap h1.sample2 {
		opacity: .4;
		border: 1px solid black;
		color: #f00;
		font-size: 100px;
		background-color: blue;
	}
	</style>
</head>
<body>
	<div id="wrap">
		<h1 class="sample1">Opacity</h1>
		<h1 class="sample2">Opacity</h1>
	</div>
</body>	
</html>

오늘 부터는 css3에서 추가된 속성들을 공부했는데

아직 얼마 안하긴 했지만 앞으로 나올 box-sizing 같은 속성들은 확실히

귀찮게 여러 줄로 나뉠 걸 깔끔하게 정리할 수 있어서 편하고 자주 쓸 것 같다.

그리고 구역 지정 같은 경우에도 요즘엔 거의 flex, grid로 한다고 하니까

그 부분도 확실하게 알고 넘어가야겠다.

저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

024 CSS3 공부 (3) transition, transform, animation (0)	2021.03.04
023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex (0)	2021.03.02
021 웹페이지 만들어보기 실습 (0)	2021.02.23
020 CSS 공부 (16) 레이아웃 예제 실습 (0)	2021.02.21
019 CSS 공부 (15) 로그인 페이지 예제 실습 (0)	2021.02.17