반응형

Table대체->div태그

div를 이용한 레이아웃

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <div>
      <h1>MY HOMEPAGE</h1>
      <hr />
    </div>
    <div>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
      </ul>
    </div>
    <hr />
    <div>
      <h1>What is HTML5?</h1>
      <p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <hr />
      <div>
        <p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
      </div>
    </div>
  </body>
</html>

시멘틱(semantic)을 이용한 레이아웃

개발, 편집을 빠르게 하기 위해 각 위치별 태그를 써주는 것을 시멘틱이라고 함

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <header><!--제목-->
      <h1>MY HOMEPAGE</h1>
      <hr />
    </header>
    <nav><!--메뉴-->
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
      </ul>
    </nav>
    <hr />
    <section><!--본문-->
      <h1>What is HTML5?</h1>
      <p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <hr />
    </section>
    <footer><!--사이트 바닥-->
      <p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
    </footer>
  </body>
</html>

<header></header>: 제목을 뜻하는 태그

<nav></nav>: 메뉴

<footer></footer>: 사이트 바닥

반응형

'Web > html' 카테고리의 다른 글

HTML-(3)  (0) 2021.02.03
HTML-(2)  (0) 2021.02.03
HTML-(1)  (0) 2021.02.02
Web과 html  (0) 2021.01.27
반응형

동영상을 출력하는 태그(video)

<video></video>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <video controls="controls" width="500">
      <source src="C:\Users\hobby\Videos\Captures\123.mp4" type="video/mp4" />
    </video>
    <video
      src="C:\Users\hobby\Videos\Captures\123.mp4"
      controls="controls"
      width="500"
    ></video>
  </body>
</html>

음악을 추가하듯이 비디오도 똑같이 해주면 됨

 

폼 태그(form)

회원등록 할 때 많이 접함

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <form action="#" method="get">
      이름: <input type="text" name="uname" /><br />
      아이디: <input type="text" name="uid" /><br />
      비밀번호: <input type="password" name="upw" /><br />
      연락처: <input type="text" name="uphone1" size="5" />-
      <input type="text" name="uphone2" size="5" />-
      <input type="text" name="uphone3" size="5" /><br />
      사진: <input type="file" name="upic" /><br />
      성별구분:<input type="radio" name="gender" value="m" />남
      <input type="radio" name="gender" value="w" />여<br />
      사용언어:<input
        type="checkbox"
        name="lan"
        value="kor"
        checked="checked"
      />한글, <input type="checkbox" name="lan" value="eng" />영어,
      <input type="checkbox" name="lan" value="jap" />일어,
      <input type="checkbox" name="lan" value="chi" />중국어<br />
      자기소개: <textarea cols="20" rows="5">간단하게 입력하세요.</textarea
      ><br />
      국적:
      <select>
        <option>KOREA</option>
        <option>USA</option>
        <option>JAPAN</option>
        <option>CHINA</option></select
      ><br />
      좋아하는 음식:
      <select multiple="multiple">
        <option>김치</option>
        <option>불고기</option>
        <option>파전</option>
        <option>비빔밥</option></select
      ><br />
      <input type="submit" />
    </form>
  </body>
</html>

 

<form></form>

-action: 정보가 어디론가 갈 때 주소 기입

-method: get/post 방식이 있음. 정보가 가는 방식(입력을 안할 경우 defalut은 get)

get: 도메인 주소에 내가 입력한 값의 정보가 나타남(보안 취약, 페이지 넘어갈 때)

post: 도메인 주소에 내가 입력한 값의 정보가 나타나지 않음(회원 정보 등록, 로그인 등 노출되지 말아야할 정보를 넘길 때 사용)

 

<input/>: 값을 넣을 때 태그

-type: 입력 창 타입을 정해줌

text: 일반 텍스트, password: 글자가 은닉화 됨, file: 파일 넣을 때, submit: action에 있는 주소로 정보 전송

radio: n개 중에 한 개만 유일하게 선택해야할 때, value값이 전송됨), checkbox: 여러 개 선택할 때(value 값이 전송됨, defalut로 체크 표시 되어 있게 할 때, checked="checked"를 씀)=>한 묶음일 경우 name을 같게

-name: 각 입력 창의 고유 식별 이름

-size: (속성값)만큼 글자 칸 크기 설정

 

<textarea></textarea>: 여러줄 입력

-rows: (속성값)만큼 행

-cols: (속성값)만큼 열

 

<select></select>: 선택 태그, 여러 개 선택할 수 있게 하려면 multiple="multiple"

ㄴ> <option></option>: 옵션 태그(select랑 같이 쓰임)

더보기

이렇게 입력을 하고 get 방식으로 제출할 경우

"file:///C:/Users/hobby/source/repos/Web/ex1.html?uname=%E3%85%81%E3%85%81%E3%85%81&uid=%E3%85%81%E3%85%81%E3%85%81&upw=aa&uphone1=111&uphone2=111&uphone3=111&upic=&lan=kor#"

이렇게 ?뒤에 각 name="입력 값" 이렇게 표시가 된다

 

레이아웃 구성 태그(div, span)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <div>divblock1</div>
    <div>divblock2</div>
    <div>divblock3</div>
    <div>divblock4</div>
    <p>pblock</p>
    <ul>
      <li>liblock1</li>
      <li>liblock2</li>
    </ul>

    <span>inline1</span>
    <span>inline2</span>
    <span>inline3</span>
    </form>
  </body>
</html>

html은 영역을 크게 블럭 요소와 라인 요소로 나뉠 수 있다

<div></div>: 블럭 형식(한 개가 끝나면 엔터 친 듯 아래로 내려감, 수직방향)으로 태그, 또 다른 예: li, p

<span></span>: 라인 형식(한 개가 끝나면 옆으로 이어짐, 개행이 되지x)

 

 

 

 

 

반응형

'Web > html' 카테고리의 다른 글

HTML-(4)  (0) 2021.02.03
HTML-(2)  (0) 2021.02.03
HTML-(1)  (0) 2021.02.02
Web과 html  (0) 2021.01.27
반응형

리스트 태그1(ul, li, ol)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <p>메뉴 리스트</p>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>

    <p>지역 리스트</p>
    <ol>
      <li>서울</li>
      <li>경기</li>
      <li>충청</li>
      <li>전라</li>
      <li>경상</li>
      <li>강원</li>
    </ol>

    <p>검색 사이트 리스트</p>
    <ol>
      <li><a href="http://naver.com" target="_blank">naver</a></li>
      <li><a href="http://google.com" target="_self">google</a></li>
    </ol>
  </body>
</html>

<ul></ul>: 순서없이(unorder list)

<ol></ol>: 순서O(order list)

<li></li>: 줄 별 앞에 개행 문자 해줌

리스트 태그2(dl, dt, dd)

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <dl>
      <dt>메뉴 리스트</dt>
      <dd>menu1</dd>
      <dd>menu2</dd>
      <dd>menu3</dd>
      <dd>menu4</dd>
      <dd>menu5</dd>

      <dt>지역 리스트</dt>
      <dd>서울</dd>
      <dd>경기</dd>
      <dd>충청</dd>
      <dd>전라</dd>
      <dd>경상</dd>
      <dd>강원</dd>
    </dl>
  </body>
</html>

<dl></dl>: 리스트 시작과 종료

<dt></dt>: 리스트 상단 타이틀

<dd></dd>: 리스트 아이템

여기서는 아까와 다른 점이 개행문자가 없네요

dl과 ul의 차이점

dl일 경우  사전적인 의미를 쓸 때 많이 씀, children 개념을 내포

ul의 경우, 순서없음

표를 나타내는 태그(table, tr, td)

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
      </tr>

      <tr>
        <td>2행 1열</td>
      </tr>
    </table>
    <table border="4">
      <tr>
        <td rowspan="4">중간고사 성적</td>
      </tr>
      <tr>
        <td>국어</td>
        <td>수학</td>
        <td>영어</td>
      </tr>
      <tr>
        <td>100</td>
        <td>60</td>
        <td>80</td>
      </tr>
      <tr>
        <td colspan="2">평균</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>

table: 표형식의 레이아웃을 만드는 태그, 예전에는 웹사이트의 전체적인 레이아웃을 만들었으나 현재는 사용빈도가 많이 줄음(유지보수 어렵, 테이블 태그의 한계(변경이 어렵))

 

<tr></tr>: 행 단위

<td></td>: 열 단위

-rowspan 속성: 행 (속성값)개가 합쳐짐

-colspan 속성: 열 (속성값)개가 합쳐짐

=>저 속성 2개는 많이 쓰이지 않음, 깨짐, 의도치 않은 모양이 생기기 때문

<table></table>: 테이블 단위

-border 속성: 선 두께

 

 

이미지를 출력하는 태그(img)

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <p><img src="Navi_dr.png" alt="꿈 Story" /></p>
    <p>
      <img
        src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"
        alt="꿈 Story"
      />
      <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png" alt="꿈 Story" width="500"></p>
    </p>
  </body>
</html>

<img />: 웹사이트에서 이미지를 출력해주는 태그

-src: 이미지 경로를 나타냄

<p><img src="Navi_dr.png" alt="꿈 Story" /></p>

: 로컬에 있는(내 컴퓨터 문서에 저장)되어있는 같은 경로의 이미지를 뜻함

<p>
      <img
        src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"
        alt="꿈 Story"
      />
</p>

: 원격 경로의 이미지(네트워크 상)

-alt: 이미지를 못찾을 경우 나타내는 문구

-width: 사이즈 크기 정함(잘 쓰이지 않음, 거의 css에서 크기 변경해줌)

사운드를 출력하는 태그(audio)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <audio
      src="music.mp3"
      controls="controls"
      autoplay="autoplay"
      loop="loop"
    ></audio>
  </body>
</html>

<audio></audio>: 웹사이트에서 사운드를 출력해 주는 태그

-controls: 컨트롤러를 보일 것인지 결정

-autoplay: 자동적으로 play할 것인지

-loop: 반복할지

주간 히트 노래 예제

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <table width="300" border="3">
      <tr>
        <td><h1>주간 히트 노래</h1></td>
        <hr />
      </tr>
      <tr>
        <td>
          <ol>
            <li>
              <img
                src="data:image/jpeg;base64,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"
                alt="아무 노래"
                width="100"
              /><a href="#">아무 노래</a>
            </li>
            <li>
              <img
                src="http://image.kmib.co.kr/online_image/2016/0311/201603111758_61110010439591_1.jpg"
                alt="픽미"
                width="100"
              /><a href="#">픽미</a>
            </li>
            <li>
              <img
                src="data:image/jpeg;base64,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"
                alt="독기"
                width="100"
              />
              <a href="#">독기</a>
            </li>
          </ol>
          <p>
            <audio
              src="C:\Users\hobby\Music\Playlists\픽미.mp3"
              controls="controls"
              autoplay="autoplay"
            ></audio>
          </p>
        </td>
      </tr>
    </table>
  </body>
</html>

반응형

'Web > html' 카테고리의 다른 글

HTML-(4)  (0) 2021.02.03
HTML-(3)  (0) 2021.02.03
HTML-(1)  (0) 2021.02.02
Web과 html  (0) 2021.01.27
반응형

1. 태그

태그: HTML 문서를 구성하고 있는 요소. 이름과 속성(, 속성값)이 있음. 

<>와 </>

<>:열린(시작) 태그, </>: 닫힌(종료) 태그

<a href="~~~~"><img src="~~~~~" alt="~~~~~"/></a>

이름: a, img, 속성: href, src, 속성값: "~~~~"

 

2. HTML버전과 편집 툴

ver.5(HTML5) ~_~, 편집 툴: 메모장, Notepad, atom, VSC, VS

저는 VSC로 하겠습니다

확장프로그램 ctrl+shift+x 눌러도 됨

html 실행을 하기 위해서 vsc에서 open in browser를 설치 합니다

alt+b를 누르면 실행

prettier

prettier를 사용하면 난잡한 코드를 정리해준다.

톱니바퀴를 누른후 settings를 누른다.
prettier를 찾고 우측 상단에 있는 파일 같이 생긴 아이콘을 누른다.
settings.json에서 "editor.formatOnSave":true를 쓴다.

prettier 작동 오류

"editor.formatOnSave":true는 저장했을 때 자동적으로 코드를 정렬해주게 만든다.

만약 저장했는데 prettier가 제대로 적용되지 않는다면, Default Formatter 때문이다. 이걸 esbenp.prettier-vscode로 바꾸어줘야한다.

settings.json에 "editor.defaultFormatter": "esbenp.prettier-vscode"를 추가하면 된다.

 

 

 

3. 문법

 

head, title, body, br

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    안녕하세요~<br />
    Helloworld~
  </body>
</html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head></head>: 탭 부분에 써져 있는 문구 지정, 설정 값들, 스타일 시트, JS 등의 환경 설정에 관한 정보가 들어감

head 태그로 지정

<body></body>: 내용

<br />: 줄바꿈(<br>로 써도 됨)

h1,p,a,b,i,sup,ins,del

 

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
  </head>
  <body>
    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
    <h6>h6 태그</h6>

    <p>주로 본문에 사용되는 태그로서 단락을 구분</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분<br />햄바꿈 태그</p>

    <p>주로<b>본문</b>에 사용되는 태그로서 단락을 구분<br />행바꿈 태그</p>

    <p><a href="http://naver.com">네이버</a></p>

    <p><i>KOREA</i></p>
    <p>KOREA<sup>seoul</sup></p>
    <p><ins>KOREA</ins></p>
    <p><del>delete</del></p>
  </body>
</html>

<h1></h1>~<h6></h6>: 제목 글씨

<p></p>: 주로 본문에 사용되는 태그로서 단락을 구분

<a href="~~"></a>: 어떤 사이트, 다른 페이지로 이동할 때 사용(a태그: 앵커 태그로 하이퍼링크가 걸림)

<b></b>: 글씨를 진하게(bold)

<i></i>: 이텔릭체(기울기)

<sup></sup>: 지수의 형태로 뜸

<ins></ins>: 밑줄이 뜸

<del></del>: 가운데 밑줄이 뜸(삭제 표시)

반응형

'Web > html' 카테고리의 다른 글

HTML-(4)  (0) 2021.02.03
HTML-(3)  (0) 2021.02.03
HTML-(2)  (0) 2021.02.03
Web과 html  (0) 2021.01.27
반응형

 

Web: WWW(world wide web)이라는 말의 줄임말, 전 세계 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적이 있음. 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 함, 인터넷 서비스 중 하나

컴퓨터-컴퓨터: 네트워크에 연결되었다.

네트워크 상에서 WWW서비스로 정보 공유를 함

 

프로토콜: 통신규약(Http, ftp, smtp, pop, dhcp)

-http: 정보 가져옴, ftp: file 전송, smtp: mail 송/수신, dhcp: ip주소 계속 변동

IP: 네트워크 상에서 컴퓨터를 식별할 수 있는 주소

DNS: IP 주소를 인간이 쉽게 기억할 수 있도록 맵핑한 문자열

Port: IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port 번호는 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호(Port 안넎어도 됨, 자동으로 식별)

 

HTML

HTML: Hyper Text Markup Language, 웹문서를 기술하는 언어, 태그들로 구성

Hyper: 링크된 곳으로 점프해줌, 버튼 누르면 다른 곳으로 넘어가는 것

 

CSS

CSS: Cascading Style Sheets, HTML문서를 디자인적으로 예쁘게 만들어 정보 전달을 좀더 효율적으로 하기 위해 만들어진 문서, html은 정보(기능), css는 화면상의 레이아웃 등을 컨트롤 하는 문서(색상, 거리, 위치 등)

 

 

반응형

'Web > html' 카테고리의 다른 글

HTML-(4)  (0) 2021.02.03
HTML-(3)  (0) 2021.02.03
HTML-(2)  (0) 2021.02.03
HTML-(1)  (0) 2021.02.02

+ Recent posts

티스토리툴바