학습내용
html 양식, 양식 속성, 입력 유형, 입력 속성, 입력 양식 속성
참고 사이트
w3스쿨즈 https://www.w3schools.com/html/html_colors.asp
HTML Colors
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
코드
(1) input, class, id
기본 선택자: 태그(태그명), 클래스(.클래스명), 아이디(#아이디명)
ctrl+/ : 설명, 주석
헤드에 스타일 넣기 <style>{태그/클래스/아이디}</style>
입력 <input>
제출-원하는 문구 <input type="submit" value="원하는 문구">
패스워드 입력 <input type="password">
택1<input type="radio" name="abcd">
중복체크<input type="checkbox">
체크한 상태를 디폴트 값으로 하려면 checked
선택 <select> <option>
창에 문구 떠 있게 하려면 placeholder
텍스트 창 <textarea> cols="x", rows="y"
우선순위: 제일 가까운 것이 우선순위가 제일 높다.
out.css 우선순위가 제일 낮고, 가까이 있는 것이 높음.
tag < class < id
<!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>
input{
background: lightgray;
}
h2{
color: blue;
}
body{
background: yellow;
color: darkblue;
}
.login{
background: blue;
font-weight: bold;
color: white;
}
.member{
background: pink;
}
#find {
background: gold;
color: red;
font-weight: bold;
font-style: italic;
}
#log{
background: violet;
color: green;
font-style: italic;
font-weight: bold;
}
/* 기본 선택자: 태그(태그명), 클래스(.클래스명), 아이디(#아이디명) */
</style>
</head>
<body>
<h2>검색할 단어를 입력하세요.</h2>
<hr color="red">
<!-- hr: 가로줄 -->
검색할 단어 <input type="text">
<input type="submit" value="검색시작" id="find">
<hr color="red">
<!-- ctrl+/ : 설명, 주석 -->
<h2>로그인 화면</h2>
아이디 <input type="text" class="login"><br>
패스워드 <input type="password" class="login"><br>
<input type="submit" value="로그인 처리" id="log">
<hr color="red">
<h2>회원가입 화면</h2>
가입할 id <input type="text" class="member"><br>
가입할 pw <input type="password"><br>
가입할 이름 <input type="text" class="member"><br>
성별 <input type="radio" name="gender" checked>남
<input type="radio" name="gender" >여
<br>
결혼여부 <input type="radio" name="m" checked>기혼
<input type="radio" name="m" >미혼
<br>
취미 <input type="checkbox" checked>달리기
<input type="checkbox" checked>동영상보기
<input type="checkbox" checked>인터넷서핑
<br>
전화번호 통신사 <select>
<option>SKT</option>
<option>LGT</option>
<option>KT</option>
<option selected>알뜰폰</option>
</select>
<input type="number" placeholder="-빼고 입력해 주세요."><br>
<hr>
하고 싶은 말 <textarea cols="30" rows="5" placeholder="100글자로 입력" style="background: lightgreen; color: red; font-weight: bold;"></textarea>
</body>
</html>
(2) input 연습문제
<!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>
<a href="https://map.naver.com/p/search/%ED%85%8C%EB%8B%88%EC%8A%A4/place/1288450301?placePath=?entry=pll&from=nx&fromNxList=true&c=15.00,0,0,0,dh">운동하는 사이트</a>
<center>
<h2>헬스 카페</h2>
<hr color="blue">
<img src="white-male-1856187_640.jpg" alt="" width="200" height="200"><br>
<hr color="blue">
<h2>회원가입</h2>
<table>
<tr>
<td align="center">이름</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="center">닉네임</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="center">목표 감량</td>
<td><input type="text" placeholder="kg"></td>
</tr>
</table>
운동 주로 하는 장소 <br>
<input type="radio" name="place" checked>공원
<input type="radio" name="place">헬스장
<input type="radio" name="place">집<br>
<input type="radio" name="place">기타
<input type="text" size="10"><br><br>
선호하는 운동복 색 <br>
<input type="checkbox" checked>빨강
<input type="checkbox" checked>검정
<input type="checkbox" checked>노랑 <br><br>
<font size="4">가맹지점</font>
<table>
<tr>
<td>
<li>강남</li><li>강북</li>
<li>부산</li><li>여수</li>
<li>광주</li><li>제주도</li>
</td>
</tr>
</table>
</center>
</body>
</html>
(3) div
구역 나누기 <div>
<!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>
#d1{
background: yellow;
width: 500px;
height: 200px;
}
#d2{
background: pink;
}
#d11{
background: red;
}
#d1 p {
color: lime;
}
#d2 > p {
color: lime;
}
</style>
</head>
<body>
<div id="d1">
<p>감자1</p>
<div id="d11">
<p>감자2</p>
<p>고구마</p>
</div>
</div>
<div id="d2">
<p>감자3</p>
<div id="d22">
<p>감자4</p>
<p>고구마</p>
</div>
</div>
</body>
</html>
(4) class, id 연습문제
<!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>
body{
background: yellow;
color: green;
}
h3{
height: 200px;
width: 300px;
border: 10px dotted;
background: red;
color: yellow;
}
li{
background: white;
color: blue;
}
.li3{
border: 20px solid;
}
#li1{
font-size: 100px;
color: green;
}
#li2{
background: gold;
color: lime;
}
</style>
</head>
<body>
<h3>가고 싶은 곳</h3>
<ul>
<li id="li1">신촌</li>
<li class="li3">강남</li>
<li class="li3">종로</li>
<li id="li2">노량진</li>
</ul>
</body>
</html>
'백엔드 개발자 취업캠프(Java) > 웹 시각화를 위한 html_CSS_script' 카테고리의 다른 글
| [5/5] script - jquery구문, 선택자, 이벤트 처리, 페이드, 슬라이드, 체이닝, restful service (0) | 2023.09.15 |
|---|---|
| [4/5] script 변수와 자료형, 연산, 조건&반복문, 함수, 내장함수, 이벤트 정의와 종류, 이벤트 연결 방법 (0) | 2023.09.15 |
| [3/5] css 선택기, 색상, 배경, 테두리, 여백, 패딩, 상자모델, 텍스트, 글꼴, 링크, 목록 (0) | 2023.09.15 |
| [1/5] html 소개 및 편집기, 기본요소, 속성, 제목, 스타일, 목록 (0) | 2023.09.15 |
