Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
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
more
Archives
Today
Total
관리 메뉴

개발공부일지

HTML - Element와 속성 본문

Intro

HTML - Element와 속성

보람- 2023. 6. 14. 15:54

목차

1. <meta>

2. Element와 속성 ②
3. <form>

 

1. <meta>

 

- 브라우저에게 전달할 포맷, 검색엔진등의 정보들을 적어둔다

- <meta charset="UTF-8" /> : html 문서의 인코딩 방식(유니코드)
- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> : 화면상의 크기조절 설정

 

 

2. Element와 속성 ②

 

- <q></q> : 인용구로 " " 를 표현할때 사용

- <blockquote></blockquote> : 인용구

- 속성(Attribute) : 엘리먼트의 시작 부분 (여는 태그) 엘리먼트명 다음에 넣어 사용함

   → 대표적으로 id, class, style

 

- <a href=""></a> : 하이퍼링크로 설정할때 사용함 (필수속성으로 연결할 페이지 주소를 입력해야함)

  → 연결할 페이지를 새창으로 열고 싶다면 target="_blank"

 

- <img src="" alt=""> : 이미지를 넣을때 

- <video src=""> : 동영상을 넣을때 

- <audio src=""> : 음악을 넣을때

   → video와 audio 의 경우 속성으로 controls loop autoplay muted를 넣어 설정할수있음

         → 크롬에서 자동재생을 원한다면 autoplay, 그리고 muted를 같이 써야함 (정책상)

 

- <iframe> : 다른 웹페이지를 출력하고 싶을 때 사용 (유튜브 영상이나 PDF 출력할때)

 


3. <form>를 사용하여 회원가입 실습

- 사용자가 입력한 데이터를 서버에 보내는것 (action 안에 보통은 #을 입력함-관례)

- <input>태그안에 type, name, id를 지정 

- <label for=""></label> : input에서 지정한 id를 label for 값에 넣으면 커서가 input을 찾아감

- <select> 안에는 <option value="">를 넣어 사용자가 선택하도록 함 

- <checkbox> : 사용자가

- <radio> : 여러개중 하나만을 고를때 사용 (중복선택 X)

 

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원가입</title>
  </head>
  <body>
    <div id="root">
      <form action="#">
        <fieldset>
          <legend>필수 정보</legend>
          <input type="text" name="id" id="id" />
          <label for="id">아이디</label>
          <input type="password" name="pw" id="pw" />
        </fieldset>

        <input type="number" name="age" placeholder="나이" />
        <input type="email" name="email" id="email" placeholder="메일주소" />
        <input type="checkbox" id="married" />
        <label for="married">결혼유무</label>
        <input type="radio" name="gender" id="man" value="man" />
        <label for="man">남자</label>
        <input type="radio" name="gender" id="woman" value="woman" />
        <label for="woman">여자</label>
        <input type="date" name="birthday" id="birthday" />
        <label for="birthday">생일</label>
        <input type="color" name="color" id="color" />
        <textarea name="description" id="description" cols="30" rows="10" placeholder="자기소개"></textarea>
        <select name="like" id="like">
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="computer">컴퓨터</option>
          <option value="phone">스마트폰</option>
        </select>
        <button type="reset">reset</button>
       
        <button>보내기</button>
      </form>
      <label for="pw">비밀번호</label>
    </div>
  </body>
</html>

 

★ 오늘의 포인트와 남겨두기 ★

 

※ 저작권 주의 (폰트,사진 등등)

※ 언어포맷 (UTF-8, ANSI)

※ readme.md (github에 마크다운 활용)

※ 프로토콜

※ 포트 http 80, https 443, aws 22

※ 서버, 네트워크

    - 로컬→ 모뎀→ 스위치나 라우터→ 미국의 스위치나 라우더 → 데이터센터의 모뎀 → 서버컴퓨터로 들어간다

    - 외부로쓰는 ip 내부 ip 따로 존재한다

    - 도메인은 중복해서 쓸 수 없다


*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

'Intro' 카테고리의 다른 글

CSS 2 ( flex/grid/animation-transform,transition,keyframe /media query )  (0) 2023.06.16
CSS 1 (선택자/ display/ position/단위/색상)  (0) 2023.06.15
웹 브라우저와 HTML  (0) 2023.06.13
프로그래밍이란?  (0) 2023.06.12
'Intro' Related Articles more