• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

HTML 정리 02

24 Jan 2019

Reading time ~3 minutes

HTML 정리 02 - Tags

문자 태그

  • 속성이 있는 태그
    • 태그에 개발자가 속성 값을 입력하여 다양한 형태로 사용할 때 사용
    • 속성을 정의하는 순서는 없다.
    • 속성은 여러개를 사용할 수 있다.
    • 한 속성이 여러 태그에서 사용되면 Global 속성이라고 한다.
      • “title” 같은 속성
  • 일반적으로 큰 따옴표(“)로 속성값을 감싼다.
    • 작은 따옴표도 사용 가능하나 큰 따옴표 권장
    • “나 ‘나 값이 공백을 가질 수 있다.
      • 따옴표를 사용하지 않으면 값이 공백을 가질 수 없다.
<태그명 속성명="값" 속성명="값" .. ></태그명>

Font 태그 (HTML5에서 지원하지 않음)

  • 크기(size)는 1~7을 줄 수 있다
    • default는 3
  • 색(color)은 영어 또는 RGB값을 줄 수 있다.
    • white, black..
    • RGB값은 16진수, #으로 시작한다.
      • #000000
      • 0~FF(255)까지
      • 자바에서 16진수는 0x로 시작
  • 글꼴(face)은 저작권이 있기 때문에 조심해서 사용해야 한다.
    • 글꼴은 서버에 설치되어있는 모든 글꼴을 사용가능
    • 서버에만 글꼴이 존재하면 접속자 브라우저의 기본 설정 글꼴로 보여진다.
    • @이 붙은 글꼴을 쓰면 글자가 누워서 표기됨(쓰면 안된다)
<font size="크기" color="색" face="글꼴">내용</font>

h 태그

  • 목차(heading)를 만들 때 사용
    • h1~h6까지 존재
      • 1이 제일 크고 6이 제일 작게 나온다.
      • h7같이 DTD에 없는 태그를 사용하면 error도 없고 동작도 하지 않는다.
  • h 태그 사용하면 자동으로 줄이 바뀐다.
<h1>h1 입니다.</h1> <!-- 가장 크다. -->
<h2>h2 입니다.</h2>
<h3>h3 입니다.</h3>
<h4>h4 입니다.</h4>
<h5>h5 입니다.</h5>
<h6>h6 입니다.</h6> <!--  가장 작다. -->

01

Anchor Tag

  • Hyper Text를 이어주는 태그, 현재 페이지에서 위치를 이동할 때 사용
<a href="연결할페이지경로" target="HTML을 보여줄 위치">클릭할 내용</a>
  • href에 입력가능한 값
    • URL(Uniform Resource Locator, 파일식별자)
      • 프로토콜부터 다 써주는 것
      • link를 가진 HTML파일이 이동을 하더라도 코드 수정없이 연결이 가능(권장)
        • 단점은 코드가 길어진다.
    • 상대경로
      • 서비스되는 파일의 위치가 중요
        • 단점은 파일의 경로 변경 시 모두 수정해야 된다.
      • ../ - 현재 파일이 서비스되는 위치에서 경로 하나 올라갈 때
      • ./ - 현재 경로(보통 생략)
      • / - 최상위 경로
    • 절대경로
      • 클라이언트가 서버에 있는 html을 받아가서 실행하는 것
      • 웹에서는 절대경로를 절대 사용하지 않는다.
        • 서버 경로에 존재하는 파일이 클라이언트의 경로엔 존재하지 않기 때문
  • target은 연결할 HTML을 보여줄 위치
    • target=”프레임의 이름” 프레임의 이름이 없다면 새창이 뜨게 된다.
<strong>URL 사용</strong> <!-- 코드가 길어진다 -->
<a  href="http://localhost:8080/html_prj/date190124/font.html">url이용 font.html</a>
<a  href="http://localhost:8080/html_prj/date190124/link_a/a.html">url이용 a.html</a>
<a  href="http://localhost:8080/html_prj/date190123/link_b/b.html">url이용 b.html</a>

<strong>상대경로 사용</strong>
<a href="/html_prj/date190124/link_a/a.html">상대경로 이용  a.html</a>
<a href="./link_a/a.html">상대경로 이용 a.html</a>
<a href="link_a/a.html">상대경로 이용 a.html</a>
<a href="../date190123/link_b/b.html">상대경로 이용 b.html</a>

02

<strong>새창으로 띄우기</strong>
<a href="http://daum.net" target="_blank">다음</a>

<strong>현재창에 띄우기</strong>
<a href="http://daum.net">다음</a>

03

  • 한페이지에서 위치를 이동할 때 name 속성을 사용
    • HTML5에서 지원안함, 대신 id 속성을 사용
<a name="이름"></a> <!-- name 대신 id를 사용할 것 -->

...

<!-- "클릭할내용"을 클릭하면 위에 <a>태그 위치로 이동 -->
<a href="#이름">클릭할내용</a>

hr 태그

  • hr태그를 사용하면 줄이 자동으로 변경된다.
  • 주로 화면에 가로줄을 그리기보단 소스코드를 나누는 용도로 사용
    • CSS로 숨긴다.
  • width 속성
    • 숫자를 입력하면 픽셀길이로 고정길이
    • %를 사용하여 가변길이를 줄 수 있다.
<hr width="넓이" size="높이" color="선색">

img 태그

  • src값으로는 url, 상대경로가 들어갈 수 있다.
  • 이미지의 크기를 직접 조작하는 것보다 디자이너가 조절한 이미지를 사용하는게 더 올바른 방법
  • alt는 이미지가 없을 때 나오는 메시지
  • title은 풍선도움말
  • border 속성이 있지만 CSS에서 처리한다.
<img src="이미지경로" width="넓이" height="높이" alt="엑박 시 보여줄 메시지" title="풍선도움말" border="테두리 선의 두께"/>

<a href="http://google.com" target="_blank"><img  src="images/google.png" alt="google" title="google"/></a>
<a href="http://daum.net" target="_blank"><img  src="images/daum.png" alt="daum" title="daum"/></a>
<a href="http://naver.com" target="_blank"><img  src="images/naver.png" alt="naver" title="naver"/></a>
<a href="http://sist.co.kr" target="_blank"><img  src="images/sist_logo.jpg" alt="sist" title="sist"/></a>

04

iframe 태그

  • frame태그는 하나의 브라우저(탭)에서 여러개의 HTML을 동시에 보여줄 때 사용
    • 페이지 디자인할때 사용되었으나 느려서 HTML5에서는 div 태그를 사용
  • iframe 태그는 inner frame의 약자로 하나의 브라우저(탭)에서 여러개의 HTML을 동시에 보여줄 때 사용
    • anchor tag를 클릭했을 때 해당 target(iframe)에서 링크가 뜨게 됨
  • 모든 페이지가 iframe으로 나올 수 있는건 아님
    • 네이버, 구글같은 사이트는 iframe에 나오지 않는다.
  • 속성
    • name
      • target속성에서 사용할 이름
    • src
      • 보여줄 페이지 링크
    • width
      • 넓이
    • height
      • 높이
    • scrolling
      • HTML보다 iframe이 작으면 scrollbar를 보여줄것인지에 대한 설정
      • yes / no / auto
      • HTML5에서 지원X
    • frameborder
      • 테두리선의 두께를 조절가능하나 CSS로 처리
      • HTML5에서 지원X
<iframe name="" src="" width="" height="" scrolling="" frameborder=""/>

목록 태그

  • 순서 목록, 도형 목록, 설명 목록, 3가지를 지원
  • li(list item)마다 줄이 변경된다.
  • 순서목록(Ordered List)
    • type - 사용할 목록
      • 1, a, A, i, I
<ol type="">
    <li>내용</li>
    <li>내용</li>
</ol>
  • 중간부터 순서를 바꾸고 싶으면 value속성으로 바꿔준다.
<li value="100">내용</li>
  • 도형목록(Unordered List)
    • type - 사용할 도형 (HTML5에서 지원X)
      • circle - 하얀 원
      • disc - 검은 원
      • square - 네모
<ul type="">
    <li>내용</li>
    <li>내용</li>
</ul>
  • 설명목록(Description List)
    • 잘 안쓴다..
<dl>
    <dt>제목</dt>
    <dd>설명</dd>
    <dt>제목</dt>
    <dd>설명</dd>
    ..
</dl>

HTML