[새싹(SeSAC) 프론트엔드] day07 221025 수업 복습
목록 태그(List)
- 순서 있는 리스트 (ordered list)
<ol></ol>
- 순서 없는 리스트 (unordered list)
<ul></ul>
- 정의 리스트 (definition list) ; 잘 안 쓰임
<dl></dl>
- 아이템
<li> .. </li>
** </li> 생략 가능
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>리스트-1</title>
<style></style>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr />
<!-- 타입 지정을 안하면 기본값 : 1,2,3... -->
<ol type="A">
<li>물을 끓인다</li>
<li>라면과 스프를 넣는다</li>
<li>파를 썰어 넣는다</li>
<li>5분 후 먹는다</li>
</ol>
</body>
</html>
[결과]
* ol 태그 사용시 타입(type)을 별도로 지정해주지않으면 기본값인 1,2,3...으로 나옴
- ul은 따로 타입지정이 없음
사용 가능한 타입은 1, A, a, I, I
정의 리스트
용어와 설명을 하나의 아이템으로 나열하는 리스트
용어 : <dt>
설명 : <dd>
</dt>, </dd> 생략가능 (</li>처럼)
(*)실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>정의 리스트</title>
<style></style>
</head>
<body>
<h3>웹 브라우저 종류</h3>
<hr />
<dl>
<dt><b>Internet Explorer</b></dt>
<dd>
마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용
</dd>
<dt><b>Firefox</b></dt>
<dd>Mozilla 재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도</dd>
<dt><b>Chrome</b></dt>
<dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용</dd>
</dl>
</body>
</html>
[결과]
리스트 꾸미기
** 속성은 ul 영역에 작성
| property | 설명 |
| list-style-type | 아이템 마커 타입 지정 |
| list-style-image | 아이템 마커 이미지 지정 |
| list-style-position | 아이템 마저의 출력 위치 지정 |
| list-style | 단축 속성 |
* 아이템 마커 : list 앞에 붙는 구분점 (아래 사진의 빨간색 원안의 점)
*마커 종류
list-style-image : 사용자가 이미지 마커 작성 가능
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>리스트 꾸미기</title>
<style>
ul {
background: goldenrod;
padding: 10px 10px 10px 50px;
/* list-style 은 !!ul!!에 작성 */
list-style-position: inside;
list-style-type: square;
list-style-image: url("/mark.jpeg");
}
ul li {
background: greenyellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>커피메뉴</h3>
<hr />
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
</body>
</html>
[결과]
(*) list-style-image의 사이즈를 조정하고 싶다면
https://jsfiddle.net/u1em6xfn/1/
Example - JSFiddle - Code Playground
jsfiddle.net
1. list-style 은 none으로 두기
2. li에 background이미지로 넣고 싶은 마커를 넣고 사이즈를 조정
(*) 위의 코드 참고하여 만들어보기
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>리스트 꾸미기</title>
<style>
ul {
background: goldenrod;
padding: 10px 10px 10px 50px;
/* list-style 은 !!ul!!에 작성 */
list-style-position: inside;
list-style-type: square;
list-style-type: none !important;
/* list-style-image: url("/mark.jpeg"); */
}
ul li {
background: greenyellow;
margin-bottom: 10px;
background-image: url("/mark.jpeg");
background-size: contain;
background-repeat: no-repeat;
padding-left: 30px;
}
</style>
</head>
<body>
<h3>커피메뉴</h3>
<hr />
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
</body>
</html>
[결과]
내비게이션바
; 웹사이트의 메뉴로 주로 <a>를 사용하여 생성
종류 : 수직 / 수평
수평메뉴를 만드는 방법
1. <li>태그를 display:inline
2. <li>태그를 float:left
**ul의 li안에 또다시 ul써서 중첩 목록 생성도 가능함
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내비게이션바</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
background: pink;
overflow: hidden;
}
li{
/* width: 150px; */
/* display: inline; */
width: 100px;
text-align: center;
/* margin-right: 40px; */
float: left;
}
li a{
color: black;
text-decoration: none;
}
ul#second{
float: right;
}
</style>
</head>
<body>
<h1>링크를 사용한 수직메뉴</h1>
<hr>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<ul id="second">
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</ul>
</body>
</html>
[결과]
폼태그
웹 폼
: 웹페이지에서 사용자의 입력을 받는 폼
ex) 로그인, 등록, 검색, 예약, 쇼핑 등
폼 요소 : <input>, <textarea>, <select> 등
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>form 태그</title>
<style></style>
</head>
<body>
<h3>로그인 폼</h3>
<hr />
<form name="fo" method="get">
사용자 ID : <input type="text" size="15" value="" /><br />
비밀 번호 : <input type="password" size="15" value="" />
<input type="submit" value="완료" />
</form>
</body>
</html>
[결과]
action
➡️ 데이터를 처리할 주소
: 폼 데이터를 처리할 웹 서버 응용프로그램의 이름
submit 버튼을 누르면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청
웹 서버 응용프로그램은 java, JSP, PHP, C/C++ 등 다양한 언어로 작성
method
: 폼 데이터를 웹 서버로 전송하는 형식
인터넷 브라우저 주소창 끝부분
- get : 주소창에 내가 전송한 데이터가 노출됨 - 노출되어도 되는 데이터라도 길이가 길다면 post사용해주기
ex. 게시글 작성번호
- post : 데이터를 전송해도 주소창에 노출되지 않음 (보완중요!)
ex.로그인과 같이 보안이 중요한 항목, 넘겨지는 데이터 양이 많은 경우
(*) 실습 - 네이버 검색 사례로 폼 전송 과정 이해
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>form이용해보기</title>
<style></style>
</head>
<body>
<h3>네이버 검색해보기</h3>
<hr />
<form
name="naver"
action="https://search.naver.com/search.naver "
method="get"
>
검색창 : <input type="text" name="query" /><br />
<input type="submit" value="검색" />
</form>
</body>
</html>
[결과]
➡️ 중간 '?' 는 자동으로 생성됨
(*) 폼 요소의 종류
** <input type="image">
:단순 이미지가 아니라 이미지 '버튼'
+ 기본적으로 submit 기능을 가짐
➡️ ⭐️⭐️ 이미지 버튼을 만들 때는 <button> 태그로 만들기
| name | 요소이름 |
| maxlength | 최대 개수 |
| size | 문자개수 |
| value | 초기텍스트 |
<textarea>는 여러줄 텍스트용
| cols (텍스트 입력창 크기 - 세로) | 열 개수 |
| rows (텍스트 입력창 크기 - 가로) | 행 개수 |
| name | 요소이름 |
| wrap (자동 줄바꿈) | off / hard / soft |
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>textarea 활용하기</title>
<style></style>
</head>
<body>
<h3>자기 소개서 작성</h3>
<hr />
<form action="get">
이름 : <input type="text" value="" /> <br />
암호 : <input type="password" value="" maxlength="4" /> <br />
자소서 : <textarea clols="20" rows="5"></textarea>
</form>
</body>
</html>
[결과]
<datalist> : 거의 안씀
: 목록 리스트를 작성하는 태그
<option>태그로 항목 하나를 표현
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>datalist</title>
<style></style>
</head>
<body>
<form>
나라 : <input type="text" list="countries" />
<datalist id="countries">
<option value="가나"></option>
<option value="스위스"></option>
<option value="브라질"></option>
</datalist>
</form>
</body>
</html>
[결과]
버튼 만들기
input이나 button ; 선호도 차이에 따라 사용
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>button 만들기</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr />
<form action="">
검색: <input type="text" size="10" value="" />
<input type="button" value="Q1" />
<button type="button">Q2</button><br />
submit 버튼 : <input type="submit" value="전송1" />
<button type="submit">전송2</button><br />
reset 버튼 : <input type="reset" value="리셋1" />
<button type="reset">리셋2</button><br />
이미지 버튼 :
<input type="image" src="/mark.jpeg" alt="image button" width="30px" />
<button type="button">
<img src="/mark.jpeg" alt="이미지버튼" width="30px" />
</button>
</form>
</body>
</html>
[결과]
체크박스와 라디오버튼
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>체크박스</title>
<style></style>
</head>
<body>
<h3>먹고 싶은 것 모두 체크하세요</h3>
<hr />
<form action="">
<!-- 전송되는 값은 'value에 있는 값'이 넘어감 -->
짜장면 <input type="checkbox" value="1" /> 짬뽕
<input type="checkbox" value="2" checked /> 탕수육
<input type="checkbox" value="3" />
</form>
</body>
</html>
[결과]
라디오 : 전체 보기 중에 하나만 선택할 수 있음
➡️ name 값이 같은 라디오 버튼 중 하나만 선택 가능 / name 값으로 안 묶어주면 개별 선택
; 동일한 형식으로 checkbox 에 적용해봐도 여전히 다중선택 가능함
콤보박스
<select>
- 드롭다운 리스트에 목록 출력
- 목록을 선택하는 입력 방식
<option> 태그로 항목 하나를 표현
* multiple : 다중 선택
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>콤보박스</title>
<style></style>
</head>
<body>
<h3>먹고 싶은 음식은?</h3>
<hr />
<form action="">
<select name="lunch" id="">
<option value="1">짜장면</option>
<option value="2" selected>짬뽕</option>
<option value="3">탕수육</option>
</select>
</form>
</body>
</html>
[결과]
**selected 가 된 값이 디폴트 값으로 보임
캡션
- <label> 로 이용해서 만듦
label 이 있으면 좀 더 사용자 친화적이고, 없어도 형태는 똑같이 띄워줄 수 있음
fieldset
: 요소와 연관된 그룹을 하나로 만들 때 사용
(*) 실습
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>fieldset</title>
<style>
fieldset {
padding: 30px 30px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>로그인 정보</legend>
1. 아이디 <input type="text" value="" /><br />
2. 비밀번호 <input type="password" value="" /><br />
3. 비밀번호 확인 <input type="text" value="" /><br />
4. 회원등급 <input type="text" value="" placeholder="준회원" />
</fieldset>
<fieldset>
<legend>개인정보</legend>
1. 이름
<input type="text" value="" placeholder="5자미만 공백없이" /><br />
2. 메일 주소
<input type="text" value="" placeholder="abcd@domain.com" /><br />
3. 연락처 <input type="text" value="" />
</fieldset>
</form>
</body>
</html>
[결과]
폼 꾸미기
| disabled | readonly |
| 값 수정 불가 | |
| 값이 서버로 전송 안됨 | 값이 서버로 전송됨 |
(*) 꾸며보기
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>폼 꾸미기</title>
<style>
form {
background: papayawhip;
}
input[type="text"],
input[type="email"] {
color: red;
margin: 10px;
}
input[type="text"]:focus,
input[type="email"]:focus {
font-size: 120%;
}
textarea {
margin: 10px;
}
input:hover,
textarea:hover {
background: aliceblue;
}
label {
display: block;
padding: 12px;
}
label span {
float: left;
width: 90px;
text-align: right;
padding: 10px;
}
.div2 {
overflow: hidden;
}
.btn {
float: right;
}
</style>
</head>
<body>
<h3>Contact us</h3>
<hr />
<form action="">
<label for="">
<span> Name </span>
<input type="text" /></label
><br />
<label for="">
<span> Email </span>
<input type="email" placeholder="mail@naver.com"
/></label>
<br />
<label>
<span> Comment </span>
<textarea
cols="50"
rows="5"
placeholder="메시지를 남겨주세요"
></textarea>
</label>
<div class="div2">
<input type="submit" value="submit" class="btn" />
</div>
</form>
</body>
</html>
[결과]
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅(화)