'Front-end/HTML' 카테고리의 글 목록

Front-end/HTML

[HTML] 로그인 화면 만들기 2022.11.18
[HTML] 기본 틀 2022.11.15

[HTML] 로그인 화면 만들기

2022. 11. 18. 18:03

1) HTML 기본 틀 작성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>로그인</title>
  </head>
  <body>
  </body>
</html>

2) <body> 내부에 로그인 폼 작성

<body>
    <form id="login">
      <ul>
        <li>
          <label for="id">아이디</label>
          <input type="text" id="id">
        </li>
        <li>
          <label for="pw">비밀번호</label>
          <input type="password" id="pw">
        </li>
        <input type="submit" value="로그인">
        <button onclick="location.href='sign.html'">회원가입</button>
      </ul>
    </form>
</body>

3) 결과

4) 전체 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>로그인</title>
    <style>
      ul {list-style:none;}
    </style>
  </head>
  <body>
    <form id="login">
      <ul>
        <li>
          <label for="id">아이디</label>
          <input type="text" id="id">
        </li>
        <li>
          <label for="pw">비밀번호</label>
          <input type="password" id="pw">
        </li>
        <input type="submit" value="로그인">
        <button onclick="location.href='sign.html'">회원가입</button>
      </ul>
    </form>
  </body>
</html>

저작자표시

'Front-end > HTML' 카테고리의 다른 글

[HTML] 기본 틀 (0)	2022.11.15

1. HTML의 기본틀

<!DOCTYPE>
<html lang="ko"> //문서 기본 언어
  <head>
    <title>제목</title>                                              // 문서의 제목(윈도우창 제목)
    <meta charset="UTF-8">                                    // 문서 인코딩 정보
    <meta name="author" content="저자이름">         // 문서 작성자
    <meta name="description" option="설명">          // 문서 설명
    <link rel="stylesheet" href="my-css-file.css">     // 문서 스타일 적용할 css파일
    <style>
      ...                                                                   // css파일 외에 직접 설정할 스타일
    </style>
    ...
  </head>
  <body>
    ...
  </body>
  <script src="my-js-file.js"></script>                    // JS파일을 직접 설정하여 적용 또는 script내에 써서 적용
  <footer>
    ...                                                                    // 문서 맨 아래에 쓸 정보
  </footer>
</html>

2. Body

// 01. <h>
<h1>메인제목</h1>
<h2>소제목</h2>
<h3>소제목의 소제목</h3>
...
<h6>제일 작은 제목</h6>
// 글씨 크기가 점점 작아짐

// 02. <p>
<p>단락</p>
<p title="단락제목, 단락에 마우스 오버시 툴팁 표시">단락</p>

// 03. <span>
<span style="font-size:32px, margin:21px">문장</span>
// <h>와 <p>는 각각 제목, 단락이라는 의미가 있지만
// span은 "이게 뭐다"라는 의미는 없음, 스타일 설정으로 제목이나 그냥 문장처럼 보일 수 있게 함

// 04. <br>
//한줄 띄우기

// 05. <ul> 또는 <ol>
<ul>
  <li>요소1</li>
  <li>요소2</li>
  <li>...</li>
  <li>요소n</li>
</ul>
// ul: 순서가 없는 리스트(글머리 표시가 ○, ■ 등 일반 기호)
// ol: 순서가 있는 리스트(글머리 표시가 1,2,3 또는 a,b,c 등 순서가 있는 문자)

// 06. 강조
<em></em>            // Italic체(음성도 바뀜)
<i></i>                   // Italic체
<strong></strong>  // Bold체(음성도 바뀜)
<b></b>                 // Bold체
<u></u>                 // Underline

// 07. 하이퍼링크
<a href="하이퍼링크 할 주소" title="단어 위에 마우스 오버시 툴팁 표시">누르면 하이퍼링크 될 단어</a>

// 08. Description List
<dl>
  <dt>용어, 질문 등 상위 항목</dt>
  <dd>정의, 답변 등 하위 항목</dd>
</dl>
// <dd></dd>내의 내용은 들여쓰기 됨

// 09. 인용문
<blockquote cite="인용할 링크">
  <p>인용문</p>
</blockquote>
// 왼쪽에 굵은 선과 함께 인용문이 한 단락으로 표시

<p>...단락...<q cite="인용할 링크">인용문</q>...단락...</p>
// 단락 내에 인용문이 삽입

<p>...단락...<a href="인용할 링크"><cite>인용문</cite></a>...단락...</p>
// 단락 내에 인용문이 Italic체로 표시, 클릭 시 하이퍼링크

// 10. 약어
<p>...단락...<abbr title="약어의 전체 의미">약어</abbr>...단락...</p>
// 약어로 표시되고 마우스 오버시 전체 의미 표시

// 11. 연락처 세부정보
<address>
  <p>...단락...<a href="연락처 등 하이퍼링크">문서작성자</a>...단락...</p>
</address>
// 문서 작성자와 연결할 수 있는 링크 삽입

// 12. 첨자
<p>e<sup>2</sup></p>
<p>e<sub>2</sub></p>

결과: e², e₂

// 13. 컴퓨터 코드
<code></code>    // 일반적인 코드 표시
<pre><                // 공백(들여쓰기) 유지
<var></var>        // 변수 이름 특별하게 표시
<kbd></kbd>       // 컴퓨터에 입력된 키보드(및 기타유형) 입력 표시
<samp></samp>  // 컴퓨터 프로그램의 출력 표시

1) <code> 결과:

이렇게 됨

2) <pre> 결과:

이렇게 됨

3) <var> 결과:

ABC (조금 기울어짐)

<var> 사용 안함 => ABC ( 안기울어짐)

4) <kbd> 결과:

그냥 => Ctrl

kbd =>

Ctrl

5) <samp> 결과:

그냥 =>

Keyboard not found
Press F1 to continue

samp =>

Keyboard not found Press F1 to continue

// 14. 시간 및 날짜
<time datetime="컴퓨터에게 읽힐 시간">사람이 읽는 시간(화면에 표시되는 시간</time>

·2016-01-20

·2016-01

·01-20

·19:30

·19:30:01.856

·2016-01-20 T 19:30+01:00

·2016-w04(2016년 4주차)

// 15. Body의 구성
<header></header>     // 컴텐츠 소개, 제목
<nav></nav>              // 다른 페이지로 이동하기 위한 함수적 네비게이션
<main></main>          // 페이지의 독자적 컨텐츠, body에서 딱 한번 사용
<article></article>      // 개별적으로 의미를 가지는 컨텐츠
<section></section>    // 개별 컨텐츠(<article>) 그룹화
<aside></aside>         // 메인 컨텐츠와 직접 연관x, 간접적으로 도움이 되는 추가 정보
<footer></footer>       // 마지막 컨텐츠 그룹
<hr>                           // 수직선, 주제 변경시 사용

// 16. 이미지 삽입
<img src="이미지 경로"           // 이미지 로드 오류시 이미지 대신 출력
         alt="이미지 이름, 설명"
         width="폭" height="높이"
         title="이미지 이름, 설명"  // 이미지 위에 마우스 오버 시 툴팁 표시

<figcaption>이미지 캡션</figcaption> //<p>와 똑같이 표시되지만 컴퓨터에게 이미지 캡션임을 알리기 위해 사용

// 17. 비디오 삽입
<video src="비디오 경로" controls>   // controls는 비디오 컨트롤(재생, 일시정지, 볼륨 조절) 기능 추가
                                                     // +적절한 JS api를 이용해 기능 추가 가능
</video>

// +추가로 이용 가능한 속성
<video autoplay>                   // 로드 시 자동재생
<video loop>                         // 반복재생
<video muted>                      // 음소거
<video preload="auto">         // 페이지 로드 시 비디오 전체 로드
<video preload="metadata">  // 페이지 로드 시 비디오 메타데이터 로드
<video preload="none">        // 페이지 로드 시 비디오 로드x

<source src="비디오 경로1" type="비디오 타입1">
<source src="비디오 경로2" type="비디오 타입2">
// <video>안에 src 옵션없이 따로 넣어서 비디오 타입이 호환되지 않을 것을 대비

<track kind="subtitles" src="자막 파일(.vtt 형식) srclang="자막언어*(ko, en 등) label="표시할 자막 이름">
// 자막 표시

// 18. 오디오 삽입
비디오 삽입에서 <video> 대신 <audio> 넣으면 됨

// 19. iframe
<iframe src="iframe 주소" width="폭" height="높이"
            "frameborder="프레임 경계" style="스타일" allowfullscreen>
</iframe>
//유튜브, 구글맵 등에서 iframe 주소를 복사해 삽입 가능

-iframe은 해킹의 위험이 존재

-> 필요할 때만 사용

-> HTTPS 사용(HTTP의 암호화된 버전)

-> sandbox 속성 사용(가능한 모든 제한을 줌)

=> 일부 기능을 허용하고 싶다면 sandbox=" " 따옴표 안에 기능 넣기

=> allow-scripts, allow-same-origin옵션은 넣으면 sanbox를 끌 수 있으므로 넣지 말기

->CSP설정(Content Security Policy)

// 20. <svg>
<svg version="1.1" baseProfile="full" width="폭" height="높이" xmlns="XML namespace">
  // XMLnamespace는 svg가 처음 정의된 xml 주소
  <rect width="사각형 폭" height="사각형 넓이" fill="사각형 색깔" />
  <circle cx="원 중심의 x좌표" cy="원 중심의 y좌표" r="반지름" fill="원 색깔" />
</svg>
// svg로 사각형, 원 등 간단한 도형은 쉽게 코딩할 수 있지만 복잡한 도형은 코딩하기 어려움



// svg파일이 있다면
<img src="svg 파일 경로" alt="이미지 설명" height="그림 높이" width="그림 폭" />
// JS나 css로 조정 불가능, css사용하려면 svg 내용에 인라인으로 구문 추가



// svg 지원 안하는 웹사이트에 대해
<img src=".png로 바꾼 경로" alt="이미지 설명" srcset=".svg로 된 경로" />



// css의 백그라운드로 svg이지미 지정, 브라우저가 지원 안 할것을 대비해 두 개 지정
background: url(".png파일") no-repeat center;
background-image: url(".svg 파일");
background-size: contain;

-Raster Image: 픽셀로 저장되어 확대하면 깨짐(.bmp, .png, .jpg, .gif)

-Vector Image: 모양이 저장되어 확대해도 안깨짐(.svg)

-출처:MDN Web Docs

// 21. 표
<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
    <td>...</td>
    <td>1행 n열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
    <td>...</td>
    <td>2행 n열</td>
  </tr>
  <tr>
    ...
  </tr>
  <tr>
    <td>m행 1열</td>
    <td>m행 2열</td>
    <td>...</td>
    <td>m행 n열</td>
  </tr>
</table>

// <td> 대신 <th> 쓰면 표의 글씨가 굵어지고 표의 각 행렬의 제목(header)을 표시
// <td>&nbsp</td>는 빈 셀을 생성
// <td colspan="합칠 열의 개수">로 열 병합
// <td rowspan="합칠 행의 개수">로 행 병합

<table>
  <colgroup>
    <col style="스타일" span="적용할 열" />
  </colgroup>
  <caption>
    표의 캡션
  </caption>
  <thead>
    표의 첫 행(굵게 표시)
  </thead>
  <tbody>
    일반적인 표 구성(tfoot보다 밑에 구성될 수도 있음)
  </tbody>
  <tfoot>
    표의 마지막 행(합계 등 표시)
  </tfoot>
  <table>...</table> // 표 안에 표 넣기 가능
</table>

// <th scope="header 열" 또는 "header 행">으로 화면리더기가 해당 셀이 header임을 인식하게 할 수 있음

// <th id="th를 식별할 id">
// <td headers="열_header_id 행_header_id>  // 윗줄에서 th에 id를 부여한 것과 연계하여 td가 어떤 th에 속해있는지 연결

1행 1열

1행 2열

1행 3열

1행 4열

cell1

cell2

cell3

2행 2열

2행 3열

2행 4열

3행 1열

3행 2열

3행 3열

3행 4열

4행 1열

4행 2열

4행 3열

4행 4열

저작자표시

'Front-end > HTML' 카테고리의 다른 글

[HTML] 로그인 화면 만들기 (0)	2022.11.18

PREV 이전 1 NEXT 다음

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

감으로 코딩하던 내가 알고 코딩할 때까지

Front-end/HTML

[HTML] 로그인 화면 만들기

'Front-end > HTML' 카테고리의 다른 글

[HTML] 기본 틀

1. HTML의 기본틀

2. Body

'Front-end > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역