TIL 0329

먼지·2024년 3월 29일

Today I Learned

목록 보기

30/89

Attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style type="text/css">
/*요소[속성] 특정 속성을 가지고 있는 태그를 선택*/
a[title] {
	color: yellow;
	background-color: pink;
	font-size: 20pt;
}

/*요소[속성=값] 속성 안의 값이 특정 값과 같은 태그 선택*/
a[title="홈페이지"] {
	color: red;
	background-color: gray;
	font-size: 30pt;
}

/*요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 태그를 선택*/
a[title~="email"] {
	color: blue;
	background-color: yellow;
	font-size: 25pt;
}

/* 요소 [속성 *= 값] 속성 안의 값이 특정 값을 포한하는 태그를 선택 */
a[title*="올림픽"] {
	color: brown;
	background-color: yellow;
	font-size: 20pt;
}

/* 요소[속성^= 값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택 */
a[href^="https://"] {
	color: green;
	background-color: red;
	font-size: 25pt;
}

/* 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택 */
a[href$=".net"] {
	color: white;
	background-color: black;
	font-size: 25pt;
}
</style>
</head>
<body>
	<h3>속성 선택자</h3>
	<a href="index.html" title="포트폴리오">포트폴리오</a>
	<a href="index.html" title="홈페이지">홈페이지</a>
	<a href="index.html" title="contact email link">이메일</a>
	<a href="index.html" title="서울올림픽선수들">올림픽</a>
	<a href="https://www.naver.com">대한민국</a>
	<a href="https://www.daum.net">월드컵</a>
</body>
</html>

실행 결과

Anchor

가상클래스 선택자

:hover = 마우스 커서가 링크에 올라가 있는 상태
:active = 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
:link = 링크를 클릭하지 않는, 그냥 링크되어 있는 상태
:visited = 링크를 눌러서 방문한 후 상태

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상 클래스 선택자</title>
<style type="text/css">
 a:link {
	text-decoration: none; /* link 밑줄 제거 */
	color: rgb(255,102,102);
}
a:visited {
/* :link의 text-decoration 지정과 동일하게 동작 a:link의 우선순위가 더 높았기 때문 */
	text-decoration: underline;
	color: rgb(89,71,71);
}
a:hover{
text-decoration: underline;
background-color: skyblue;
}
a:active{
text-decoration: underline;
color: white;
background-color: black;
}
</style>
</head>
<body>
<a href="https://www.naver.com">네이버	</a><br>
<a href="https://www.yahoo.com">야후</a>
</body>
</html>

실행 결과

State

:checked = 체크 상태의 input 태그를 선택
:focus = 초점이 맞추어진 input태그를 선택
:enabled = 사용 가능한 input 태그를 선택
:disabled = 사용 불가능한 input 태그 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상태 가상 선택자</title>
<style type="text/css">
 /* input 태그가 사용 가능할 경우 배경색을 yellow로 지정 */
input:enabled {
	background-color: yellow;
}
 /* input 태그가 사용 불가능할 경우 배경색을 gray로 지정 */
input:disabled {
	background-color: gray;
}
 /* input 태그에 초점이 맞춰지 경우 배경색을 orange로 지정 */
input:focus {
	background-color: orange;
}


div {
	width: 300px;
	height: 100px;
	border: 1px solid black;
	overflow: hidden; /* 지정한 넓이와 옾이를 벗어난 데이터는 숨김 */
}

input[type=checkbox]:checked + div{
	height: 0px;
}
</style>
</head>
<body>
<h2>Enabled</h2>
<input type="text">
<h2>Disabled</h2>
<input type="text" disabled="disabled">
<br><br>
<input type="checkbox">
<div>
	체크박스에 체크하면 내용이 사라짐
	체크박스에 체크하면 내용이 사라짐
	체크박스에 체크하면 내용이 사라짐
	체크박스에 체크하면 내용이 사라짐
	체크박스에 체크하면 내용이 사라짐
	체크박스에 체크하면 내용이 사라짐
</div>

</body>
</html>

실행 결과

Child

:first-child = 형제 관계 중에서 첫 번째 위치하는 태그를 선택
:last-child = 형제 관계 중에서 마지막에 위치하는 태그를 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일반 구조 가상클래스 선택자</title>

<style type="text/css">
ul {
	list-style: none; /* 아이콘 제거 */
}
li {
	float : left; /* 왼쪽을 기준으로 수평으로 정렬 */
	padding: 15px;
	background-color: orange;
}
li:first-child {
	border-radius: 10px 0 0 10px;
}

li:last-child {
	border-radius: 0 10px 10px 0;
}

</style>

</head>
<body>
	<ul>

		<li>0</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>

	</ul>

</body>
</html>

실행 결과

CSS Text

Text-Decoration

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration</title>

<style type="text/css">

#t1{text-decoration: underline;}
#t2{text-decoration: overline;}
#t3{text-decoration: line-through;}

</style>

</head>
<body>
<h3>text-decoration</h3>
<p id="t1">밑줄</p>
<p id="t2">윗줄</p>
<p id="t3">중간줄</p>
</body>
</html>

Text-align

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style type="text/css">

#t1{text-align: left;} /*기본 정렬*/
#t2{text-align: right;} /* 오른쪽 정렬 */
#t3{text-align: center;} /* 중앙 정렬 */
#t4{text-align: justify;} /* 왼쪽, 오른쪽 동등하게 정렬 */

</style>
</head>
<body>
<h3>text-align</h3>
<p id="t1">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t2">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t3">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t4">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>
</body>
</html>

Text-indent

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent</title>

<style type="text/css">
p{
width: 500px;
margin: auto;
border: 1px solid black;
}
#t1{text-indent: 2em;} /* 들여쓰기 글자 2개만큼 들여써라! */
#t2{text-indent: -2em;} /* 내어쓰기 글자 2개만큼 내어써라! */

</style>

</head>
<body>
<h3>text-indent</h3>
<p id="t1">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>
<br>
<p id="t2">
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

</body>
</html>

Letter-Spacing / Word-Spacing

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing / word-spacing</title>

<style type="text/css">
#t1 {
	letter-spacing: 3px; /* 글자 간격 */
}

#t2 {
	word-spacing: 2em; /* 단어 간격 */
}
</style>

</head>
<body>

	<h3>letter-spacing / word-spacing</h3>

	<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼
		스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를
		들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에
		들어가는 이미지는</p>
	<br>
	<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼
		스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를
		들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에
		들어가는 이미지는</p>

</body>
</html>

White-Space

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>white-space</title>

<style type="text/css">
#t1 {
	white-space: pre; /* 공백 줄바꿈 인정(디바이스의 넓이를 줄여도 다음 라인으로 이동하지 않음) */
}
#t2 {
	white-space: pre-line; /* 공백 불인정 줄바꿈 인정 (디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
}
#t3 {
	white-space: pre-wrap; /* 공백 줄바꿈 인정 (디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
}
#t4 {
	white-space: nowrap;
}
</style>

</head>
<body>

<h3>white-space</h3>
<p id="t1">
예를 들어                  다음 그림처럼 스마트폰은           고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t2">
예를 들어                  다음 그림처럼 스마트폰은           고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t3">
예를 들어                  다음 그림처럼 스마트폰은           고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

<p id="t4">
예를 들어                  다음 그림처럼 스마트폰은           고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지는</p>

</body>
</html>

Text-Transform

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-transform</title>

<style type="text/css">
#t1 {text-transform: capitalize;}  /* 첫 글자를 대문자로 */
#t2 {text-transform: uppercase;} /* 모든 글자 대문자 */
#t3 {text-transform: lowercase;} /* 모든 글자 소문자 */

</style>

</head>
<body>
<h3>text-transform</h3>
<p id="t1">pOOR alice!</p>
<p id="t2">pOOR alice!</p>
<p id="t3">pOOR alice!</p>
</body>
</html>

실행 결과

Text-Shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-shadow</title>

<style type="text/css">
p {
	font-family: Arial;
	font-size: 50px;
}
.text1{
	color: #06f;
}
.text2 {
	color:#c30;
}
.text3 {
	color:#06f;
	text-shadow: -3px -3px 5px #f7d0cb;
	/*  
	가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정
	양수값은 글자의 오른쪽에, 음수값은 글자의 왼쪽에 그림자를 표시
	
	세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정
	양수값은 글자의 아래쪽에, 음수 값은 글자의 위쪽에 그림자를 표시
	
	blur radius : 그림자의 번지는 정도 지정, 생략할 수 있으며,
	생략할 경우 그림자가 선명하게 표시
	
	shadow color : 그림자의 색상을 지정할 수 있음
	색상은 16진수로 된 색상 값, rgb 값으로 나타내야 한다.
	*/
}
.text4 {
	color:#c30;
	text-shadow: 3px 3px 5px #000;
}

</style>
</head>

<body>
<h3>text-shadow</h3>
<p>
	<span class="text1">HTML</span>&amp;
	<span class="text2">CSS</span>
</p>

<p>
	<span class="text3">HTML</span>&amp;
	<span class="text4">CSS</span>
</p>

</body>

</html>