HTML Day-4

이강민·2021년 10월 17일
0

HTML+CSS

목록 보기
4/28
post-thumbnail

책갈피

<a>태그의 name 속성 또는 특정 태그의 id속성을 이용하여 책갈피 기능을 활용할 수 있다.
<a href = "#test">텍스트</a>
....
a 태그는 name 속성을 넣을 수 있다.
#test가 가르키는 주소를 만들자
<a name = "test">도착</a>
또한 <a>태그 외에는 id를 부여해야 한다.
<p id = "test">도착</p>

로렘 입숨.
디자인을 위한 문구로 아무런 뜻이 없는 문구임

iframe(아이프레임)

inline frame의 약자.
iframe을 이용하면 웹페이지 안에 또 다른 웹페이지를 삽입 할 수 있음. 

//사용 방법.
<iframe src = "삽입할 페이지 주소 또는 문서위치"style="css스타일코드"></iframe>

3번째 시간에서 보충 공부로 <a>태그에서 하이퍼레퍼렌스를 적용할 때 페이지를 연결하는 것을 배웠고 페이지 연결 속성의 target에 대해서도 배웠다.
아이프레임은 내가 원하는 사이트 안에서 간단한 사이트를 보여주고 싶을 때 보여 줄 수 있다. 

<p>
  <iframe name="if" width="100%" height="800px" style="border: 3px dashed red;"></iframe>
</p>

위와 같이 코드를 작성하면 너비는 100%, 높이는 800px만큼 출력하고 style의 border속성을 적용하여 테두리를 만들었다.
a태그와 마찬가지로 고유 값인 name 속성을 적용할 수 있다.

form(폼)

웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
사용자가 입력한 데이터를 서버로 보낼 때 form요소를 사용

  • action 속성
    - 서버로 데이터를 전송할 때 '목적지' 역할(back단에서 처리)
  • method 속성
    - 데이터의 전송방법을 설정 역할
<form action = "데이터를 보낼 목적지" method="데이터 전송 방식">여러 입력 내용</form>
  • method 설정
    - get : URL에 데이터를 저장하여 전송하는 방식
    - post : body에 데이터를 저장하여 전송하는 방식

input(입력상자)

<input type="입력형식">
  • type속성
    - text : 문자를 입력받는 글상자
    - password : 비벌번호를 입력받는 글상자(텍스트 내용이 표기되지 않음) 패스워들 보는 방법은 password 속성을 text로 바꾸는 것임.
    - radio : 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있는 동그란 버튼, redio는 그룹을 맺기 위해 name속성의 값이 동일해야 한다.
    - checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력 받을 수 있도록 하는 네모난 버튼
    - file : 원하는 파일을 서버로 전송하기 위한 상자
    - button : 이벤트가 없는 일반 버튼
    - reset : 입력받은 데이터를 초기화 하는 버튼
    - submit : 입력받은 데이터를 서버에 제출하는 버튼, 속해있는 form의 action속성에 설정한 곳으로 데이터를 전송
    - email : 이메일을 입력받는 글상자(@필요)
    - url : 웹사이트를 입력받는 글상자(http부터 시작된 url)
    - tel : 전화번호를 입력받는 글상자
    - date : 원하는 날짜를 입력받는 글상자
    - number : 원하는 숫자를 입력받는 글상자
    - color : 원하는 색상을 입력받는 요소
    선택한 색상은 16진수 RGB컬러 값으로 전달
    16진수 : 0 1 2 3 4 5 6 7 8 9 A B C D E F
    Red Green Blue
    #00 00 00 -> 검정색
    #FF FF FF -> 흰색
    - search : 검색어를 입력받는 글상자
    - range : 일정 범위안에 값만을 입력받는 조절바

fieldset(그룹)

폼 요소를 그룹으로 묶을 때 사용

제목 
<fieldset>
	그룹으로 묶을 input들.
</fieldset>

그룹제목 만들기 

<fieldset>
  <legend>제목</legend>
</fieldset>

label(라벨)

input에 이름을 붙이는 태그
label 요소와 다른 input요소를 연결하면 그 input영역이 넒어짐.
radio, checkbox의 스타일 설정

텍스트

<label>텍스트<input></label>

select, option(선택상자)

여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 입력받을 수 있음.
<option>요소를 통해 선택할 수 있는 아이템을 설정

펼처보기 여기에 값을 입력 
<select>
  <option value = "실제 값">펼처보기</option>
  <option value = "실제 값">여기에</option>
  <option value = "실제 값">값을 입력</option>
</select>

datalist 데이터 목록

미리 지정된 옵션 목록을 보여줌
특정 글자를 입력하면 해당하는 지정된 글자를 미리 보여줄 때 사용
input에 datalist를 연결해야한다.

HTML css Javascript jQuery React node.js 
<input type="text" list="language" placeholder="입력">
<datalist id="language">
       <option value="client">HTML</option>
       <option value="client">css</option>
       <option value="client">Javascript</option>
       <option value="client">jQuery</option>
       <option value="client">React</option>
       <option value="server" label="PHP"></option>
       <option value="server">node.js</option>
 </datalist>

<input> 속성들

  • size
    - 크기를 설정하는 속성
  • maxlength
    - 값의 최대 길이를 설정하는 속성
  • placeholder
    - 입력 전 특정 데이터를 입력하도록 유도, 안내하는 값
  • checked
    - 여러개의 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정
  • readonly
    - 데이터를 볼 수 있으나 수정할 수 없게하는 설정
  • value
    - 입력되는 값 혹은 미리 세팅되어 있는 값 설정
  • disabled
    - 입력필드를 사용할 수 없게 설정
  • required
    - 데이터를 필수로 입력하도록 하는 옵션
  • name
    - 요소의 이름을 설정
    - 서버에 전달되 값을 받을 때 찾는 키로 사용
  • id
    - 요소의 유일한 이름을 설정
    - HTML문서에서 해당요소의 스타일을 주거나 동적인 작동을 할 때 사용
  • class
    - 여러 요소를 가져올 때 사용 그 외 id와 같음

favicon(파비콘)

Favorites Icon의 줄임말
웹 브라우저 주소창 옆에 작은 아이콘으로 표기
16 * 16 픽셀이 기본 규격

 <head>
     <link rel="icon" href ="파일경로">
 </head>

회원가입 양식 만들기

회원가입

회원가입

필수입력
아이디
비밀번호
비밀번호확인
추가입력
이름
성별 남자 여자
휴대전화
이메일
주민등록번호
주소
상세주소
취미 책 읽기
프로그래밍언어 공부
일
등산
수영

코드보기

위와 같은 폼을 만들기 위해서 table태그를 활용하여 양식을 정렬하였으며 form의 action은 가입완료 메시지를 가져오는 것을 표현하기 위해 html을 연결 하였다.
블로그에서는 html 연결 css의 표현이 힘드니 아래의 링크로 확인.
회원가입 양식 보러가기

 <!DOCTYPE html>
<html lang="en">
<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">
    <link rel="styleSheet" href="./style.css">
    <link rel="icon" href="./form.ico">
    <title>회원가입</title>
</head>
<body>
    <h2 style="text-align: center;">회원가입</h2>
    <!-- 회원가입 폼 만들기 -->
    <!-- 아이디, 비밀번호, 비밀번호 확인, 이름, 핸드폰, 이메일, 성별, 취미(5개) , 주민등록번호, 검증버튼, 우편번호, 주소, 상세주소, 참고항목 , 가입완료, 다시작성-->
<div class="box">
<form action="./5_가입결과.html">
   <fieldset style="width : 500px;">
       <legend>필수입력</legend>
    <table>
        <tr>
            <td>
                <label for="ID">아이디</label>
            </td>
            <td>
                <input id="ID" type="text" placeholder="아이디를 입력하세요" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="password1">비밀번호</label>
            </td>
            <td>
                <input id="password1" type="password" placeholder="비밀번호 입력" required>
            </td>
        </tr>
        <tr>
            <td>
                <label for="password2">비밀번호확인</label>
            </td>
            <td>
                <input id="password2" type="password" placeholder="비밀번호 확인" required>
            </td>
        </tr>
    </table>
   </fieldset>
   <fieldset style="width: 500px;">
    <legend>추가입력</legend>
    <table>
        <tr>
            <td>
                <label for="name">이름</label>
            </td>
            <td>
                <input id="name" type="text" placeholder="이름을 입력하세요">
            </td>
        </tr>
        <tr>
            <td>
                <label>성별</label>
            </td>
            <td>
                <label><input type="radio" name="성별" value="male"> 남자</label>
                <label><input type="radio" name="성별" value="female"> 여자</label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="phone">휴대전화</label>
            </td>
            <td>
                <input id="phone" type="tel" placeholder="'-'없이 입력">
            </td>
        </tr>
        <tr>
            <td>
                <label for="mail">이메일</label>
            </td>
            <td>
                <input id="mail" type="email" placeholder="이메일주소">
            </td>
        </tr>
        <tr>
            <td>
                <label for="citizenNumber">주민등록번호</label>
            </td>
            <td>
                <input id="citizenNumber" type="tel" placeholder="주민등록 앞자리 7자리">
            </td>     
        </tr>
        <tr>
            <td>
                <label for="adress">주소</label>
            </td>
            <td>
                <input id="adress" type="adress" placeholder="주소를 입력해주세요">
            </td>          
        </tr>
        <tr>
            <td>
                <label for="detailAdress">상세주소</label>
            </td>
            <td>
                <input id="detailAdress" type="adress" placeholder="상세주소를 입력해주세요">
            </td>          
        </tr>
    </table>
   </fieldset>
    <fieldset class="hobby" style="width: 500px;">
        <legend>취미</legend>
        <input type="checkbox"> 책 읽기<br>
        <input type="checkbox"> 프로그래밍언어 공부<br>
        <input type="checkbox"> 일<br>
        <input type="checkbox"> 등산<br>
        <input type="checkbox"> 수영<br>
    </fieldset>
    <div class="btn">
        <input type="reset" value="다시작성">
        <input type="submit" onclick="test()" value="가입하기">
    </div>
</form>
<script type="text/javascript">
     function test() {
      let p1 = document.getElementById('password1').value;
      let p2 = document.getElementById('password2').value;
        if(p1.length < 6){
            alert('비밀번호는 6자 이상입니다.')
        }
          if( p1 != p2 ) {
            alert("비밀번호 불일치");
            return false;
          } else{
            alert("비밀번호가 일치합니다");
            return true;
          }
    }
</script>
</div>
</body>
</html>
profile
이강민
AllTimeDevelop
이전 포스트

HTML Day-3

다음 포스트

CSS Day-1

0개의 댓글