5월 ~ 7월) 웹/web

40Day - 14_input(+추가) / 15_label/ 16_textarea/ 17_select/ 18_datalist/ 19_fieldset/ [css] $$ 01_old/02_css/ 03_cascade/04_format.html & style.css / 05_basic_selector/ 06_derive_selector / 07_attribute_selector/ 08_virtual_selector

첼로그 2023. 5. 26. 18:16

14_input(+추가) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>input 태그</h1>
	<hr>
	<!-- input 태그 : 사용지로부터 값을 입력받기 위한 태그 - 입력태그 -->
	<!-- type 속성 : 값을 입력받기 위한 형태를 속성값으로 설정 -->
	<!-- name 속성 : 태그의 이름을 속성값으로 설정 - 전달값을 구분하기 위한 식별자 -->
	<!-- value 속성 : 입력태그의 초기값을 속성값으로 설정 -->
	<!-- size 속성 : 입력태그의 크기를 속성값으로 설정 -->
	<!-- maxlength 속성 : 최대 입력 가능한 문자의 갯수를 속성값으로 설정 -->
	<!-- autofocus 속성(HTML5) : 입력태그에 입력촛점(Focus)을 제공하는 속성 - 속성값 생략 가능 -->
	<!-- required 속성(HTML5) : 필수 입력값을 설정하기 위한 속성 - 속성값 생략 가능 -->
	<!-- => required 속성이 구현된 입력태그에 입력값이 없는 경우 form 태그 미동작 -->
	<!-- placeholder 속성(HTML5) : 입력태그의 입력값에 대한 설명을 속성값으로 설정 -->
	<!-- => placeholder 속성이 구현된 입력태그에 입력값이 입력되면 설명문 자동 소멸 -->
	<!-- readonly 속성 : 입력태그를 읽기 전용으로 사용하기 위한 속성 - 속성값 생략 가능 -->
	<!-- disabled 속성 : 입력태그를 비활성화 처리하기 위한 속성 - 속성값 생략 가능 -->
	<!-- checked 속성 : 우선 선택을 제공하기 위한 속성 - 속성값 생략 가능 -->
	<!-- min 속성 : 입력 가능한 최소값을 속성값으로 설정 -->
	<!-- max 속성 : 입력 가능한 최대값을 속성값으로 설정 -->
	
	<!-- type 속성값 -->
	<!-- => hidden : 입력태그를 숨겨 사용자로부터 값을 입력받지 않고 요청 웹프로그램에게 필요한 값 전달 -->	
	<!-- => text : 문자값을 입력받아 전달 -->	
	<!-- => password : 문자값을 입력받아 전달 - 입력값이 특정문자로 변환되어 표시 -->	
	<!-- => radio : name 속성값이 같은 입력태그 중 하나를 선택하여 전달 -->	
	<!-- => checkbox : name 속성값이 같은 입력태그 중 한개 이상을 선택하여 전달 -->	
	<!-- => file : 파일을 입력받아 전달 -->	
	<!-- => email(HTML5) : 이메일을 입력받아 전달 - 이메일 형식에 검증 처리 -->	
	<!-- => number(HTML5) : 숫자 형식의 문자값을 입력받아 전달(증가 또는 감소 버튼 제공) 
		- 숫자 형식의 문자값만 입력 가능하여 최소값 및 최대값 검증 가능 -->	
	<!-- => tel(HTML5) : 전화번호 형식의 문자값을 입력받아 전달 - 스마트기기의 입력패드로 변경 -->	
	<!-- => url(HTML5) : URL 형식의 문자값을 입력받아 전달 - 스마트기기의 입력패드로 변경 -->	
	<!-- => search(HTML5) : 검색 관련 문자값을 입력받아 전달 - 스마트기기의 자동 완성기능 시용 -->	
	<!-- => color(HTML5) : 색을 선택하여 색상값(#RRGGBB)을 전달 -->	
	<!-- => range(HTML5) : 등급을 선택하여 등급값 전달 - min 속성과 max 속성으로 등급의 범위 설정 -->
	<!-- => date(HTML5) : 날짜 형식의 문자값을 입력받아 전달 - 날짜를 선택할 수 있는 박스모델 제공 -->
	<!-- => time(HTML5) : 시간 형식의 문자값을 입력받아 전달 - 시간를 선택할 수 있는 박스모델 제공 -->
	<!-- => datetime-local(HTML5) : 날짜와 시간 형식의 문자값을 입력받아 전달 - 날짜와 시간를 선택할 수 있는 박스모델 제공 -->
		
	<form action="#" method="post">
		<input type="hidden" name="num" value="1000">
		<p>아이디 : <input type="text" name="id" size="10" maxlength="20" autofocus="autofocus" required="required"></p>
		<p>비밀번호 : <input type="password" name="passwd" placeholder="형식에 맞는 비밀번호 입력"></p>
		<p>이름 : <input type="text" name="name" value="홍길동" readonly="readonly"></p>
		<p>성별 : <input type="radio" name="gender" value="M">남자
			<input type="radio" name="gender" value="W" checked="checked">여자</p>
		<p>취미 : <input type="checkbox" name="hobby" value="독서">독서
			<input type="checkbox" name="hobby" value="게임">게임
			<input type="checkbox" name="hobby" value="등산">등산
			<input type="checkbox" name="hobby" value="낚시">낚시</p>
		<p>사진 : <input type="file" name="profile"></p>	
		<p>이메일 : <input type="email" name="email"></p>
		<p>나이 : <input type="number" name="age" min="1" max="100"></p>			
		<p>전화번호 : <input type="tel" name="phone"></p>
		<p>SNS : <input type="url" name="sns"></p>			
		<p>검색 : <input type="search" name="keyword"></p>
		<p>좋아하는 색 : <input type="color" name="color"></p>
		<p>실력 : 하<input type="range" name="grade" min="1" max="3">상</p>
		<p>생년월일 : <input type="date" name="birthday"></p>
		<p>기상시간 : <input type="time" name="uptime"></p>
		<p>알람 : <input type="datetime-local" name="alram"></p>

		<!-- form 태그에는 입력태그외에 제출 이벤트를 발생 시키는 태그가 반드시 존재 -->
		<!-- => 제출 이벤트가 발생하면 form 태그가 실행되어 웹프로그램을 요청해 입력값 전달 -->
		<!-- input 태그의 type 속성값을 [submit]으로 설정하여 태그(버튼)를 클릭한 경우 제출 이벤트 발생 -->
		<!-- <input type="submit" value="회원가입"> -->					
		<button type="submit">회원가입</button>		
		
		<!-- form 태그의 하위태그에 입력태그의 입력값을 초기화 처리하는 기능의 태그 작성 가능 -->
		<!-- => 초기화 이벤트(Reset Event) -->
		<!-- input 태그의 type 속성값을 [reset]으로 설정하여 태그(버튼)를 클릭한 경우 초기화 이벤트 발생 -->
		<!-- <input type="reset" value="다시입력"> -->		
		<!-- button 태그의 type 속성값을 [reset]으로 설정하여 버튼을 클릭한 경우 초기화 이벤트 발생 -->
		<button type="reset">다시입력</button>		
	</form>
</body>
</html>

 

 

15_label

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>label 태그</h1>
	<hr>
	<!-- label 태그 : 입력태그에 입력촛점(Focus)을 제공하기 위한 태그 -->
	
	<!-- label 태그를 사용하지 않은 경우 입력태그를 직접 클릭해야만 입력촛점 제공 -->
	<h3>label 태그 미사용</h3>
	<p>이름 : <input type="text" name="name"></p>
	<p>취미 :
		<input type="checkbox" name="hobby" value="낚시">낚시&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="등산">등산&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="독서">독서&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="게임">게임&nbsp;&nbsp;
	</p>
	<hr>
	
	<h3>label 태그 사용</h3>
	<p><label>이름 : <input type="text" name="name"></label></p>
	<p>취미 :
		<label><input type="checkbox" name="hobby" value="낚시">낚시</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="등산">등산</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="독서">독서</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="게임">게임</label>&nbsp;&nbsp;
	</p>
	
	<p>취미 :
		<!-- for 속성 : 태그를 구분하는 식별자를 속성값 설정 -->
		<!-- => label 태그를 클릭한 경우 속성값으로 설정된 태그에 입력촛점 제공 -->
		<input type="checkbox" name="hobby" id="hobby1" value="낚시"><label for="hobby1">낚시</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby2" value="등산"><label for="hobby2">등산</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby3" value="독서"><label for="hobby3">독서</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby4" value="게임"><label for="hobby4">게임</label>&nbsp;&nbsp;
	</p>		
</body>
</html>

 

 

16_textarea

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>textarea 태그</h1>
	<hr>
	<!-- textarea 태그 : 다수행의 문자값을 입력받기 위한 태그 - 입력태그 -->
	<!-- => 태그내용이 textarea 태그의 초기값으로 설정 -->
	<!-- rows 속성 : 입력태그의 행의 갯수(높이)를 속성값으로 설정 -->
	<!-- cols 속성 : 입력태그의 열의 갯수(폭)를 속성값으로 설정 -->
	<form method="post">
	<table>
		<tr>
			<td>장점</td>
			<td>
				<textarea rows="5" cols="80" name="good">장점이 아주 많습니다.</textarea>
			</td>
		</tr>
		<tr>
			<td>단점</td>
			<td>
				<textarea rows="5" cols="80" name="bad"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2"><button type="submit">제출</button></td>
		</tr>
	</table>
	</form>
</body>
</html>

 

 

17_select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>textarea 태그</h1>
	<hr>
	<!-- textarea 태그 : 다수행의 문자값을 입력받기 위한 태그 - 입력태그 -->
	<!-- => 태그내용이 textarea 태그의 초기값으로 설정 -->
	<!-- rows 속성 : 입력태그의 행의 갯수(높이)를 속성값으로 설정 -->
	<!-- cols 속성 : 입력태그의 열의 갯수(폭)를 속성값으로 설정 -->
	<form method="post">
	<table>
		<tr>
			<td>장점</td>
			<td>
				<textarea rows="5" cols="80" name="good">장점이 아주 많습니다.</textarea>
			</td>
		</tr>
		<tr>
			<td>단점</td>
			<td>
				<textarea rows="5" cols="80" name="bad"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2"><button type="submit">제출</button></td>
		</tr>
	</table>
	</form>
</body>
</html>

 

18_datalist

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>datalist 태그</h1>
	<hr>
	<!-- datalist 태그 : input 태그에 입력 가능한 값을 제공하기 위한 태그 -->
	<!-- > 하위태그 : option -->
	<form method ="post">
		<label for ="subject">좋아하는 과목 : </label>
		<!-- list 속성 : datalist 태그의 식별자를 속성값으로 설정 -->
		<input type ="text" name ="subject" id ="subject" list ="subjectlist">
		<datalist id ="subjectlist">
			<option>JAVA</option>
			<option>JSP</option>
			<option>SPRING</option>
		</datalist>
		<button type="submit">제출</button>
	</form>
</body>
</html>

 

19_fieldset

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
fieldset, div {
	width: 500px;
	margin: 10px 20px; 
}	

li {
	list-style-type: none;
	margin: 10px;
}
</style>
</head>
<body>
	<h1>fieldset 태그</h1>
	<hr>
	<!-- fieldset 태그 : 입력태그의 영역을 구분하기 위한 태그 -->
	<!-- => 하위태그 : legend, input, textarea, select 등 -->
	<h3>회원가입</h3>
	<form method="post">
	<fieldset>
		<!-- legend 태그 : 입력태그의 영역에 대한 제목을 제공하기 위한 태그 -->
		<legend>인증정보</legend>
		<ul>
			<li>아이디 : <input type="text" name="id"></li>
			<li>비밀번호 : <input type="password" name="passwd"></li>
		</ul>
	</fieldset>
	<fieldset>
		<legend>개인정보</legend>
		<ul>
			<li>이름 : <input type="text" name="name"></li>
			<li>이메일 : <input type="text" name="email"></li>
			<li>전화번호 : <input type="text" name="phone"></li>
		</ul>
	</fieldset>
	<div>
		<button type="submit">회원가입</button>
		<button type="reset">다시입력</button>
	</div>
	</form>
</body>
</html>

 

 

01_old

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
	<!--  CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성 -->
	<!--  > 웹문서 작성에 대한 생산성 저하 및 유지보수의 효율성 감소 -->
	<h1 align = "center" > Old Style</h1>
	
	<hr>
	<p><font size = "7" color = "green"> 브라우저에 출력될 아주 중요한 내용입니다. </font> </p> 
	<p><font size = "7" color = "blue"> 브라우저에 출력될 아주 중요한 내용입니다. </font> </p> 
	<p><font size = "7" color = "green"> 브라우저에 출력될 아주 중요한 내용입니다. </font> </p> 
	<p><font size = "7" color = "blue"> 브라우저에 출력될 아주 중요한 내용입니다. </font> </p> 
	<p><font size = "7" color = "green"> 브라우저에 출력될 아주 중요한 내용입니다. </font> </p> 

</body>
</html>

 

 

 

02_css

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- style 태그 : HTML 문서에 CSS를 사용하여 스타일 시트를 적용하기 위한 태그 -->
<style type = "text/css">
/* CSS 주석문 */
/*
Selector[,Selector,...][:paduo-class] {
	Property: Value [Value Value ...];
	Property: Value [Value Value ...];
	...
}	
*/	

/* 선택자(Selector) : 태그(박스모델)를 선택하기 하기 위한 표현식 */
/* => 선택자에 의해 선택된 태그(박스모델)를 엘리먼트(Element)로 표현 */
h1 {
	text-align: center;
}

/* p 태그를 사용하는 모든 엘리먼트에 동일한 스타일 적용 - 묵시적 반복  */
p {
	font-size: 25px;
	color: green;	
}

p:nth-child(2n) {
	color: blue;	
}
</style>
</head>
<body>
	<!-- CSS(Cascading Style Sheets) : HTML 문서에 모양과 서식을 제공하기 위한 스타일 시트 언어 -->
	<!-- HTML 태그를 사용하여 웹문서를 구성하고 CSS를 사용하여 웹문서에 스타일(디자인) 적용 -->
	<!-- => 웹문서 작성에 대한 생산성 증가 및 유지보수의 효율성 증가 -->
	<h1>CSS Style</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

 

03_cascade

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
/* 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용 */
/* > 자식 엘리먼트에 상속되지 않는 스타일 존재 */

body {
	color: red;
}

/* 스타일은 선언 순서에 의해 단계적으로 적용 - 기존 스타일 폐기(오버라이드)  */
p {
	color: green;
}

/* !important : 단계적 적용을 무시하고 최우선적으로 스타일을 적용하기 위한 속성값 */
li {
	color: blue !important;
}

/* 단계적 적용의 예외사항 - HTML 태그의 계층적 순서에 의해 스타일 적용 */
/* > 자식 엘리먼트의 CSS 스타일이 나중에 적용 */
ul {
	font-size: 20px;
	color: lime;
}

li {
	color: aqua;
}
</style>
</head>
<body>
	<h1>CSS 스타일의 단계적 적용과 상속</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<hr>
	<ul>
		<li>아주 중요한 내용-1</li>
		<li>아주 중요한 내용-2</li>
		<li>아주 중요한 내용-3</li>
	</ul>
</body>
</html>

 

 

 

04_style.css

@charset "UTF-8";
h1 {
	color: red;
}

 

 

04_format.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<!-- link 태그 : 외부파일을 불러와 내용을 연결하는 기능을 제공하는 태그 -->
<!-- => CSS 파일을 불러와 HTML 문서에 연결하여 스타일 시트 적용 -->
<!-- CSS 파일에 설정된 스타일을 사이트를 구성하는 모든 HTML 문서에 동일하게 적용하기 위해 사용 -->
<!-- => 사이트 구현시 모든 페이지에 일관성 있는 스타일 적용 -->
<!-- href 속성 : HTML 문서에 연결할 외부파일의 URL 주소를 속성값으로 설정 -->
<!-- type 속성 : HTML 문서에 연결할 외부파일의 파일형태(MimeType)를 속성값으로 설정 -->
<!-- rel 속성 : 파일 연결 관계를 속성값으로 설정 - CSS 파일을 연결하기 위해 [stylesheet] 속성값 사용 -->
<!-- <link href="/web/css/04_style.css" type="text/css" rel="stylesheet"> -->

<!-- style 태그를 사용하여 현재 HTML 문서에 스타일 시트를 적용 -->
<style type="text/css">
/* link 태그 대신 @import 시스템 속성을 이용하여 CSS 파일의 스타일 시트를 HTML 문서에 적용 */
/* => url 함수를 사용하여 HTML 문서에 포함시킬 CSS 파일의 URL 주소를 설정 */
@import url("/web/css/04_style.css");

h2 {
	color: skyblue;
}

h3 {
	color: blue;
}

h4 {
	color: lime;
}
</style>
</head>
<body>
	<h1>HTML 문서에 스타일 시트를 적용하는 방법</h1>
	<hr>
	<h2>브라우저에 출력될 아주 중요한 내용입니다.</h2>
	<h3>브라우저에 출력될 아주 중요한 내용입니다.</h3>
	<!-- 태그의 style 속성을 사용하여 해당 태그에 스타일 시트 적용 -->
	<h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4>
</body>
</html>

 

 

 

05_basic_selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 전체 선택자 : 모든 태그를 엘리먼트로 선택 - 비권장  */
/*
* {
	margin: 0;
	padding: 0;
}
*/

/* 태그 선택자 : 태그의 이름을 이용하여 엘리먼트로 선택 */
/* => 태그의 이름이 같은 다수의 엘리먼트에 동일한 스타일 적용 */
h2 { color: green; }
p { color: blue; }

/* 클래스 선택자 : 태그에 설정된 class 속성값을 이용하여 엘리먼트로 선택 */
/* => 태그 선택자와 구분하기 위해 앞에 [.]을 붙여 표현 */
/* => 동일한 class 속성값을 사용하는 다수의 엘리먼트에 동일한 스타일 적용 */
.text1 { color: maroon; }
.text2 { color: pink; }
.text3 { text-align: center; }

/* 아이디 선택자 : 태그에 설정된 id 속성값을 이용하여 엘리먼트로 선택 */
/* => 태그 선택자와 구분하기 위해 앞에 [#]을 붙여 표현 */
/* => id 속성값을 사용하는 하나의 엘리먼트에만 스타일 적용 */
#text4 { color: olive; }
/* 선택자는 , 기호를 사용하여 여러개 나열하여 엘리먼트로 선택 가능 */
#text5, #text6 { color: silver; }
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>기본 선택자 - 태그 선택자, 클래스 선택자, 아이디 선택자</p>
	<hr>
	<h2>태그 선택자</h2>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<hr>
	<h2>클래스 선택자</h2>
	<!-- class 속성 : 스타일 시트를 적용하기 위한 태그의 클래스 이름을 속성값으로 설정 -->
	<!-- => 태그에는 동일한 class 속성값 설정 가능 - class 속성값이 같은 태그에는 동일한 스타일 적용 -->
	<!-- => class 속성값은 공백을 이용하여 다수의 속성값 설정 가능 -->
	<p class="text1">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p class="text1 text3">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p class="text2">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<hr>
	<h2>아이디 선택자</h2>
	<!-- id 속성 : 태그를 구분하기 위한 식별자를 속성값으로 설정 -->
	<!-- => id 속성값은 태그를 구분하기 위해 사용하므로 동일한 속성값 설정 불가능 -->
	<p id="text4">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p id="text5">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p id="text6">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

 

 

06_derive_selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 태그를 이용하여 후손 엘리먼트로 선택 */
/* 형식)부모선택자 후손선택자 */
#super1 div { color: purple; }

/* 자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이의 태그를 이용하여 자식 엘리먼트로 선택 */
/* 형식)부모선택자 > 자식선택자 */
#super2 > div { color: gold; }

/* 필터 선택자 : 선택된 다수의 엘리먼트 중 특정 태그를 필터 엘리먼트로 선택 */
/* => 필터 선택자는 클래스 선택자를 사용하여 구현 */
/* 형식)선택자.클래스선택자 */
#super3 div { color: orange; } 
#super3 div.choice { color: lime; }
/*--  △div. 선택자중 choice / 클래스선택자 */

/* 형제 선택자 : 선택자에 의해 선택된 엘리먼트 다음에 위치한 같은 깊이의 태그를 이용하여 형제 엘리먼트로 선택 */
/* 형식)선택자 ~ 선택자 */
#standard ~ p { color: fuchsia; }

/* 인접 형제 선택자 : 선택자에 의해 선택된 엘리먼트 다음에 위치한 같은 깊이의 첫번째 태그를
이용하여 인접 형제 엘리먼트로 선택 */
/* 형식)선택자 + 선택자 */
#standard + p { color: red; }
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>파생 선택자 - 후손 선택자, 자식 선택자, 필터 선택자, 형제 선택자</p>
	<hr>
	<h2>후손 선택자</h2>
	<div id="super1">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>
	<hr>
	<h2>자식 선택자</h2>
	<div id="super2">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>
	<hr>
	<h2>필터 선택자</h2>
	<div id="super3">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div class="choice">임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>	
	<hr>
	<h2>형제 선택자</h2>
	<p id="standard">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

 

07_attribute_selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	font-size: 20px;
	line-height: 35px;
}

a {
	color: red;
	text-decoration: none;	
}

/* 속성 선택자 : 태그의 속성이나 속성값을 이용하여 엘리먼트로 선택 */
/* 형식)선택자[속성] => 태그 속성이 존재하는 태그를 엘리먼트로 선택 */
a[href] { color: green; }

/* 형식)선택자[속성='비교값'] => 태그 속성값이 비교값과 같은 태그를 엘리먼트로 선택 */
a[href='#abc'] { color: blue; }

/* 형식)선택자[속성*='비교값'] => 태그 속성값에 비교값이 포함된 태그를 엘리먼트로 선택 */
div[title*='여성'] { color: gold; } /* 1 3 4 */

/* 형식)선택자[속성~='비교값'] => 태그 속성값에 비교값이 하나의 단어로 포함된 태그를 엘리먼트로 선택 */
div[title~='화장품'] { color: silver; } /* 2 4 */

/* 형식)선택자[속성^='비교값'] => 태그 속성값에 비교값으로 시작되는 태그를 엘리먼트로 선택 */
div[title^='남성'] { color: orange; } /* 5 */

/* 형식)선택자[속성$='비교값'] => 태그 속성값에 비교값으로 종료되는 태그를 엘리먼트로 선택 */
div[title$='남성'] { color: maroon; } /* 6 */
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>속성 선택자 : 태그의 속성과 속성값을 이용하여 엘리먼트를 검색하여 스타일 시트 적용</p>
	<hr>
	<div><a>하이퍼링크 기능을 제공하는 태그-1</a></div>
	<div><a href="#">하이퍼링크 기능을 제공하는 태그-2</a></div>
	<div><a href="#abc">하이퍼링크 기능을 제공하는 태그-3</a></div>
	<hr>
	<div title ="여성">화장품 -1</div>
	<div title ="화장품">화장품 -2</div>
	<div title ="여성화장품">화장품 -3</div>
	<div title ="여성 화장품">화장품 -4</div>
	<div title ="남성화장품">화장품 -5</div>
	<div title ="화장품남성">화장품 -6</div>
</body>
</html>

 

 

08_virtual_selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	font-size: 20px;
	line-height: 35px;
}

a {
	color: orange;
	text-decoration: none;
}

/* 가상선택자 : 선택자로 선택된 엘리먼트의 상태에 의해 스타일 시트 적용하기 위해 사용 */
/* 형식)선택자:상태 => 선택자로 선택된 엘리먼트에 따라 사용 가능한 상태 존재 */

/* :link : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태인 경우 스타일 시트 적용 */
a:link { color: lime; }

/* :visited : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번이상 요청한 상태인 경우 스타일 시트 적용 */
a:visited { color: red; }

/* :active : 엘리먼트에 마우스 커서를 위치하여 버튼을 누르고 있는 상태인 경우 스타일 시트 적용 */
a:active { color: green; }

/* :hover : 엘리먼트에 마우스 커서를 위치한 상태인 경우 스타일 시트 적용 */
a:hover {
	color: blue;
	text-decoration: underline;
}

/* :first-child : 후손 엘리먼트 중 첫번째 엘리먼트에 스타일 시트 적용 */
ul li:first-child { color: red; }

/* :last-child : 후손 엘리먼트 중 마지막 엘리먼트에 스타일 시트 적용 */
ul li:last-child { color: green; }

/* :nth-child(X) : 후손 엘리먼트 중 X번째 엘리먼트에 스타일 시트 적용 */
ul li:nth-child(3) { color: blue; }

/* :nth-child(2n-1) : 후손 엘리먼트 중 홀수번째 엘리먼트에 스타일 시트 적용 */
/* ol li:nth-child(2n-1) { color: silver; } */
ol li:nth-child(odd) { color: silver; }

/* :nth-child(2n) : 후손 엘리먼트 중 짝수번째 엘리먼트에 스타일 시트 적용 */
/* ol li:nth-child(2n) { color: gold; } */
ol li:nth-child(even) { color: gold; }

input { border: 1px solid gray; }
input[type='text'] { border: 1px solid maroon; }

/* :not(선택자) : 선택자의 엘리먼트를 제외한 나머지 엘리먼트에 스타일 시트 적용 */
input:not([type='text']) { border: 1px solid orange; }

/* :disabled : 선택자의 엘리먼트 중 비활성화 되어 있는 엘리먼트에 스타일 시트 적용 */
/* :checked : 선택자의 엘리먼트(input - radio 또는 checkbox)중에서 선택된 엘리먼트에 스타일 시트 적용 */
/* :selected : 선택자의 엘리먼트(select - option)중에서 선택된 엘리먼트에 스타일 시트 적용 */
input[type='text']:disabled {  border: 2px dotted red; }

/* :focus : 선택된 엘리먼트(입력태그)중에서 입력촛점이 위치한 엘리먼트에 스타일 시트 적용 */
input:focus { border: 3px double green; }
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>가상 선택자 : 엘리먼트의 상태에 따라 다른 스타일을 적용하기 위한 선택자</p>
	<hr>
	<!-- a 태그는 기본적으로 태그내용에 밑줄(underline)이 적용되며 글자색은 파란색(갈색)으로 스타일 적용  -->
	<a href="https://www.daum.net">다음</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.naver.com">네이버</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.google.com">구글</a>&nbsp;&nbsp;&nbsp;
	<hr>
	<ul>
		<li>홍길동</li>
		<li>임꺽정</li>
		<li>전우치</li>
		<li>일지매</li>
		<li>장길산</li>
	</ul>
	<hr>
	<ol>
		<li>홍길동</li>
		<li>임꺽정</li>
		<li>전우치</li>
		<li>일지매</li>
		<li>장길산</li>
	</ol>
	<hr>
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name" value="홍길동" disabled="disabled"></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="email" name="email"></td>
		</tr>
	</table>
</body>
</html>

 

저작자표시 (새창열림)