TIL 0328

먼지·2024년 3월 28일

Today I Learned

목록 보기

29/89

Form 2

fieldset : 폼을 그루핑하는 역할
legend : 제목 지정
label : 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말한다. label 태그를 사용하면 폼 요소와 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있다.
required : 입력 필수 지정
range : 슬라이드 막대로 표시하는 숫자 필드
oninput 이벤트 속성에 명시된 코드를 이용해서 range 를 변경하여 정해진 값을 output에 표시
output : 계산의 결과를 삽입
number : 숫자 필드
date : 날짜 필드
time : 시간 필드
email : 이메일 필드
url : url 필드
search : search 필드 (다른 필드들과 다르게 한 번에 지울 수 있는 x의 버튼이 나타남)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
	<form action="do.jsp" method="post">
		<fieldset>
			<legend>프로젝트 정보</legend>
			<ul>

				<li>
					<label for="name">이름</label> 
					<input type="text" name="name" id="name" required="required" autofocus>
				</li>

				<li>
				<label for="priority">중요도</label> 
				<input type="range" name="priority" id="priority" min="0" max="10"
					value="0" oninput="result.value=parseInt(priority.value)">
				<output name="result"></output>
				</li>

				<li>
				<label for="hours">예상 시간</label> 
				<input type="number" name="hours" id="hours" min="0" max="24">
				</li>

				<li>
				<label for="start_date">시작 날짜</label> 
				<input type="date" name="start_date" id="start_date">
				</li>

				<li>
				<label for="start_time">시작 시간</label> 
				<input type="time" name="start_time" id="start_time">
				</li>

				<li>
				<label for="email"></label> 
				<input type="email" name="email" id="email">
				</li>

				<li>
				<label for="url">URL</label> 
				<input type="url" name="url" id="url">
				</li>
				
				<li>
				<label for="search">검색</label>
				<input type="search" name="search" id="search">
				</li>
				<li><input type="submit" value="전송"></li>

			</ul>
		</fieldset>
	</form>
</body>
</html>

실행 결과

Form 3

autocomplete : 자동 완성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
	<form action="signup.jsp"></form>
	<fieldset>
		<legend>Sign Up</legend>
		<ul>
			<li>
				<label for="name">Name</label> 
				<input type="text" name="name" id="name" placeholder="Enter your name.">
			</li>
			
			<li>
				<label for="id">ID</label>
				<input type="text" name="id" id="id" placeholder="Enter your ID" autocomplete="off">
			</li>
			
			<li>
				<label for="password">PW</label>
				<input type="password" name="password" id="password" placeholder="Enter your PassWord">
			</li>
			
			<li>
				<label for="job">Job</label>
				<input type="text" name="job" list="job">
				<datalist id="job">
						<option value="학생">
						<option value="의사">
						<option value="경찰">
						<option value="프로그래머">
				</datalist>
			</li>
			
			<li>
				<input type="submit" value="Sign Up">
			</li>
			
		</ul>
	</fieldset>
</body>
</html>

실행 결과

Video 1

controls : 제어판 생성

autoplay : 자동 실행(실행 안 됨)
autoplay : 자동 실행(muted를 명시해야 자동 실행됨), muted 음소거

poster : 동영상 파일이 호출되기 전에 미리 보여지는 정지 이미지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<h3>video 태그를 이용한 동영상 표시</h3>
<video src="../files/river.mp4" width="320" height="240"
                 controls autoplay="autoplay"></video>
<video src="../files/river.mp4" width="320" height="240"
                controls autoplay muted></video>   
<video src="../files/river.mp4" width="320" height="240"
              controls poster="../files/poster.jpg"></video>                                      
</body>
</html>

실행 결과

Video 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<h3>다양한 동영상 포맷 사용</h3>
<video src="../files/river.mp4" width="320" height="240"
                        controls></video>
<video src="../files/river.webm" width="320" height="240"
                        controls></video>  
<video src="../files/river.ogv" width="320" height="240"
                        controls></video>
<video src="../files/river.mov" width="320" height="240"
                        controls></video>  

<h3>동영상 파일을 브라우저 호환성있게 링크하기</h3>
<video width="320" height="240" controls>
	<source src="../files/river.mp4" type="video/mp4"></source>
	<source src="../files/river.webm" type="video/webm"></source>
	<source src="../files/river.mov" type="video/mov"></source>
	<source src="../files/river.ogv" type="video/ogg"></source>
</video>                                                                                            
</body>
</html>

실행 결과

Audio

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<h3>사운드 플레이하기</h3>
<audio src="../files/old_melody.mp3" controls autoplay></audio>
<br>
<audio src="../files/old_melody.ogg" controls autoplay></audio>

<h3>다양한 사운드 포맷 지원</h3>
<audio controls>
	<source src="../files/old_melody.mp3"></source>
	<source src="../files/old_melody.ogg"></source>
</audio>
</body>
</html>

실행 결과

CSS Basic

Inline

거의 사용하지 않는 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 방식</title>
</head>
<body>
<h3>인라인 방식(태그에 직접 스타일을 명시하는 방식)</h3>

<h1 style="color:red">인라인 방식</h1>
<span style="font-size:15pt;color:yellow;background-color:green;">안녕</span>
</body>
</html>

실행 결과

Embedding

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedding Style</title>
<style type="text/css">
h1 {color:green;}
span {font-size:20pt;}		
</style>
</head>
<body>
<h3>Embedding Style : 문서의 head태그에 Style 태그를 추가하고 
    style 태그에 스타일 명시</h3>
    
<h1>임베이드 방식</h1>
<span>봄이 빨리 왔으며~~</span>    
</body>
</html>

실행 결과

Link

link : 외부 리소스 링크
속성
rel : 현재 문서와 외부 리소스 사이의 관계를 명시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link Style</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h3>링크 스타일 : 스타일이 명시된 별도의 파일을 링크하는 방식</h3>

<span>여름이 벌써 왔네요!!</span>
</body>
</html>

실행 결과

Import

외부 파일을 링크하고 별도로 style 태그로 페이지에 스타일을 줄 수도 있지만 아래와 같이 style 태그 안에서 외부 스타일 파일을 import할 수도 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>import</title>
<!-- <link rel="stylesheet" href="style.css" type="text/css"> -->
<style type="text/css">
	@import url("style.css");
	h1{
		color:gray;
	}
	h2{
		color:darkred;
	}
</style>
</head>
<body>
	<h1>import 하기</h1>
	<h2>겨울</h2>
	<span>서울</span>
</body>
</html>

실행 결과

Important

!important를 사용하여 적용하는 것에 우선 순위를 지정해준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우선 순위 적용</title>
<style type="text/css">
	h1{color:red !important;}
	h1{color:yellow;}
</style>
</head>
<body>
	<h1>봄</h1>
</body>
</html>

실행 결과

Style

span의 폰트 사이즈와 색깔 변경
html 문서에서 import 하여 적용할 수 있음

@charset "UTF-8";

span{
	font-size:20pt;
	color:red;
}

CSS Selector

Tag

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자</title>
<style type="text/css">
/*태그 선택자 : 태그명을 통해서 동일한 이름의 태그 선택*/
span{
	font-family:serif;/*글꼴 지정*/
	font-size:20pt;/*글자의 크기 지정*/
	background-color:yellow;/*배경색 지정*/
}
p{
	font-size:25pt;
	background-color:pink;
}
</style>
</head>
<body>
<span>가을이 빨리 와라</span>
<p>겨울이 오면</p>
<span>봄이 오는 소리</span>
</body>
</html>

실행 결과

Class

<!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;}
</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>
</body>
</html>

실행 결과

ID

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 선택자</title>
<style type="text/css">
/*아이디 선택자는 문서에서 한 번만 적용*/
#layout_ft {font-size:30pt;color:blue;background-color:yellow;}
#layout_sp {font-size:25pt;color:red;background-color:pink;}
#layout_dv {font-size:15pt;color:white;background-color:black;}
#layout_dm {font-size:35pt;color:white;background-color:green;}
</style>
</head>
<body>
<div id="layout_ft">기분 좋은 하루</div>
<br>
<span id="layout_sp">3월의 끝</span>
<br>
<p id="layout_dv">오늘은 목요일</p>
<span id="layout_dm">내일은 금요일</span>
</body>
</html>

실행 결과

Complex 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 클래스 선택자 연계</title>
<style type="text/css">
.item{
	color:orange;
}
.item2{
	color:pink;
}
h1.item{
	color:blue;
	background-color:skyblue;
}
</style>
</head>
<body>
<h1 class="item">하늘</h1>
<h1 class="item2">바다</h1>
<h1>별</h1>
<span class="item">비행기</span>
</body>
</html>

실행 결과

Complex 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 ID 선택자 연계</title>
<style type="text/css">
h1{
	color:green;
	background-color:gray;
}
h1#target{
	color:pink;
	background-color:red;
}
</style>
</head>
<body>
<h1 id="target">가을</h1>
<h1>별</h1>
<span>바다</span>
</body>
</html>

실행 결과

Group

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style type="text/css">
/*그룹 지정은 여러개의 태그에 동일한 스타일을 적용하고 싶을 때 태그를 가리키는
선택자들을 ,로 나열해서 지정하는 방식*/
h1,p {font-size:20pt;background-color:yellow;}
</style>
</head>
<body>
<h1>여러개의 태그를 동시에 선택</h1>
<span>오늘은 목요일</span>
<p>여기는 서울입니다.</p>
</body>
</html>

실행 결과

Descendant

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>후손 선택자</title>
<style type="text/css">
/*지정한 후손 태그와 일치하는 모든 태그를 선택함*/
body div {border:3px solid blue;}
</style>
</head>
<body>
	<div>
		<ul>
			<li>사과</li>
			<li>바나나</li>
			<li>귤</li>
			<li>망고</li>
			<li>포도</li>
		</ul>
		<div>하늘</div>
	</div>
	<p>
		<span>하하</span>
	</p>
</body>
</html>

실행 결과

Child

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자</title>
<style type="text/css">
/*지정한 자식 태그(직계 자식만) 선택*/
body > div {border:3px solid blue;}
</style>
</head>
<body>
	<div>
		<ul>
			<li>사과</li>
			<li>바나나</li>
			<li>귤</li>
			<li>망고</li>
			<li>포도</li>
		</ul>
		<div>하늘</div>
	</div>
	<p>
		<span>하하</span>
	</p>
</body>
</html>

실행 결과

Same

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동위 선택자</title>
<style type="text/css">
/*
선택자A+선택자B : 선택자A 바로 뒤에 위치하는 선택자B만 선택
선택자A~선택자B : 선택자A 뒤에 위치하는 선택자B와 동일한 종류의 태그를 모두 선택
*/
h1 + h2 {color:red;}
div ~ p {color:blue;}
</style>
</head>
<body>
 <h1>header1</h1>
 <h2>header2</h2>
 <h2>header2</h2>
 <h2>header2</h2>
 
 <div>div</div>
 <p>paragraph</p>
 <p>paragraph</p>
 <p>paragraph</p>
 <p>paragraph</p>
 
</body>
</html>

실행 결과

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;}
</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>
</body>
</html>

실행 결과

먼지

Lucky Things🍀

이전 포스트

TIL 0327

다음 포스트

TIL 0328

Today I Learned

Form 2

Form 3

Video 1

Video 2

Audio

CSS Basic

Inline

Embedding

Link

Import

Important

Style

CSS Selector

Tag

Class

ID

Complex 1

Complex 2

Group

Descendant

Child

Same

Attribute

TIL 0327

TIL 0329

0개의 댓글