| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
Tags
- console창
- DataGrip
- Visual Studio Code
- jupyter
- error 해결
- 오류
- github token
- clone
- database
- run sql script
- PHPStorm
- 깃 토큰
- 클론
- OrCAD 다운로드
- Python
- import data
- localhost
- 에러
- 파이썬
- 데이터베이스
- error
- MySQL
- vscode
- github clone
- 따옴표 삭제
- php
- 단축키
- cmd
- csv
- visualstudio code
Archives
- Today
- Total
개발 노트
8/24 3, 4단원 html 태그들 본문
[3장]
일반적으로 본문 작성은 p태그, 줄바꿈은 br태그 사용
GIF, JPG/JPEG, PNG 특징
img 태그
figure, figcaption 태그
figcaption : 이미지 밑에서 이미지 설명
a 태그, href 속성 (중요 : 별 3개 프로젝트 할 때 많이 씀)
특히 href, target, rel을 많이 쓴다.
(중요 : 체크표시 해두기) blank와 self 많이 씀.
svg이미지는 확대축소해도 이미지가 손상되지 않는다.
indexLink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,th,td {
border : 1px solid purple;
border-collapse: collapse;
}
th,td {
padding: 15px;
}
</style>
</head>
<body>
<figure>
<img src="images/pf.png" alt="">
<figcaption>오늘은 남은 인생이 시작되는 첫째날</figcaption>
</figure>
<h1>홍길동</h1>
<p>이메일 : kkk@gmail.com</p>
<h2>Who I am?</h2>
<p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심을 가지고 있습니다.
<br>정보처리기사로 활동 중이며, </br> 제주의 한
시골 마을에서 코딩 중입니다.</p>
<h2>SNS</h2>
<ul>
<li><a href="http://www.naver.com" target="_blank">네이버(blank)</a></li>
<li><a href="http://www.daum.net" target="_self">다음(self)</a></li>
</ul>
<hr>
<h2>Skills</h2>
<ul>
<li>
사용 언어
<ul>
<li><mark>HTML</mark></li>
<li><mark>CSS</mark></li>
<li>Javascript</li>
<li>Spring</li>
</ul>
</li>
<li>
사용 툴
<ul>
<li>eclipse</li>
<li>oracle</li>
<li><b>STS</b></li>
</ul>
</li>
</ul>
<h2>Academic</h2>
<table >
<caption>학력 사항</caption>
<thead>
<tr>
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>졸업구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>ㅇㅇㅇ고등학교</td>
<td> (해당사항 없음)</td>
<td>2001.3 ~ 2004.2</td>
<td>졸업</td>
</tr>
<tr>
<td>ㅁㅁ대학교</td>
<td>컴퓨터공학</td>
<td>2004.3 ~ 2008.2</td>
<td>졸업</td>
</tr>
</tbody>
</table>
</body>
</html>_blank는 새로운 탭을 열어준다.
_self는 내 페이지에서 이동하는 것이다.
출력 결과
img2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>추천 관광지</title>
</head>
<body>
<h1>사려니 숲길</h1>
<img src="images/road.jpg" alt="사려니 숲길1">
<img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">
</body>
</html>출력 결과
anchor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<u1 id ="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</u1>
<h2 id="content1">내용1</h2>
<p>#은 문서상의 Tag 속성중 id 의미</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>한 페이지 또는 다른 페이지의 링크로 이동할 수 있다.
a태그에서 #은 아이디를 말한다. .은 클라스를 말한다. a태그는 주소와 비슷한 느낌. 웬만하면 각자 다른 이름으로 지정하기. 링크를 누르면 href에서 id 위치로 이동함.(중요 : 알아두기)
메뉴1을 누르면 내용1로 움직이고 메뉴로 를 누르면 메뉴1로 움직인다.
출력 결과
child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background-color: #FAECC5;
}
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<img src="images\webd.png" alt="두잇, 프런트엔드 웹 디자인 입문">
<br><br>
<h2>코딩으로 만드는 웹 디자인</h2>
<p>HTML5 ․ CSS3 ․ jQuery로 웹 디자인 트렌드를 따라잡는 비법 대공개</p>
<p>취업용 포트폴리오에 바로 써먹을 수 있는<br> 실전 웹 디자인 예제 수록</p>
<p><a href="http://easyspub.co.kr/20_Menu/BookView/65">도서 상세 보기(현재 화면에 _self)</a></p>
<p><a href="http://easyspub.co.kr/20_Menu/BookView/65" target="_top">도서 상세 보기(전체 화면에)</a></p>
<p><a href="http://www.daum.net" target="_blank"> new window</a></p>
<p><a href="http://www.naver.com" target="_parent"> the parent frameset</a></p>
</body>
</html>float : 이미지를 왼쪽에 붙혀서 오른쪽에 글자 올 수 있게 하는 것
margin-right: 20px; : 오른쪽에 20px정도는 공간을 빈공간으로 두겠단 것
_blank : 새 윈도우 창을 열어서, 웹페이지를 연다. 기존의 창은 그대로 남김.
_self : 현재 윈도우창에 그대로, 링크된 웹페이지를 연다. (현재의 프레임)
_parent : 현재 프레임의 부모 프레임에서 새웹페이지가 열린다. 만약 어떤 창 A에서 창 B를 새로 열었다면 창 B에서 _parent로 창을 열었을 때 창 A에서 열리게 됨.
_top : 최상위 프레임에서 열린다. _parent와 비슷. _parent는 바로 이전창(부모창)에서 열리는 반면 _top은 최상위( 가장 최고 부모)창에서 열림.
출력 결과
[04단원]
hidden, text, password, datetime, date, checkbox, radio, file, submit, reset, button (중요 : 체크해두기)
(중요 : 별표)
*checkbox 하나 이상 선택임
(중요 : 별표 3개)
select1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background-color: #FFE08C;
}
form fieldset {
margin-bottom: 20px;
}
form legend {
font-size: 15px;
font-weight: 600;
}
.reg {
font-size: 14px;
width: 110px;
color: #339900;
font-weight: bold;
float: left;
text-align: right;
margin-right: 10px;
}
form ul li {
list-style: none;
margin: 15px 10px 5px;
font-size: 14px;
}
</style>
</head>
<body>
<h1>여름방학 특강 신청</h1>
<form action="">
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
<label class="reg" for="id">학번</label>
<input type="text" id="id">
</li>
<li>
<label class="reg" for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label class="reg">***학과***</label>
<select id="class" name="class">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
</form>
</body>
</html><label class="reg" for="id">학번</label> : id를 학번이라고 하고 이걸 한 라벨이라고 묶은 것임. id를 위한 라벨.
<select id="class" name="class">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
...
</select>
여기에서 만약 기계공학과를 선택한다면 mechanic이라는 값이 name="class"의 class로 들어가는 것이다.
.reg { } : 점이 class를 뜻하므로 class가 reg라고 되어있는 부분.
text-align: right; : 텍스트 균형을 오른쪽으로 정렬
margin-right: 10px; 오른쪽에 공간 10px 주는 것.
list-style: none; 을 하면 list의 점이 없어진다. 이 외에도 다른 모양으로 설정할 수 있다.
margin: 15px 10px 5px;
값을 이렇게 3개 넣으면 순서대로 위, 오른쪽, 아래에 해당값으로 빈공간이 넣어진다.
두개면 순서대로 상하 / 좌우에 넣어진다.
한개면 모든 곳에 빈공간이 넣어진다.
출력 결과
id_pw.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
label {
font-size: 18px;
line-height: 25px;
color: orange;
}
</style>
</head>
<body>
<form action="kkk.jsp">
<fieldset>
<label>아이디:</label>
<input type="text" id="user_id" name="user_id">
<label>비밀번호: </label>
<input type="password" id="passwd" name="passwd">
<input type="submit" value="로그인">
</fieldset>
</form>
</body>
</html>kkk.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>id_pw Call 응답 PGM</h1>
</body>
</html>
type="password" 로 하면 입력해도 화면에는 보이지 않게 된다.
출력 결과
join.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
list-style: none;
}
li {
margin: 10px;
}
label {
width : 100px;
text-align: right;
float: left;
}
</style>
</head>
<body>
<h1>회원 가입을 환영합니다</h1>
<form action="">
<ul>
<li><label>아이디:</label>
<input type="text" id="user_id" size="10" minlength="4" maxlength="15">
<small style="color:red;"> 4~15자리 이내의 영문과 숫자</small>
</li>
<li><label>이메일:</label> <input type="email" id="user_email"></li>
<li><label>비밀번호:</label><input type="password" id="user_pwd"></li>
<li><label>비밀번호 확인:</label><input type="password" id="check_pwd"></li>
<li><input type="submit" value="회원가입"></li>
</ul>
</form>
</body>
</html>
출력 결과
order_result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container {
width:600px;
margin:0 auto;
}
ul { /* 순서없는 목록에 적용할 스타일 */
list-style-type: none; /* 불릿 없앰 */
}
label.title { /* class=title인 label에 적용할 스타일 */
font-weight: bold; /* 굵은 글자 */
width: 80px; /* 너비 80px */
float: left; /* 왼쪽부터 배치 */
}
div.centered { /* class=centered인 div에 적용할 스타일 */
text-align: center; /* 가운데 정렬 */
}
fieldset { /* 필드셋에 적용할 스타일*/
margin: 15px 10px; /* 상하 마진 15xp, 좌우 마진 10px */
}
fieldset legend { /* 필드셋의 제목 */
font-weight: bold; /* 굵은 글자 */
font-size: 18px; /* 글자 크기 18px */
color: purple; /* 글자색 자주 */
}
ul li { /* 목록의 각 항목 */
margin-bottom: 10px; /* 아래 마진 10px */
}
</style>
</head>
<body>
<div class="container">
<h1>상품 주문서</h1>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="uname" class="title">이름</label>
<input type="text" id="uname" placeholder="여백없이 입력" required>
</li>
<li>
<label for="tel1" class="title">연락처</label>
<input type="tel" id="tel1" placeholder="연락가능한 번호">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
<label for="addr" class="title">주소</label>
<input type="text" size="40" id="addr" required>
</li>
<li>
<label for="tel2" class="title">전화번호</label>
<input type="tel" id="tel2" required>
</li>
<li>
<label for="comment" class="title">메 모</label>
<textarea cols="40" rows="3" id="comment"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<ul>
<li>
<label><input type="checkbox">과테말라 안티구아 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">인도네시아 만델링 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">탐라는도다(블렌딩) (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
</ul>
</fieldset>
<div class="centered">
<input type="submit" value="주문하기">
<input type="reset" value="다시 작성">
</div>
</div>
</body>
</html>placeholder : 입력하는 칸에 들어가는 도움말 역할
required : 내용을 입력하지 않고 제출버튼을 누르면 하단 모습이 뜨고 제출되지 않는다.
div : 단위 자체로 디자인을 주고 싶을 때 사용
width:600px; : 창을 늘려도 너비를 600으로 유지해준다.
fieldset : 한 묶음
legend : 그 묶음의 제목
checkbox : 동시에 여러개를 선택할 수 있다. (배열처럼 값을 여러개를 넘겨줄 수 있음)
type="number" value="0" min="0" max="5" :
출력 결과
반응형
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20 > 웹표준 기술' 카테고리의 다른 글
| 8/30 html layout 참조 사이트, var, let, const, boolean, eval (0) | 2022.09.05 |
|---|---|
| 8/29 속성 선택자, 가상 클래스 (0) | 2022.09.02 |
| 8/26 rgb/rgba 표기법, 블록, 인라인 레벨 요소, 박스모델, layout, float, 시맨틱 태그 (0) | 2022.09.01 |
| 8/25 css, class 선택자, id 선택자, 박스모델 (0) | 2022.08.31 |
| 8/23 tomcat 설치, html 태그, utf-8 설정 (0) | 2022.08.25 |
'프로젝트 기반 JAVA 응용 SW개발 : 22.07.19~23.01.20/웹표준 기술' Related Articles
more
