| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- jquery
- rpa
- Database
- db
- React
- jsp
- string
- Oracle
- 문자열
- SpringBoot
- Uipath
- API
- JDBC
- 상속
- 배열
- Scanner
- git
- View
- spring
- Board
- 이클립스
- Eclipse
- Java
- mysql
- Thymeleaf
- 조건문
- Controller
- html
- MVC
- Array
- Today
- Total
유정잉
24일자 HTML < 기본 태그, Visual Studio Code > 본문
[ HTML 기본 태그 - 1 ]
태그 : 블록 태그와 인라인 태그로 구분
※ 블록 태그 : <p>, <h1>, <div>, <ul>
항상 새 라인에서 시작하여 출력
양 옆에 다른 콘텐츠 배치하지 않고 한 라인 독점 사용
가장 많이 사용되는 블록 태그 : <div>
※ 인라인 태그 : <strong>, <a>, <img>, <span>
블록 속에 삽입되어 블록의 일부로 출력
가장 많이 사용된 인라인 태그 : <span>
[ HTML 기본 태그 - 2 list ]
※ 3 가지 종류의 리스트
순서 있는 리스트(ordered list) - <ol></ol> || <ol type="A" start="3"></ol>
순서 없는 리스트(unordered list) - <ul></ul>
정의 리스트(definition list) - <dl></dl>
리스트 아이템 <li>…</li>
[ HTML 기본 태그 - 3 tabel ]
<tr>
<th> 사용시 글씨가 </th> <td>보다 조금 글씨가 좀 더 두꺼움 </td>
</tr>
[ HTML 기본 태그 - 4 하이퍼링크 ]
<a> 태그의 href 속성에 하이퍼링크 작성
※ 같은 웹 사이트에 있는 웹 페이지 연결
<a href=“http://www.naver.com”>클릭하면 원래 창에서 네이버로 이동</a>
※ 다른 웹 사이트의 웹 페이지 연결
<a href=“http://www.naver.com” target="blank">클릭하면 새창을 띄우며 네이버로 이동</a>
※ 이미지 하이퍼링크 만들기
<a href=“http://www.naver.com”> <img src=“naver.png” alt=“네이버사이트”> </a>
[ HTML 기본 태그 - 5 인라인 프레임 ]
※ 인라인 프레임 만들기 <iframe>
HTML 페이지 내에 HTML 페이지 삽입
예) 200x150 크기의 인라인 프레임에 iframe.html 출력
<iframe src="iframe1.html" width="200" height="150"> 브라우저는 iframe 태그를 지원하지 않습니다. </iframe>
<html>
<head><title>srcdoc 속성 활용</title></head>
<body> <h3>srcdoc에 HTML 문서 작성</h3>
<hr>
<iframe src="iframe1.html" width="200" height="80" srcdoc="<html><head></head>
<body>hello</body></html>" >
</iframe>
</body>
</html>
[ HTML 기본 태그 - 6 시멘틱 태그 ]
[ HTML 기본 태그 - 7 웹 폼 ]
※ 웹 폼 : 웹 페이지에서 사용자 입력을 받는 폼이다. 로그인, 등록, 검색, 예약, 쇼핑 등
※ 폼 요소 : 폼을 만드는 다양한 태그 <input>, <textarea>, <select> 등
※ name 속성 : 폼의 이름 지정
※ action 속성 : 폼 데이터를 처리할 웹 서버 응용프로그램의 이름이다. submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청한다. 웹 서버 응용프로그램은 Java, JSP, PHP, C/C++ 등 다양한 언어로 작성한다.
※ method 속성 : 폼 데이터를 웹 서버로 전송하는 형식이다. 대표적인 전송 방식 : GET, POST
<input type="text"> : 한 줄 짜리 입력 창
<input type="password"> : 암호 입력 창 사용자 입력 문자 대신 '*' 등 다른 글자로 출력
<textarea> : 여러 줄 입력 창
[ HTML 기본 태그 - 8 datalist ]
데이터 목록을 가진 텍스트 입력 창 <datalist>
[ HTML 기본 태그 - 9 텍스트/이미지 버튼 만들기 ]
<input type=“button|reset|submit|image” value=“버튼의 문자열”>
<button type=“button|reset|submit”>버튼의 문자열</button>
[ HTML 기본 태그 - 10 선택형 입력 : 체크박스와 라디오버튼 ]
※ 체크박스 만들기 : <input type="checkbox"> (복수선택가능)
※ 라디오버튼 만들기 : <input type=“radio”> ,name 속성값이 같은 라디오버튼들이 한개의 그룹형성(=복수선택불가능 )
※ button 만들기 : <input type="button">
※ value : 폼 요소가 선택된 상태일 때, 웹 서버에 전송되는 값
※ checked : 이 속성이 있으면, 초기에 선택 상태로 출력
[ HTML 기본 태그 - 11 선택형 입력 : 콤보 박스 select ]
드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식이다. <option> 태그로 항목 하나 표현
selected 넣은 option이 선택 되기 전에 떠 있는 글자임 ! 그래서 선택하기 전에 출력된 글자가 탕수육 !!
[ HTML 기본 태그 - 12 <label>로 폼 요소의 캡션 만들기 ]
<label> 태그로 캡션과 폼 요소를 한 단위로 묶음으면 캡션 텍스트를 명료하게 하는 장점이 있다.
선택형 요소에 <label> 태그 사용
캡션 텍스트나 이미지를 선택해도 폼 요소를 선택한 것으로 처리
<label> 태그가 <list>태그랑 같이 사용될 시 <li><label></label></li> 이것 처럼 <li>안에 들어가야 한다.
<label> 태그는 보통 입력 요소(예: input, textarea)와 연결하여 사용되며, 사용자가 입력 요소를 클릭할 때 해당 입력 요소에 포커스를 주는 등의 편의 기능을 제공한다. 그러나 <label> 태그는 일반적으로 리스트 요소(li, ol, ul) 내부에서 사용되지 않습니다. <label> 태그는 보통 입력 요소와 연결하여 사용되므로 입력 요소(input, textarea)의 내부에 배치됩니다. 따라서 <label> 태그를 리스트 요소(li) 내부에서 사용하는 것은 올바르지 않습니다.
HTML에서 label로 묶어주는 이유 !!!
Input이랑 label이랑 연결시킬수있음 label for값으로 input의 name값을 입력해주면 해당 label을 클릭하면 입력에맞는 input으로 자동으로 포커스가 가짐. id는 내가 마음대로 작성할 수 있음. 또한 id는 해당 html에서 유일하게 하나만 지정해야 함.
id 값이 뭔지를 입력하는게 <input id="id1">
id1값을 선택하면 연결되는게 <label for=id1">
어느 위치에 있던 for로 연결된 id 값인 input을 찾아서 거기로 포커스를 이동시켜 주는 역할
(포커스=입력칸에 깜빡깜빡거리는것)
[ HTML 기본 태그 - 13 HTML에서의 색 표현 ]
색 코드 - #rrggbb / rr은 빨간색, gg는 초록색, bb는 파란색 농도
<input type="color">
컬러 다이얼로그 출력, 사용자로부터 색 선택
사용 예 <input type="color" value="#00FF00"> 여기서 value는 초기 색을 나타냄
[ HTML 기본 태그 - 14 시간 정보 입력 폼 요소 ]
<input type="month|week|date|time|datetime-local">
value 값도 설정 가능 기본 초기에 출력되는 날짜를 뜻함
[ HTML 기본 태그 - 15 스핀버튼과 슬라이드 바로 편리한 숫자 입력 ]
- <input type=“number”> : 스핀버튼으로 정교한 값 입력
- <input type=“range”>: 슬라이드 바로 대략적인 값 입력
- min, max 값 지정 가
[ HTML 기본 태그 - 16 입력할 정보의 힌트 보여주기 ]
<placeholder=" "> 속성에 사용자가 입력할 데이터 힌트 주기
[ HTML 기본 태그 - 17 형식을 가진 텍스트 입력 ]
※ email 주소 입력 : <input type=“email”>
이메일 주소 입력: <input type="email" placeholder=“id@host"> <input type="submit" value="전송">
※ URL 입력 : <input type=“url”> , <input type=“url” placeholder=“http://”>
※ 전화번호 입력 : <input type=“tel”> , <input type=“tel” placeholder=“010-1234-5678”>
※ 검색어 입력 : <input type=“search”> , <input type=“search” placeholder="검색어">
[ HTML 기본 태그 - 18 details summary 태그 ]
[ HTML 기본 태그 - 19 태그 종류 ]
- h1~h6 문단 크기 별로 제목 달기
- p 단락 나누기
- br 새로운 줄로 넘어가기
- hr 수평선 긋기
- < < 부등호
- > > 부등호
- 빈칸
- © © 이니셜
- &phone ☎ 전화번호이모티콘
- &sung ♪ 노래모양
- pre 개발자의 포맷 그래도 출력, 원하는대로 출력 가능 br태그를 쓰지 않아도 문단 넘어감 대신 문자 크기가 조금 작음
- b 진하게, 중요하게
- strong 진하게, 중요하게
- em 강조
- i 이탤릭체
- del 삭제
- ins 추가
- 2 sup 3 윗첨자
- log sub 2 아랫첨자
- mark 하이라이트
- img 이미지 삽입 태그 (절대 경로로 삽입해야 함)
<img src="경로삽입" width="폭" height="높이" alt="사진없을 경우 출력되는 멘트 정하는 ">
- list
- ol 순서가 있는 리스트 orderd list
<ol type="a" start="3"> 으로 설정할시 (a b c) c.부터 시작함
- ul 순서가 없는 리스트 unorderd list
- dl 정의 리스트 definition list
- table
table border="1"(테두리 검정색 두께), cellspacing(테두리 흰색 두께), cellpadding(테이블 표 크기)
caption 테이블 표 제목 (테이블 위중간에 생성됨)
thead (테이블헤드 )
tr (테이블 헤드 내용 왼쪽에서부터 오른쪽 순서대로 입력 됨)
tbody (테이블바디)
td (테이블바디내용 왼쪽에서부터 오른쪽 순서대로 입력 됨)
- 웹 폼 : 웹 페이지에서 사용자 입력을 받는 폼, 로그인, 등록, 검색, 예약, 쇼핑 등
- 폼 요소 : 폼을 만드는 다양한 태그, <input>, <textarea>, <select> 등
- <td colspan="4"> 4개의 행 셀을 합치겠다는 의미
- <input type="text" placeholder="꼭 작성">
- <textarea cols="80" rows="10">
- <fieldset> </fieldset>
form 내부에서 관계된 요소들끼리 묶어주며 그룹화 하는데 그룹화 된 주위에 얇은 테두리를 이용하여 박스를 그린다.
주로 해당 그룹의 이름을 정할 수 있는 <legend>와 함께 쓰인다.
- <legend> </legend>
fieldset에 제목을 달아주는 역할을 한다.
이러한 폼 요소들의 그룹화는 스크립트에서 접근 시 보다 용이하게 만들어주며 사용자의 접근성 또한 높여준다.
- 시멘틱 태그
<header>, <section>, <article>, <footer>, <nav> 태그
위치와 색, 모양이 자동으로 결정되는 것이 아님, 개발자가 보기 편하게 그저 위치의 명칭(?)만 지정하는것 기능에 영향X
<header> : 페이지나 섹션의 머리말 표현, 페이지 제목, 페이지를 소개하는 간단한 설명
<nav> : 하이퍼링크들을 모아 놓은 특별한 섹션, 페이지 내 목차를 만드는 용도
<section> : 문서의 장(chapter, section) 혹은 절을 구성하는 역할, 일반 문서에 여러 장이 있듯이 웹 페이지에 여러 <section>가능, 헤딩 태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제 기입
<article> : 본문과 연관 있지만, 독립적인 콘텐츠를 담는 영역 혹은 보조 기사, 블로그글 , 댓글 등 기타 독립적인 내용<article>에 담는 내용이 많은 경우 여러 <section> 둘 수 있음
<aside> : 본문에서 약간 벗어난 노트나 팁 신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등 페이지의 오른쪽이나 왼쪽에 주로 배치
<footer> : 꼬리말 영역, 주로 저자나 저작권 정보
[ 복습 ]
<!DOCTYPE html>
<!-- 주석처리문 화면에 출력되지 않는다 -->
<html lang="en">
<head>
</head>
<body>
<h1>탐라국 입춘굿</h1>
<p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.</p>
제주에서 입춘은 새철 드는 날.<br>
신구간이 끝나 하늘의 1만8000신이 지상으로 내려와 새해 일들을 시작하는 때다.<p></p>
<p>자세한 정보 보기<p>
<h3>일정</h3>
<ol type="1">
<li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
<li>낭쉐코사 : 2/1(토)</li>
<li>거리굿 : 2/2(일)</li>
<li>열림굿 : 2/3(월)</li>
<li>입춘굿 : 2/4(화)</li>
</ol>
<h2>먹거리</h2>
<table>
<tr>
<th>입춘 천냥 국수</th>
<td>11:00 ~ 16:00</td>
<td>목관아 주차장</td>
</tr>
<tr>
<th>입춘 천냥 국수</th>
<td>11:00 ~ 16:00</td>
<td>목관아 주차장</td>
</tr>
<tr>
<th>입춘 천냥 국수</th>
<td>11:00 ~ 16:00</td>
<td>목관아 주차장</td>
</tr>
<tr>
<th>입춘 천냥 국수</th>
<td>11:00 ~ 16:00</td>
<td>목관아 주차장</td>
</tr>
</table>
</body>
</html>
<body>
<h1>레드향 주문하기</h1>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul>
<li><input type="checkbox" value="1">선물용 3kg <input type="number">개</li>
<li><input type="checkbox" value="2">선물용 5kg <input type="number">개</li>
<li><input type="checkbox" value="3">가정용 3kg <input type="number">개</li>
<li><input type="checkbox" value="4">가정용 5kg <input type="number">개</li>
</ul>
<p><b>포장 선택</b></p>
<ul>
<li><input type="radio" name="a" value="1">선물 포장</li>
<li><input type="radio" name="a" value="2">선물 포장 안 함</li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li>이름 <input type="text"></li>
<li>배송 주소 <input type="text"></li>
<li>메일 주소 <input type="email"></li>
<li>연락처 <input type="tel"></li>
</ul>
</fieldset>
</body>
<!DOCTYPE html>
<body>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label>
<select name="type">
<option value="1" selected>선물용 3kg</option>
<option value="2">선물용 5kg</option>
<option value="3">가정용 3kg</option>
<option value="3">가정용 5kg</option>
</select>
</label>
</fieldset>
</body>
</html>
<!DOCTYPE html>
<body>
<h1>프런트엔드 개발자 지원서</h1>
HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.
<hr>
<h3>개인정보</h3>
<ul>
<li>이름 <input type="text" placeholder="공백없이 입력하세요"></li>
<li>연락처 <input type="tel"></li>
</ul>
<h3>지원 분야</h3>
<ul>
<li><label for="job"><input type="radio" id="job" value="1" name="a">웹 퍼블리싱</label></li>
<li><label for="job2"><input type="radio" id="job2" value="2" name="a">웹 애플리케이션 개발</label></li>
<li><label for="job3"><input type="radio" id="job3" value="3" name="a">개발 환경 개선</label></li>
</ul>
<h3>지원 동기</h3>
<textarea cols="70" rows="5" placeholder="지원 동기를 간략히 써 주세요."></textarea><br>
<input type="submit" value="접수 하기">
<input type="reset" value="다시 쓰기">
</body>
</html>
<!DOCTYPE html>
<body>
<h1>성적</h1>
<hr>
<table border="1">
<caption>학생 성적 표</caption>
<tr>
<th>이름</th><th>영어</th><th>수학</th>
</tr>
<tr>
<td>홍길동</td><td>100</td><td>95</td>
</tr>
<tr>
<td>이길동</td><td>90</td><td>80</td>
</tr>
<tr>
<td>박길동</td><td>90</td><td>100</td>
</tr>
<tr>
<th>평균</th><th>93.3</th><th>91.6</th>
</tr>
</table>
<br><br>
<h1>버튼</h1>
<hr>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<br>
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<br><br>
<h3>로그인 폼</h3>
<hr>
<fieldset>
<legend>Login</legend>
Username <input type="text"> Password <input type="password">
</fieldset>
<br><br>
<h3>회원 정보를 입력해라.</h3>
<hr>
<fieldset>
<legend>회원정보</legend>
이메일: <input type="email"><br>
홈페이지: <input type="url"><br>
전화번호: <input type="tel">
</fieldset>
연락처: ☎010-1234-5678
</body>
</html>
<!DOCTYPE html>
<body>
<h1>회원 가입을 환영합니다</h1>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="id1">아이디</label>
<input type="text" id="id1" placeholder="4자 ~ 10자 사이, 공백없이">
</li>
<li>
<label for="id2">이메일</label>
<input type="email">
</li>
<li>
<label for="pw1">비밀번호</label>
<input type="password" id="pw1" placeholder="문자와 숫자, 특수 기호 포함">
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type="password" id="pw2">
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="a" value="1">메일 수신
<input type="radio" name="a" value="2" checked>메일 수신 안 함
</fieldset>
<input type="submit" value="가입 하기">
<input type="reset" value="취소">
</body>
</html>
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<h1>도형 서식 폼 만들기</h1>
<hr>
<form>
<fieldset>
<legend>도형 서식 입력</legend>
<ul>
<li>
<label>선 종류</label>
<select>
<option>실선</option>
<option>점선</option>
</select>
</li>
<li>
<label>선 두께</label>
<input type="number" min="1" max="10" />
<label>선 색</label>
<input type="color" />
</li>
<li>
<label>투명도(0~100):</label>
<input type="range" min="0" max="100" />
</li>
</ul>
</form>
</body>
</html>
[ 복습 - 실습 ]
구조와 내용 HTML
색상 및 모양 CSS
행동 및 응용 프로그램 JavaScript
[ VisualStudioCode Download ]
Download Visual Studio Code - Mac, Linux, Windows
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
[ VisualStudioCode Web 웹 생성 ]
[ File -> New Text File 만들고 -> Save As -> 문서에 저장 이름은 원하는거 이름.html 확장자 HTML로 저장 ]
[ File -> Preferences -> Extensions (확장프로그램 다운로드) ] -> live server
[ ! 엔터 -> 하면 밑에 코드 자동 생성 ]
head = <title> 태그는 항상 head에 써야함 !
body = 본문 화면 출력할 내용 저장
<!-- 주석 처리 -->
<!DOCTYPE html> // 시작
<html lang="en">
<head>
</head>
<body> // 본문
</body>
</html> // 끝
'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글
| 26일차 CSS [ 배치, 플렉스 박스 ] (0) | 2024.03.27 |
|---|---|
| 25일차 CSS [ 기본태그 ] (0) | 2024.03.26 |
| 23일차 JDBC [ DB MySQL과 eclipse 연동 ] (22일차와 연결해서 보기) (1) | 2024.03.22 |
| 22일차 MySQL [ DB 총정리, 면접 준비, 변수선언 set @, IF문, while문 ] (0) | 2024.03.21 |
| 21일차 Java [ 데이터베이스 입출력, DB MySQL과 eclipse 연결 ] (0) | 2024.03.20 |
