HTML, CSS/day24 / 23.09.26(화) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
04_fomr
25_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<!--
# form tag
- 사용자가 입력한 데이터를 서버에 전송시키기 위해서 사용하는 태그
- <form name="" action="" method="">
* name : form 이름, form 을 구분하기 위한 이름
* action : 폼 태그 안의 내용을 처리해주는 서버쪽 파일을 지정
* method : 폼을 서버에 전송하는 http 메서드 지정
> get : url에 입력데이터를 쿼리스트링으로 보내는 방식
전송되는 데이터가 보이기 때문에 보안에 취약하고,
크기에 제한이 있다.
> post : request에 담아서 보내는 방식
전송되는 데이터가 보이지 않고,
크기에 제한이 없음.
# fieldset tag
- form 태그 안에 관련 있는 form 요소들을 그룹화 할 때 사용
# legend tag
- fieldset 요소 그룹에 이름을 지정
-->
<h2>form tag</h2>
<br>
<form name="ex" action="#" method="get">
<fieldset>
<legend>그룹 이름</legend>
</fieldset>
</form>
</body>
</html>26_input-tag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
# input 태그
- form 태그안에 사용되는 가장 중요한 요소로
사용자로부터 데이터를 입력받기 위해서 사용
- <input type="" name="" value="">
* type : 입력 태그의 유형 지정
* name : 서버로 전달되는 이름 지정( 사용자 임의 지정 ) / 변수명 느낌
* value : 입력태그의 초기값을 설정( 사용자 변경 가능 )
# label tag
- input 태그에 text label 을 지정
- for 속성을 사용해서 관련 요소들을 묶는 역할
이때, 관련 요소의 id 속성과 동일해야 함
## get 방식은 정보 전송 시 주소창에 정보가 노출됨
-->
<h2>input tag</h2>
<br>
<form action="#">
<fieldset>
<legend>text</legend>
<label for="usernaem">이름 : </label>
<input type="text" name="username" size="10" maxlength="10"/>
<p>한 줄짜리 텍스트 입력 창</p>
<p>size : 입력창 크기 조정</p>
<p>maxlength : 사용자가 입력할 수 있는 최대 글자 수</p>
</fieldset>
<br>
<fieldset>
<legend>password</legend>
<label for="userpw">비밀번호 : </label>
<input type="password" name="userpw" id="userpw"/>
</fieldset>
<br>
<fieldset>
<legend>file</legend>
<input type="file" name="filedown" id="filedown"/>
<p>파일 선택 버튼을 제공</p>
</fieldset>
<br>
<fieldset>
<legend>checkbox</legend>
<input type="checkbox" id="apple" name="fruit_1" value="사과" checked/>
<label for="apple">사과</label>
<input type="checkbox" id="banana" name="fruit_2" value="바나나"/>
<label for="banana">바나나</label>
<input type="checkbox" id="mango" name="fruit_3" value="망고"/>
<label for="mango">망고</label>
<p>여러 항목을 선택할 수 있음</p>
<p>checked 속성을 사용해서 기본 선택값을 설정 가능</p>
</fieldset>
<br>
<fieldset>
<legend>radio</legend><!-- radio는 하나만 선택 가능하므로 name 값 일치 -->
<input type="radio" id="male" name="gender" value="m" checked/>
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="f"/>
<label for="female">여성</label>
<p>radio는 하나의 그룹이고, 한 그룹에서 radio 하나만 선택 가능</p>
<p>같은 그룹에 있는 항목들은 name 이 같아야 함</p>
</fieldset>
<br>
<fieldset>
<legend>hidden</legend>
<input type="hidden" id="hidden" name="secret" value="비밀"/>
<p>사용자에게는 보이지 않고 서버쪽으로만 보내지는 데이터</p>
</fieldset>
<br>
<fieldset>
<legend>button</legend>
<label for="user_btn">버튼</label>
<input type="button" id="user_btn" name="userBtn" value="click"/>
<p>value 속성을 사용해서 button 이름을 설정</p>
<p>자체 별도의 기능은 없고, 스크립트에 연결해서 사용</p>
</fieldset>
<br>
<input type="submit" value="전송"/>
</form>
</body>
</html>27_select-tag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
# select tag
- 드롭다운을 사용해서 여러개의 목록을 정의
- 서버에 전송되는 데이터는 select 요소의 name 속성에,
option 요소의 value 속성이 값으로 전송
# option tag
- select 태그안의 목록을 생성
# optgroup tag
- option 태그를 그룹화
# datalist 태그
- 텍스트를 입력하는 필드에 사전에 정의된 드롭 다운 형식의 목록을 출력
- 사용자가 입력창에 값을 입력하면, option 목록에서 일치하는 것을 찾아서 자동완성 기능 제공
-->
<h2>select tag</h2>
<br>
<form action="#">
<fieldset>
<legend> select </legend>
<select id="car-list" name="cars" size="5" multiple>
<option value="hyundai">HYUNDAI</option>
<option value="kia">KIA</option>
<option value="gm">GM</option>
<option value="bmw">BMW</option>
<option value="benz">BENZ</option>
</select>
<p>size 속성을 사용하면 기본 표시되는 목록의 수를 지정</p>
<p>mulitple 속성을 사용하면 여러개의 항목 선택이 가능<br>
ctrl 키를 누른 상태에서 선택
</p>
</fieldset>
<br>
<input type="submit" value="선택 완료">
</form>
<br>
<form action="#">
<fieldset>
<legend>optgroup</legend>
<select id="car-list2" name="cars2" size="5">
<optgroup label="국내">
<option value="hyundai">HYUNDAI</option>
<option value="kia">KIA</option>
<option value="gm">GM</option>
</optgroup>
<optgroup label="해외">
<option value="bmw">BMW</option>
<option value="benz">BENZ</option>
<option value="audi">AUDI</option>
</optgroup>
</select>
</fieldset>
</form>
<h2>datalist tag</h2>
<br>
<form action="#">
<fieldset>
<legend> 과일 </legend>
<input list="fruit_list" id="fruits" name="fruits"/>
<datalist id="fruit_list">
<option value="apple" label="사과">
<option value="banana" label="바나나">
<option value="mango" label="망고">
<option value="watermelon" label="수박">
<option value="peach" label="복숭아">
</datalist>
</fieldset>
</form>
</body>
</html>28_textarea.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
# textarea tag
- 여러줄의 글자를 입력할 때 사용
- <textarea rows="" cols="">
* rows : 텍스트 영역의 행(라인)의 수를 지정
* cols : 텍스트 영역의 폭(가로)를 지정
-->
<h2>textarea tag</h2>
<br>
<form action="#">
<textarea id="memo" name="memo" rows="10" cols="50" placeholder="내용을 작성하세요"
style="resize: none;"></textarea>
<br>
<input type="submit" value="완료">
</form>
</body>
</html>29_button.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
# button tag
- 클릭이 가능한 버튼 생성
-->
<h2>button tag</h2>
<br>
<form id="login-form" action="#">
<fieldset>
<legend> 로그인 </legend>
<label for="user-id"> ID : </label>
<input type="text" id="user-id" name="userid">
<br>
<label for="user-pw"> PW :</label>
<input type="password" id="user-pw" name="userpw">
<br><br>
<input type="submit" value="로그인"/> <input type="reset" value="취소"/>
<p>submit : form 에 입력한 내용을 서버로 전송하고,<br>
form 태그의 action 속성에 지정한 페이지에서 실행
</p>
<p>reset : form에 입력한 내용 지우기</p>
</fieldset>
</form>
<br><!-- 버튼은 폼 밖에 나와도 됨. 단, 폼의 id - 버튼 form 속성 일치-->
<button form="login-form" type="submit">로그인</button>
<button form="login-form" type="reset">취소</button>
<p>form 과 button 을 하나의 양식으로 처리 가능</p>
<p>form 의 id 속성과 button 의 form 속성값이 같아야 함</p>
</body>
</html>30_quiz_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>image</h3>
<img src="../../image/img/Quiz_form.PNG">
<br>
<h3>코드구현</h3>
<h3>개인 신상 정보 입력</h3>
<form id="pri" action="#">
<label for="username">- 이름 : </label>
<input type="text" id="username">
<br><br>
<label for="userpw">- 비밀번호 : </label>
<input type="password" id="userpw">
<br><br>
<label for="gender">- 성별 :</label>
<input type="radio" id="male" name="gender" value="남성">
<label for="gender">남성</label>
<input type="radio" id="female" name="gender" value="남성">
<label for="gender">여성</label>
<br><br>
<label for="hobby">- 취미 : </label>
<input type="checkbox" id="movie" name="hobby_1" value="영화감상">
<label for="movie">영화감상</label>
<input type="checkbox" id="game" name="hobby_2" value="게임">
<label for="game">영화감상</label>
<input type="checkbox" id="music" name="hobby_3" value="음악듣기">
<label for="music">영화감상</label>
<br><br>
<label id="file">- 파일 첨부 : </label>
<input type="file" name="filedown" id="filedown">
<br><br>
<label for="email">- 이메일 :</label>
<input type="text" id="email"> @
<select id="email-list" name="domain" size="1">
<option value="select">_____선택_____</option>
<option value="naver.com">naver.com</option>
<option value="google.com">google.com</option>
<option value="daum.net">daum.net</option>
</select>
<br><br>
<label for="pre">- 자기소개 : </label>
<textarea id="pre" name="pre" rows="5" cols="30"></textarea>
</form>
<br>
<button form="pri" type="submit">확인</button>
</body>
</html>30_quiz_form_T.html
<!-- 04_form/30_quiz_form.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>30_quiz_form</title>
</head>
<body>
<!--
# img 폴더안에 'Quiz_form.png' 파일의 내용을 구현하세요
-->
<h3>개인 신상 정보 입력</h3>
<br/>
<form action="#">
<label for="user-name">- 이름 : </label>
<input type="text" id="user-name" name="username"/>
<br/><br/>
<label for="user-pw">- 비밀번호 : </label>
<input type="password" id="user-pw" name="userpw"/>
<br/><br/>
<label for="gender">- 성별 : </label>
<input type="radio" id="male" name="gender" value="남성" checked/>
<label for="male"> 남성 </label>
<input type="radio" id="female" name="gender" value="여성"/>
<label for="female"> 여성 </label>
<br/><br/>
<label for="hobby">- 취미 : </label>
<input type="checkbox" id="movie" name="hobby_1" value="movie"/>
<label for="movie"> 영화감상 </label>
<input type="checkbox" id="game" name="hobby_2" value="game"/>
<label for="game"> 게임 </label>
<input type="checkbox" id="music" name="hobby_3" value="music"/>
<label for="music"> 음악듣기 </label>
<br/><br/>
<label for="attach-file">- 파일 첨부 : </label>
<input type="file" id="attach-file" name="attachFile"/>
<br/><br/>
<label for="email">- 이메일 : </label>
<input type="text" id="email" name="mail"/> @
<select id="domain" name="domain">
<option value="">----- 선 택 -----</option>
<option value="naver.com">naver</option>
<option value="gmail.com">google</option>
</select>
<br/><br/>
<label for="self-info">- 자기소개</label>
<br/>
<textarea id="self-info" name="selfInfo" rows="10" cols="50" placeholder="내용을 작성하세요" style="resize: none;"></textarea>
<br/><br/>
<input type="submit" value="확인"/>
</form>
</body>
</html>31_html5_input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>HTML input</h2>
<br>
<form action="#">
<fieldset>
<legend>color</legend>
<label for="my-color">새상 선택</label>
<input type="color" id="my-color" name="myColor"/>
</fieldset>
<fieldset>
<legend>date</legend>
<label for="my-date">날짜 선택(년월일)</label>
<input type="date" id="my-date" name="myDate"/>
</fieldset>
<fieldset>
<legend>month</legend>
<label for="my-month">월 선택(년월)</label>
<input type="month" id="my-month" name="myMonth"/>
</fieldset>
<fieldset>
<legend>week</legend>
<label for="my-week">주 선택(년도, 주)</label>
<input type="week" id="my-week" name="myWeek"/>
</fieldset>
<fieldset>
<legend>time</legend>
<label for="my-time">시간 설정</label>
<input type="time" id="my-time" name="myTime"/>
</fieldset>
<fieldset>
<legend>range</legend>
<label for="point">값 선택</label>
<input type="range" id="point" name="point" min="0" max="100" step="10" value="10"/>
<pre> <!-- pre tag는 공백, 줄바꿈 모두 반영됨-->
슬라이더를 선택해서 값을 선택<
min, max : 범위 지정
step : 숫자 간격 설정
value : 초기값 설정
</pre>
</fieldset>
<fieldset>
<legend>number</legend>
<label for="count">수량 선택</label>
<input type="number" id="count" name="point" min="0" max="10" step="2" value="10"/>
</fieldset>
</form>
</body>
</html>32_add-attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
# autfocus
- 페이지를 불러오자마자 입력 필드안에 마우스 커서를 위치 시킴
# required
- 필수 입력 필드를 체크
# autocomplete
- 정보를 입력할 때 자동완성 기능을 설정 : on(기본), off
-->
<h2>정보 입력</h2>
<br>
<form action="#">
<fieldset>
<legend>회원 정보</legend>
<label for="user-name">이름</label>
<input type="text" id="user-name" name="userName" placeholder="공백 없이 입력하세요" autofocus required autocomplete="off">
<br><br>
<label for="user-mail">이메일</label>
<input type="email" id="user-mail" name="userMail" placeholder="test@test.com">
<br><br>
<label for="user-tel">전화번호</label>
<input type="tel" id="user-tel" name="userTel" placeholder="010-0000-0000">
<br><br>
<input type="submit" value="완료">
</fieldset>
</form>
<h2>온도 조절</h2>
<br>
<form action="#">
<p>지속 시간(0.0 ~ 10.0 시간) :
<input type="number" id="duration" name="duration" min="0.0" max="10.0" step="0.5"/></p>
<br>
<p>온도 설정 : 10°
<input list="temperature" type="range" id="temp-set" name="tempSet" min="10" max="30"> 30°</p>
<datalist id="temperature">
<option value="15" label="low">
<option value="20" label="medium">
<option value="25" label="high">
</datalist>
<input type="submit" value="설정">
</form>
</body>
</html>33_quiz_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#c_b{
background-color: aquamarine;
width: 100px;
margin: 0 auto;
text-align: left
}
#c_r{
background-color: darksalmon;
width: 200px;
margin: 0 auto;
text-align: left
}
body{
background-image: url(../../image/img/세종대왕.jpg);
text-align: center;
background-repeat: no-repeat;
background-size: 100vw;
}
</style>
<body>
<h3>코드</h3>
<form id="pizza" action="#">
<label for="name">고객명 : </label>
<input type="text" id="name" name="Name" autofocus autocomplete="off"><br><br>
<label for="tel">전화번호(필수) : </label>
<input type="tel" id="tel" name="Tel" placeholder="010-0000-0000" required><br><br>
<label for="email">E-mail : </label>
<input type="tel" id="email" name="Email" placeholder="abc@def.com"><br><br>
<label for="selcp">피자선택(필수) : </label>
<select id="selcp" name="selectPizza" size="1" required>
<option value="">피자를 선택하세요</option>
<option value="컴비네이션 피자">컴비네이션 피자</option>
<option value="치즈 피자">치즈 피자</option>
<option value="불고기 피자">불고기 피자</option>
<option value="페퍼로니 피자">페퍼로니 피자</option>
<option value="고구마 피자">고구마 피자</option>
</select><br><br>
<fieldset id="c_b">
<legend>피자 사이즈<small>(필수)</small></legend>
<input type="radio" id="Small" name="size" required>
<label for="Small">Small</label><br><br>
<input type="radio" id="Medium" name="size" required checked>
<label for="Medium">Medium</label><br><br>
<input type="radio" id="Large" name="size" required>
<label for="Large">Large</label><br><br>
</fieldset>
<fieldset id="c_r">
<legend>토핑 선택</legend>
<input type="checkbox" id="bacon" name="topping_1" value="베이컨">
<label for="bacon">베이컨</label><br><br>
<input type="checkbox" id="cheese" name="topping_2" value="치즈">
<label for="cheese">치즈</label><br><br>
<input type="checkbox" id="onion" name="topping_3" value="양파">
<label for="onion">양파</label><br><br>
<input type="checkbox" id="mushroom" name="topping_4" value="버섯">
<label for="mushroom">버섯</label><br><br>
</fieldset>
<br>
<label for="hopetime">희망 배송 시간 :</label>
<input type="time" id="hopetime" name="HT"><br><br>
<label for="request">배송시 요청 사항 :</label>
<textarea id="request" name="rideR" rows="3" cols="25"></textarea>
</form>
<button form="pizza" type="submit">주문하기</button>
</body>
</html>33_quiz_formT_html
<!-- 04_form/33_quiz_form.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>33_quiz_form</title>
</head>
<body>
<!--
# img 폴더안에 '주문정보.png' 파일의 내용을 구현하세요
-->
<h2>주문 정보</h2>
<br/>
<form action="#">
<label for="user-name">고객명 : </label>
<input type="text" id="user-name" name="userName"><br/>
<br/>
<label for="phone">전화번호(필수) : </label>
<input type="tel" id="phone" name="phone" required><br/>
<br/>
<label for="email">E-mail : </label>
<input type="email" id="email" name="email"><br/>
<br/>
<label for="pizza-menu">피자선택(필수) : </label>
<select id="pizza-menu" name="pizzaMenu" required>
<option value="">피자를 선택하세요</option>
<option value="menu_1">컴피네이션 피자</option>
<option value="menu_1">불고기 피자</option>
</select>
<br/><br/>
<fieldset>
<legend> 피자 사이즈(필수) </legend>
<input type="radio" id="small" name="size" value="small"/>
<label for="small"> Small </label><br/>
<br/>
<input type="radio" id="midium" name="size" value="midium" checked/>
<label for="midium"> Midium</label><br/>
<br/>
<input type="radio" id="large" name="size" value="large"/>
<label for="large"> Large </label><br/>
<br/>
</fieldset>
<br/>
<fieldset>
<legend> 토핑 선택</legend>
<input type="checkbox" id="toping" name="toping_1" value="toping_1"/>
<label for="toping"> 베이컨 </label><br/>
<br/>
<input type="checkbox" id="toping" name="toping_2" value="toping_2"/>
<label for="toping"> 치즈 </label><br/>
<br/>
<input type="checkbox" id="toping" name="toping_3" value="toping_3"/>
<label for="toping"> 양파 </label><br/>
<br/>
<input type="checkbox" id="toping" name="toping_4" value="toping_4"/>
<label for="toping"> 버섯 </label>
</fieldset>
<br/><br/>
<label for="time">희망 배송 시간</label>
<input type="time" id="time" name="time"/>
<br/><br/>
<label for="memo">배송시 요청 사항</label><br/>
<textarea id="memo" name="memo" rows="5" cols="50" style="resize: none;"></textarea>
<br/><br/>
<input type="submit" value="주문하기"/>
</form>
</body>
</html>02_CSS
01-01_전체 선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
# CSS ( Cascading Style Sheet )
- HTML 로 체이지 구성을 하고, CSS 를 사용해서 색상, 크기 등의 웹문서의 디자인
# 선택자
- 선택자 속성 값
* {color: red;}
> 각 송성 설정 간에는 ';' 으로 구분
-->
<style type="text/css">
* {
color:brown; /* 페이지 전체 태그에 색상 적용 */
}
p{
color: #000;
}
h3,h4,h5,span{
color:violet ;
}
</style>
<body>
<h2>전체 선택자</h2>
<p>HTML 페이지의 모든 태그를 선택할 때 사용</p>
<br>
<h3>여러개의 태그에 하나의 선언 적용</h3>
<h4>여러개의 태그에 하나의 선언 적용</h4>
<h5>여러개의 태그에 하나의 선언 적용</h5>
<!-- css를 따로 적용시키기 위한 테그, 크게 의미를 가지지 않음 -->
<span>여러개의 태그에 하나의 선언 적용</span>
</body>
</html>02id_class선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# id 선택자
- 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있음
- CSS 에서는 id 선택자 앞에 '#' 을 붙여 줌
# class 선택자
- 여러 요소 중 같은 이름을 갖는 요소들에게 속성을 부여할 수 있음
- 여러개의 요소에 같은 class 명을 부여
- CSS에서는 선택자 앞에 '.' 을 붙여줌
-->
<style type="text/css">
#select_1{
color: aquamarine;
}
#select_2{
color: lime;
text-align: center;
}
.title{
color: brown;
}
.type{
color: darkorchid;
}
p{
color: cyan;
}
h4.title{
color: blue;
}
.type{
color: gray;
font-weight: bold;
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<p id="select_1">#으로 시작해서 웹페이지에서 CSS로 꾸미고자 하는 id 선택</p>
<p id="select_2">#으로 시작해서 웹페이지에서 CSS로 꾸미고자 하는 id 선택</p>
<br>
<h2>class 선택자</h2>
<h3 class="title">난초</h3>
<h4 class="title">- 난초의 특성</h4>
<p>난초는 외떡잎 식물중에서 가장 진화한 식물</p>
<br>
<h4>- 난초의 종류</h4>
<p><span class="type">동양란</span>과 <span class="type">서양란</span>으로 구별하며...</p>
</body>
</html>03_하위 선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 하위 선택자
- 특정 태그 아래에 있는 태그를 선택할 때 사용
- 선택자 사이를 공백으로 구분
-->
<style type="text/css">
#header h2{
color: aqua;
}
#section h2{
color: brown;
}
#content p{
color: blueviolet;
}
body{
background-color: beige;
}
</style>
</head>
<body>
<h1>하위 선택자</h1>
<br>
<div id="header">
<h2>header</h2>
<div id="nav">
<h3>navifation</h3>
</div>
</div>
<br>
<div id="section">
<h2>section</h2>
<p>section area</p>
</div>
<br>
<h1>heading</h1>
<div id="content">
<p>문단 A</p>
<p>문단 B</p>
<div>
<p>문단 C</p>
</div>
</div>
<p>문단 D</p>
</body>
</html>04자식선택자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 자식 선택자
- 특정한 태그 아래에 있는 태그만을 선택할 때 사용
- 선택자A > 선택자B
-->
<style type="text/css">
#section > h3 {
color: red;
}
#section >ul > li {
color: blue;
}
#content > p {
color: gold;
}
</style>
</head>
<body>
<h1>자식 선택자</h1>
<div id="section">
<h3>음료</h3>
<ul>
<li>커피</li>
<li>주스</li>
<li>콜라</li>
</ul>
</div>
<br>
<h1>heading</h1>
<div id="content">
<p>문단 A</p>
<p>문단 B</p>
<div>
<p>문단 C</p>
</div>
</div>
<p>문단 D</p>
</body>
</html>
Fintech