티스토리 뷰
1. 폼양식
- 사용자가 각종 정보를 입력 시 사용하는 입력창, 선택버튼 등을 의미한다.
- 1 ) 텍스트 입력창
- : 사용자가 텍스트를 입력하는 폼 양식으로, <form>태그로 폼 양식 삽입
- 2 ) 라디오 버튼
- : 원형의 선택 폼 양식으로, 여러 항목 중 단 하나만 선택하게 한다.
- 3 ) 체크 박스
- : 사각형의 선택 폼 양식으로, 다수 항목을 선택할 수 있다.
- 4 ) 첨부파일
- : input태그의 type 속성명을 file로 지정한다.
- 모든 전송(요청) 파라미터의 “이름=값”에서, 값은 무조건 문자열로 서버에 전송된다.
- 값이 없는 전송 파라미터는 설령 이름이 있더라도 서버에 전송되지 않는다.
2. CSS란
- CSS란 웹페이지에서 HTML이 만든 요소들을 스타일하는 것이다.
- style시트의 위치에 따라서 1. Internal(내부) 2. Inner 3. External(외부)로 구분할 수 있다.
- (1) Inner Stylesheet : 특정 태그에 직접 스타일 적용
- (2) Internal Stylesheet : HTML 파일 안에 style태그에서 스타일 적용
- (3) External Stylesheet : *.css 외부파일로 빼서, HTML파일에 스타일 적용
- CSS 선언 블록이란 선택자 { 스타일 속성1 : 속성값1; }를 의미한다.
1. 테이블 행 / 열 병합 (**)
<!DOCTYPE html>
<html lang="Ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 행 / 열 병합</title>
<style>
table,
tr,
th,
td{
border: solid 1px rgb(255, 150, 150);
/* solid는 실선이라는 의미이다. */
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<h3>일기예보</h3>
<table>
<thead>
<tr>
<th rowspan="2">지역</th>
<th colspan="2">27일(목)</th>
<th colspan="2">28일(금)</th>
<th colspan="2">29일(토)</th>
<!-- rowspan은 행(가로)을 합치는데 사용하고, colspan은 열(세로)을 합치는데 사용한다. -->
<!-- 테이블을 생성할 때에는 병합이 이루어지는 행을 먼저 작성하는 편이 좋다. -->
</tr>
<tr>
<td>오전</td>
<td>오후</td>
<td>오전</td>
<td>오후</td>
<td>오전</td>
<td>오후</td>
<!-- td가 6개인 이유는 위에는 rowspan이 일어났기 때문이다. -->
</tr>
</thead>
<tbody>
<tr>
<td>서울<br>경기도</td>
<td><img src='./img/shine.png'></td>
<td><img src='./img/shine.png'></td>
<td><img src='./img/shine.png'></td>
<td><img src='./img/rain.png'></td>
<td><img src='./img/rain.png'></td>
<td><img src='./img/rain.png'></td>
</tr>
<tr>
<td>제주도</td>
<td><img src='./img/shine.png' alt=""></td>
<td><img src='./img/shine.png'></td>
<td><img src='./img/shine.png'></td>
<td><img src='./img/rain.png'></td>
<td><img src='./img/rain.png'></td>
<td><img src='./img/rain.png'></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
[ 출력 결과 ]
일기예보
| 지역 | 27일(목) | 28일(금) | 29일(토) | |||
|---|---|---|---|---|---|---|
| 오전 | 오후 | 오전 | 오후 | 오전 | 오후 | |
| 서울 경기도 |
 |
|
|
 |
|
|
| 제주도 | |
|
|
|
|
|
2. 폼 양식 생성 (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 양식 테스트(***)</title>
</head>
<body>
<h2>아이디 생성(***)</h2>
<form>
<!-- 1. 텍스트와 비밀번호 생성 -->
아이디 : <input type='text' name="id"> <br>
<!-- <br>태그는 엔터키를 누르는 것과 동일한 기능을 해준다. -->
비밀번호 : <input type='password' name="pw"> <br>
<!-- <input type='password'>는 입력받은 값을 보이지 않도록 해준다. -->
<!-- 이렇게 입력받은 데이터를 백엔드쪽으로 전송해야 하는데, 이때 이름을 붙이지 않으면 어떤 데이터인지 모르기 때문에 -->
<!-- 전송 파라미터에서는 꼭 name을 통해 이름을 지어줘야 한다. (***) -->
<!-- form>imput*2를 작성하게 되면, 자동으로 form태그 아래에 input을 2개 생성해 준다. -->
<p></p>
<!-- 2. 라디오 버튼 생성 -->
정보공개 : <input type="radio" name="isPublic" value="1" checked> 공개 <input type="radio" name="isPublic" value="2"> 비공개 <br>
<!-- 라디오 버튼은 단 하나만 선택할 수 있다. -->
<p></p>
<!-- 3. 체크박스 생성 -->
취 미
<input type="checkbox" name="hobby" value="1"> 탁구
<input type="checkbox" name="hobby" value="2"> 배드민턴
<input type="checkbox" name="hobby" value="3" checked> 음악감상
<input type="checkbox" name="hobby" value="4" checked> 악기연주
<input type="checkbox" name="hobby" value="5" checked> 영화감상
<!-- checked는 기본적으로 화면을 띄웠을 때, 체크되어 있는 항목을 이야기 한다. -->
<!-- 체크박스는 N개 이상 선택할 수 있는데, 이때 하나도 선택하지 않고 데이터를 전송할 경우 데이터가 전송되지 않는다. -->
<!-- value 속성을 통해서 선택된 값이 무엇인지 알려줘야 한다. -->
<!-- name과 value가 쌍으로 전송되게 된다. (**) (ex. hobby = 1 이렇게 전송이 된다.) -->
<!-- 4. 줄바꾸기 -->
<p></p>
<!-- br태그도 많아 사용하지만 p태그를 활용해 줄 바꾸기를 할 수도 있다. -->
<!-- 5. 데이터 전송 버튼 생성 -->
<input type="submit" value="전송">
<!-- input:타입명을 하면 자동으로 생성해 준다. -->
<!-- 6. 리셋 버튼 생성 -->
<input type="reset" value="초기화"> <br>
<!-- 이때 value는 버튼의 이름을 지정해 준다. -->
<!-- reset은 현재 작성했던 내용을 전부 초기화해준다. -->
</form>
<!-- form 태그는 블록(인라인 블록) 요소이다. -->
<h2>파일 첨부(***)</h2>
<form action="" method="POST" enctype="multipart/form-data">
<!-- action에는 서버의 주소를 작성해야 한다. (ex.action ="http://localhost:8080") -->
<p></p>
<!-- 7. 파일 첨부 -->
파일 첨부 : <input type="file" name="portfolio">
<!-- 파일첨부의 경우 파일이 그대로 백엔드에 날라가기에 value를 할 필요가 없다. -->
<!-- file은 form 태그에서 설정하는 것이 필요하다. -->
<p></p>
<input type="submit" value="파일첨부">
<input type="reset" value="재선택">
</form>
<!-- 값이 없는 전송 파라미터는 설령 이름이 있더라도 서버로 전송되지 않는다.(값이 없기에) -->
</body>
</html>
[ 출력 결과 ]
아이디 생성(***)
파일 첨부(***)
3. 선택박스 생성 (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택박스 생성</title>
</head>
<body>
<h2>선택박스 생성</h2>
<form action="http://localhost:8080" method="post">
이메일 : <input type="text" name="e-mailId"> @
<!-- 선택박스를 생성하는 것은 select, 항목은 option이 생성한다. (***) -->
<select name="emailAddr">
<option value="0">선택</option>
<option value="1">naver.com</option>
<option value="2">hanmail.net</option>
<option value="3">gmail.com</option>
<option value="4">직접입력</option>
</select>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="재작성">
</form>
<p></p>
<h3> 선택박스 생성은 select가 하고, 항목은 option을 통해서 생성한다. </h3>
<!-- PS > nc -L -p 8080를 통해서 데이터를 전송할 수 있다. -->
</body>
</html>
[ 출력 결과 ]
선택박스 생성
선택박스 생성은 select가 하고, 항목은 option을 통해서 생성한다.
4. ALL HTML5 FORM 연습 (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전송 파라미터 연습</title>
</head>
<body>
<h2>ALL HTML5 FORMS</h2>
<form>
1. Search : <input type="search" name="search"><br>
<!-- input:search는 검색어를 검색할 때 사용한다. -->
<!-- input:search는 작성한 내용을 한번에 삭제하는 x가 나타나게 된다. (이는 브라우저에 따라서 다르다.) -->
<!-- 컨트롤 + i 버튼을 누르면, 자동으로 부모 렙퍼를 생성해 준다. -->
2. Tel : <input type="tel" name="telno" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="000-0000-0000"><br>
<!-- input:tel은 겉으로는 text와 별 차이는 없어 보이지만, pattern을 통해서 표현식을 지정해줄 수 있다. -->
<!-- 하지만, 지정한 표현식이 아닌 다른 방식으로 작성하는 것을 막을 수는 없기에 placeholder를 통해 예시를 표현할 수는 있다. -->
<!-- placeholder은 작성을 시작하게 되면 없어지게 된다. -->
<!-- input:tel에 강제가 없는 이유는, 각 나라마다 번호 양식이 다르기 때문이다. -->
<!-- 단, submit버튼을 눌렀을 때, 잘못된 형식이라고 경고를 줄 수는 있다.(**) -->
3. URL : <input type="url" name="url"><br>
<!-- input:url도 각자 다른 형태로 되어있기에, 다른 형태로 입력했을 때 막아주는 강제성을 지니지는 못한다. -->
<!-- 단, submit버튼을 눌렀을 때, 잘못된 형식이라고 경고를 줄 수는 있다.(**) -->
4. email : <input type="email" name="email"><br>
<!-- input:email도 작성했을 때에는 막지 못하지만, submit버튼을 눌렀을때 @가 들어가 있는지와 @뒤에 문자가 있는지는 확인해 준다.(*) -->
5. date : <input type="date" name="today"><br>
<!-- input:date는 달력표시를 하여, 연도 / 월 / 일을 선택할 수 있도록 해준다. -->
6. month : <input type="month" name="month"><br>
<!-- input:month는 몇 년도 몇 월을 선택할 수 있게 해준다. -->
7. week : <input type="week" name="week"><br>
<!-- input:week는 몇 년도 몇 월 몇 번째 주를 선택할 수 있게 해준다. -->
8. time : <input type="time" name="time"><br>
<!-- input:time은 오전/ 오후 몇시 몇 분을 선택할 수 있도록 해준다. -->
9. datetime-local : <input type="datetime-local" name="local_dt"><br>
<!-- input:datetime-local은 현재 내가 있는 타임존에 맞게 시간을 보여주고 선택하게 해준다. -->
10. number : <input type="number" name="num" min="0" max="9"><br>
<!-- input:number은 순수한 숫자만 입력하게 해준다. -->
<!-- 최소값과 최대값을 선택할 수 있다. -->
11. range(1-20) : <input type="range" name="num2" min="1" max="20" value="15"><br>
<!-- 범위를 이용해서 값을 선택할 수 있으며, value를 통해서 처음 페이지를 봤을때의 설정값을 설정할 수 있다. -->
12. color : <input type="color" name="mycolor"><br>
<!-- input:color은 색을 선택할 수 있게 해준다. -->
13. image : <input type="image" src="./img/shine.png" alt="" height="16" width="16"><br>
<!-- input:image는 해당 이미지를 나타나게 해주는 것인데, submit을 누르면 이미지가 전송되게 된다. -->
<!-- height와 width를 통해서 이미지의 사이즈를 지정해줄 수 있다. -->
14. textarea : <textarea name="review" id="" cols="30" rows="1" maxlength="10"></textarea><br>
<!-- textarea는 input태그가 아니라, 별도의 태그로 구성되어 있다. -->
<!-- cols와 rows를 통해서 기본 텍스트 사이즈를 지정할 수 있지만, 페이지에서 텍스트 사이즈를 조정할 수도 있다. -->
<!-- maxlength를 통해서 글자수를 제한할 수도 있다. -->
<!-- 한국어로도(다국어로도) 10문자가 들어갈 수 있다. -->
15. fieldset : <fieldset>
<legend>Sign-In</legend>
<!-- legend는 필드의 이름을 작성해 준다. -->
ID : <input type="text" name="loginID" maxlength="10"><br>
Password : <input type="password" name="loginPW" maxlength="10">
</fieldset><br>
<!-- fieldset도 input태그가 아니라, 별도의 태그로 구성되어 있다. -->
<!-- fieldset은 하나의 필드로 묶어주는 역할을 한다. -->
16. datalist : <datalist id="web">
<option value="Edge"></option>
<option value="FireFox"></option>
<option value="Chrome"></option>
</datalist>
Your web browser : <input list="web" name="browser"> <br>
<!-- datalist는 input list에서 사용할 수 있는 목록들을 생성해 준다. -->
<p></p>
<input type="submit" value="전송">
<input type="reset" value="재작성">
</form>
<p></p>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
17. output : <input type="range" name="num3" id="a" value="50"> +
<input type="number" name="num4" id="b" value="20"> =
<output name="result" for="a b"></output>
<!-- output태그는 연산의 결과를 보여준다. -->
<!-- oninput는 입력이 발생했을 때, 이러한 결과를 나타내라는 것이다. -->
</form>
18. progress : <progress name="prog" value="32" max="100">32%</progress><br>
<!-- 진행 전도를 보여주는데, 최대 100에서 32만큼의 진행률을 막대 그래프로 보여준다. -->
19. meter : <meter name="measured" value="4" min="0" max="10">4</meter>
<!-- 정해진 범위 내에서 측정값을 보여준다. -->
</body>
</html>
[ 출력 결과 ]
ALL HTML5 FORMS
18. progress :19. meter :
5. CSS3 연습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 연습</title>
<style>
h3{
color: rgba(255, 0, 0, 0.466);
}
/* H3태그를 찾아서 이러한 스타일을 씌워라 */
p{
color: rgba(0, 0, 255, 0.274);
}
/* p태그를 찾아서 이러한 스타일을 씌워라 */
/* CSS 선언 블록이란? */
/* 선택자 { 스타일 속성1 : 속성값1; } */
</style>
</head>
<body>
<h3>여행의 어원</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi necessitatibus quo atque rem impedit expedita est tempora,
architecto similique voluptatibus totam dolores esse veritatis qui quisquam nobis nihil earum!</p>
</body>
</html>
[ 출력 결과 ]
여행의 어원
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, commodi necessitatibus quo atque rem impedit expedita est tempora, architecto similique voluptatibus totam dolores esse veritatis qui quisquam nobis nihil earum!
6. CSS3 연습 2 - span
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 연습2</title>
<style>
h2{
color: rgb(0, 99, 99);
text-shadow: 2px 2px 5px grey;
/* text-shadow는 글자 뒤에 그림자가 생기게 해준다. */
/* 첫번째(가로)와 두번재(세로) px는 그림자의 위치를 지정해주고, 세번째 px는 그림자의 흐리기 정도 이다. */
}
p{
color: rgb(92, 161, 138);
font-size: 18px;
/* 표준 글자 크기는 16px이다. */
font-family: '바탕';
/* 글자 폰트를 '바탕'체로 지정해 주었다. */
line-height: 150%;
/* 문장 사이의 높이를 지정해 주었다. (기본값은 100%(또는 1)이다.) */
}
span{
font-weight: bold;
/* 글자의 굵기를 굵게 설정하였다. */
color: brown;
text-decoration: underline;
/* 밑줄이 그어지도록 하였다. */
/* 모르는 것이 있다면, W3 School에 찾아가서 검색해 보는 것이 좋다.(***) */
}
</style>
<!-- Internal Stylesheet에 해당한다. -->
</head>
<body>
<h2>세렝게티 국립공원</h2>
<p><span>span 태그는 입니다!</span> ipsum dolor sit amet, consectetur adipisicing elit.
Dolorum expedita sapiente nobis vel maiores, tempore, unde architecto commodi quisquam doloribus rerum optio?
Magni magnam tenetur perspiciatis, <span>span 태그는 여기에도 사용할 수 있어요!</span> fugiat ullam architecto.</p>
<!-- span태그는 공간을 분리하는 태그로, 인라인 요소이기에 크게 차이가 나지는 않지만 태그 안에 있는 내용을 자신 안으로 그룹핑한다. -->
</body>
</html>
[ 출력 결과 ]
세렝게티 국립공원
span 태그는 입니다! ipsum dolor sit amet, consectetur adipisicing elit. Dolorum expedita sapiente nobis vel maiores, tempore, unde architecto commodi quisquam doloribus rerum optio? Magni magnam tenetur perspiciatis, span 태그는 여기에도 사용할 수 있어요! fugiat ullam architecto.
7. 목록의 글머리 모양 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록의 글머리 바꾸기</title>
<style>
li{
list-style-type: square;
}
/* 목록으 글머리가 기본값으로 동그라미로 지정되어 있으나, Internal StyleSheet를 통해 사각형으로 바꾸었다. */
</style>
</head>
<body>
<h3>축제명 : 제주 마을박람회 축제</h3>
<ul>
<li>일시 : 2018년 9월 중</li>
<li>장소 : 월대천 및 외도동 일대</li>
<li>주요 프로그램 : 어린이 사생대회, 뜸돌들기, 은어 낚시, 그림 그리기, 소원 빌기</li>
</ul>
</body>
</html>
[ 출력 결과 ]
축제명 : 제주 마을박람회 축제
- 일시 : 2018년 9월 중
- 장소 : 월대천 및 외도동 일대
- 주요 프로그램 : 어린이 사생대회, 뜸돌들기, 은어 낚시, 그림 그리기, 소원 빌기
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 57일차 - CSS 기본 다지기3 (0) | 2022.05.18 |
|---|---|
| KH 56일차 - CSS 기본 다지기 2 (***) (0) | 2022.05.17 |
| KH 54일차 - HTML5 (***) (0) | 2022.05.13 |
| KH 53일차 - INDEX (***) / 사용자 관리 (0) | 2022.05.12 |
| KH 52일차 - View (0) | 2022.05.11 |
댓글