오늘의 코딩
(폴더: WebStandard01)
- 03/ anchor
- 웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 함
- ⭐⭐⭐⭐⭐#은 id, .은 class
- a href: <a> 태그의 href 속성은 링크된 페이지의 URL을 명시함 (≒ ul, li)
- 프로젝트에 많이 쓰임
<a href=“URL”>-
- menu:순서가 지정되지 않는 항목의 툴바와 같은 명령 목록를 나타냄
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 만들기</title>
</head>
<body>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.</p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li> <!-- #은 id, .은 class -->
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>#은 문서상의 Tag 속성중 id 의미</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<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>
</body>
</body>
</html>
- 03/imgshow
- 배운것: 이미지 사진 넣는법, 이미지 크기 줄이거나 늘여서 넣는 법
- alt
- <img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시함
- 이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공
- img alt()+ width:그림의 넓이, height:그림의 높이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>사려니 숲길</h1>
<img alt="사려니 숲길1" src="images/road.jpg">
<img alt="사려니 숲길1" width="250" heigth="90" src="images/road.jpg">
</body>
</html>
- 03/child
- 배운것: 이미지 넣는 법, 관련 자료 주소창 하이퍼링크 만드는 법, 새 윈도우 창 여는 링크 만드는 법
- blank: 새 윈도우 창을 열어서 웹페이지를 연다. 기존의 창은 그대로 남긴다
- self: 현재 윈도우창에 그대로 링크된 웹페이지를 연다(현재의 프레임)
- parent: 현재 프레임의 부모 부레임에서 새 웹페이지가 열림, 만약
ex) 어떤 창 A에서 창 B를 새로 열어도 창 B에서 _parent로 창을 열면 창 A에서 열리게 됨 - top: 최상위 프레임에서 열림. _parent와 비슷함. _parent는 바로 이전 창(부모창)에서 열리게 되면 _top은 최상위( 가장 최고 부모)창에서 열림
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="웹 디자인 입문" src="images\webd.png">
<br>
<br>
<p>HTML5 ․ CSS3 ․ jQuery로 웹 디자인 트렌드를 따라잡는 비법 대공개</p>
<p>취업용 포트폴리오에 바로 써먹을 수 있는<br>실전 웹 디자인 예제 수록</p>
<p> <a href="https://easyspub.co.kr/20_Menu/BookList/PUB">도서 상세 보기(현재 화면에 _self)</a></p>
<p> <a href="http://www.daum.net" target="_blank"> new window</a>
<p> <a hredf="http://www.naber.com" target="_parent"> the parent frameset</a>
<!--
_blank
새 윈도우 창을 열어서, 웹피이지를 엽니다
-->
<h2>코딩으로 만드는 웹 디자인</h2>
</body>
</html>
- 03/indexLink
- 배운것: 그림 설명처럼 그림 바로 아래에 글 넣는 법, 포털사이트 하이퍼링크 넣는 법, 줄바꾸는 법, 리스트 안에 리스트 넣는 법, 표 넣는 법, 표 테두리 색 변경법, 표 테두리 굵기 합치는 법,
- figure: 주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 태그
단순히 이미지나 사진, 도표, 코드 목록 또는 기타 관련 콘텐츠를 구성하는 태그만이 아님, 콘텐츠는 주변 콘텐츠의 이해를 돕기 위해 내용 흐름과 관련되어야 하지만 태그가 없더라도 주변의 흐름에 지장을 주지 않는 독립적인 콘텐츠이다. 즉, 주변 콘텐츠의 이해나 흐름과 관련된 이미지나 사진, 도표, 코드 목록 또는 기타 미디어 등의 독립된 콘텐츠이다. 여기서 독립적인 콘텐츠란 반드시 독립적인 별개의 콘텐츠'가 아닌, 주변 콘텐츠에서 이 <figure> 태그로 표현된 콘텐츠가 없어도 맥락의 흐름에 지장이 없이 이해나 흐름과 관련된 자체적인 콘텐츠를 의미한다 - figcaption: 그림에 대한 설명을 나타낼 때 사용함
오직 부모 요소인<figure> 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례을 나타내기 위해 사용하는 태그
선택적으로 사용할 수 있지만, 사용할 경우에는 <figure> 태그의 첫 번째 자식 요소나 마지막 자식 요소로만 사용되어야 함 - <br>: 텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타내는 태그
이 태그는 일반적으로 다음 텍스트를 새 줄로 시작함으로써 시, 주소, 코드 등에 표현할 때 유용 - <b></b>: bold, 글자를 굵게 표시하는 태그
- caption:표 제목
- thread: HTML 테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용한다
<!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>
<!-- 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 hredf="http://www.daum.net" target="_self">다음(self)</a></li>
</ul>
<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>
<thread>
<tr>
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>졸업구분</th>
</tr>
</thread>
<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>- 04/date01
- form action: 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시
- label: 사용자 인터페이스를 제공하는 컨트롤 요소들의 이름표(label, 레이블)를 나타내는 태그,
이 태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성, 편의성을 높이는 역할을 함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
<h3>조회기간 선택</h3>
<label><input type="text" id="sDate" ></label>
<label><input type="text" id="eDate"> </label>
</form>
</body>
</html>- 04/id_pw ⭐⭐⭐⭐⭐
- 배운것: id와 pw를 입력할 수 있는 창 만들기, id와 pw글씨색 변경법, 로그인 버튼 만드는 법과 누른 후 이동경로 정하는 법, 글씨 주위에 상자 만드는 법
- form
- 사용자가 입력한 내용들을 서버 쪽 프로그램으로 보내는 방법을 지정해줌
- 입력한 데이터를 서버로 전송한 뒤 전송한 데이터를 웹서버가 처리하여 결과에 따른 웹 페이지를 보여주게 만듬
- 기본형: <form [속성="속성 값"]> 여러 폼 요소</form>
- name: 폼의 이름을 지정하며, 한 문서 안에 여러 개의 <form>태그가 있을 경우 form들을 구분하기 위해 사용함
- action: <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정함
- target: <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정함
- value: <input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시함, value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용됨
- button, reset, submit : 버튼 내의 텍스트를 정의함
- hidden, password, text: 입력 필드의 초깃값을 정의함
- checkbox, image, radio: 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함
- fieldset: HTML 양식 속에서 그룹을 만들 수 있음
- disabled: <fieldset> 요소에 포함된 <form> 요소들이 비활성화됨을 명시함
- form(form id): <fieldset> 요소에 포함될 하나 이상의 <form> 요소를 명시함
- name: <fieldset> 요소의 이름을 명시함
- type=text: 값을 텍스트로 받겠다
- type=password: 나만 아는 값으로 받겠다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>필수(포도주)</title>
<style type="text/css">
label {
font-size: 20px
line-heightL 25px;
color: orange;
}
</style>
</head>
<body>
<form action="kkk.jsp">
<fieldset>
<label>아이디</label>
<input type="text" id="user_id" name="user_id">
<p>
<label>비밀번호: </label>
<input type="password" id="passwd" name="passwd">
<p>
<input type="submit" value="로그인">
</fieldset>
</form>
</body>
</html>- 04/ join
- list-style
- margin
- text-align
- float
- small style:
<!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: 120px;
text-align: left;
float: left;
}
</style>
</head>
<body>
<h1>회원 가입을 환영합니다</h1>
<ul>
<li>
<label>아이디:</label>
<input type="text" id="user_id" name="user_id" 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>
</body>
</html>
- 04/meter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
<label>점유율 0.8</label>
<meter value="0.8"></meter>
<!-- 전체 크키 1을 기준으로 0.8만큼 차지함 -->
</li>
<li>
<label>사용량 64%</label>
<meter min="0" max="100" value="64"></meter>
<!-- 전체 100 중에서 64만큼 차지함 -->
</li>
<li>
<label>트래픽 초과1</label>
<meter min="1024" max="10240" low="2040" high="8200" value="9216"></meter>
<meter min="1024" max="10240" low="2040" high="8200" value="6000"></meter>
<meter min="1024" max="10240" low="2040" high="8200" value="2000"></meter>
<!-- 전체 크기는 1024~10240까지인데 높다고 설정한
8200보다 현재 값 9216이 더 큽니다 -->
</li>
<li>
<label>적절한 트래픽</label>
<meter value="0.5" optimum="0.8"></meter>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정함 -->
</li>
</ul>
</body>
</html>
- 04/radio_check ⭐⭐⭐
- checkbox: 복수 선택가능한 화면을 만들때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* { /* body 대신 *도 가능! */
background-color: #FFE08C;
/* body 밑의 background 색을 넣으면 전체 색이 변함 */
}
form fieldset {
margin-bottom: 25px; /* 박스끼리의 공간 만들기 */
}
form legend {
font-size: 20px; /* legend(박스제목)글자 크기만 변경 */
font-weight: 600; /* weight:폰트 두께를 키워줌 */
}
form label.reg { /* 정해진 label(여기서는 선택지)의 폰트 설정만 변경 */
font-size: 12px;
margin-right: 10px;
color: #390;
font-weight: bold;
width: 110px;
float: left;
text-align: center /* 글 정렬 위치 */
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
<label class="reg"><input type="radio" name="subject" value="speaking">회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writting">작문</label>
<input type="radio" name="subject" value="sing">가창
<!-- <label>을 쓰는 이유는 디자인을 위해서 -->
</fieldset>
<fieldset>
<legend>메일링</legend>
<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing3" value="pops">모닝 팝스</label>
</fieldset>
</form>
</body>
</html>- 04/select01
<!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; /* div값 메인에서 띄워놓기 */
}
form legend {
font-size: 15px;
font-weight: 600;
}
.reg {
font-size: 14px;
width: 90px;
color: #339900;
float: left;
font-weight: bold;
text-align: right;
margin-right: 10px;
}
form ul li {
list-style: none;
margin: 15px 10px 5px;
/* margin: 15px 10px; 작은 수부터 시계방향으로 적용되며 상하,좌우가 같은 값을 가짐
margin: 15px; 모든 칸 적용 */
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="machanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer"selected>컴퓨터공학과</option>
<!-- selected: 처음 화면 고정값 -->
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
<div>헿헿헿</div>
</form>
</body>
</html>- 04/order01
- placeholder
- required
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="kkk.jsp">
<div class="container">
<h1>상품 주문서</h1>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="uname" class="title">이름</label>
<input type="text" id="name" 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>
<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>
</form>
</body>
</html>
- 05/cascading1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
font-style: italic; /* 글자 스타일 */
color: blue; /* 글자색 */
}
</style>
</head>
<body>
<h1>세계 3대 미항</h1>
<img src="images/rio.png" alt="브라질 리우데자네이루">
<p> 시드니(Sydney), 호주</p>
<p> 리우데자네이르(Rio de Janeiro), 브라질</p>
<p> 나폴리(Naples), 이탈리아</p>
</body>
</html>- 05/cascading2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1{
color: blue; /* 글자색 */
}
#habor {
border: 1px dashed gray; /* dashed:점선 */
padding: 10px;
}
.heading {
color:red; /* 글자색 */
}
</style>
</head>
<body>
<h1 class="heading" id="habor">세계 3대 미항</h1>
<img src="images/rio.png" alt="브라질 리우데자네이루">
<p> 시드니(Sydney), 호주</p>
<p> 리우데자네이르(Rio de Janeiro), 브라질</p>
<p> 나폴리(Naples), 이탈리아</p>
</body>
</html>- class_selector
수업교재
03-1) 이미지
03-2) 링크 만들기
- href태그
- anchor태그
04-1) 폼
- 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
04-2)<input>태그
- hidden
- text
- password
- date
- checkbox:
- radio
- file
- submit
- reset
- button
- number
- type = “submit”
type=“reset” - ⭐⭐⭐ required
- select
- optgroup: 여러 항목의 그룹을 묶을 때 사용, label 속성을 사용해 그룹 제목을 붙임
- button
05-1) 스타일과 시트
- ㅇㅇ
- 인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
05-2) 주요 선택자
- 클래스(class) 선택자와 id 선택자
- 공통점: 요소으 특정 부분에만 스타일 적용
- 차이점:
- 클래스 선택자: 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의
- id 선택자: 문서 안에서 한 번만 사용한다면 id 선택자로 정의. 파운드(#) 다음에 지정
05-3) 캐스태이딩 스타일시트 CSS)
인터렉티브 웹페이지] 1장~3장 (p17~p72)
오늘의 숙제
- class_selector( 조건):
- HW01
p -> 글자 크기 12px , 왼쪽 마진 여백 20px
bluetext -> 글자색(blue)
<!DOCTYPE html>
<!-- HW01
p -> 글자 크기 12px , 왼쪽 마진 여백 20px
bluetext -> 글자색(blue)
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
font-size: 12px;
margin-left: 20px;
}
.bluetext{
color: blue;
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2 class="bluetext">블루베리와 항산화 효능</class>
<p class="bluetext">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터
(the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다. </p>
<h2>블루베리와 노화</h2>
<p> USDA 인류 영양 연구센터 (the USDA Human Nutrition Research Center)
실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써
노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.</p>
</body>
</html>'JSP > HTML' 카테고리의 다른 글
| 2024_06_18_화 (0) | 2024.06.18 |
|---|---|
| 2024_06_17_월 (0) | 2024.06.17 |
| 2024_06_13_목 (0) | 2024.06.13 |
