html§CSS

HTML의 태그들(3)

병맛고냥 2020. 6. 14. 23:07
● <dl> 태그

Definition List. 사전처럼 용어를 설명하는 목록을 만든다.(개념-정의를 나타내는 목록)





● <dt> 태그

Definition Term. 개념을 나타내며 인라인 태그이기 때문에 안에 다른 인라인 태그나 텍스트만 입력할 수 있다
안에 블럭 태그를 넣으면 안된다





● <dd> 태그

Definition Description. 정의를 나타내며 블럭 태그이기 때문에 안에 다른 인라인 태그와 블럭 태그 모두 사용 가능하다

=> dt 태그와 dd 태그는 '1:1' 정의뿐만 아니라 '多:多'의 형식도 가질 수 있다



실행 코드


실행 결과





● <strong> 태그

해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용한다
브라우저는 일반적으로 strong 태그의 콘텐츠를 굵은 텍스트로 표현한다





● <img> 태그

이미지를 삽입할 때 사용한다
src 속성을 통해 이미지 경로를 지정한다.
이미지 파일이 src 속성에서 지정한 경로에 없을 시, 이미지는 출력되지 않거나 엑스박스가 뜨게 된다

img 태그의 속성

  • src : 이미지의 경로
  • width : 이미지의 가로 크기
  • height : 이미지의 세로 크기
  • vspace : 이미지와 프레임 혹은 다른 컨텐츠와의 수직 방향 여백
  • hspace : 이미지와 프레임 혹은 다른 컨텐츠와의 수평 방향 여백
  • align : 이미지를 정렬(left, right, middle의 값이 있다)
  • alt : 이미지의 대안을 나타낸다. 이미지가 없을 경우 alt 속성의 내용이 해당 이미지를 대체하여 나타낸다
  • border : 이미지 테두리의 폭을 지정한다
         (border 값을 지정했을 때 기본 색상은 검정색이다)

실행 코드


실행 결과





● <a> 태그

하이퍼 링크를 걸어줄 때 사용한다

(하이퍼 링크에 대한 설명은 여기 참조)
https://crazycat-liebling.tistory.com/5?category=785841

a 태그의 형식

  • 글자에 하이퍼 링크 걸기
    <a href="링크할 url" target="링크 방법">링크 내용</a>
  • 그림에 하이퍼 링크 걸기
    <a href="링크할 url" target="링크 방법"><img src="이미지 경로"></a>

a 태그의 속성

  • href : 하이퍼 링크로 연결할 사이트, 그림, 다른 파일의 경로, html 문서 등을 지정하며 필수 요소이다.
    (지정하지 않으면 현재 페이지로 이동한다)
  • target : 다른 브라우저 창이나 프레임셋에 위치한 프레임을 지정하여 지정한 url이 나타나게 한다
         - target 속성의 값
       * blank : 새 브라우저를 연 뒤 그 다음부터는 열려있는 탭에 나타난다
       * _blank : 계속해서 새 브라우저에 나타난다
       * self : 새 브라우저를 연 뒤 그 다음부터는 열려있는 탭에 나타난다(blank와 비슷)
       * _self : 링크를 누른 탭에서 나타난다
       * _parent : 프레임 문서의 구조에서 하이퍼 링크로 연결한 문서를 현재 프레임이 포함된 
                   상위 프레임 창에 나타나게 한다(부모페이지)
       * _top : 프레임 문서 구조라 하더라도 웹 브라우저 전체 창 형태로 하이퍼 링크로 연결한 문서를 나타나게 한다(최상위 페이지)
       * 프레임 이름 : 프레임 구조의 문서에서 지정한 프레임 창에 하이퍼 링크로 연결한 문서를 보여준다
  • download : a 태그에 적으면 웹 브라우저의 설정에 상관없이 링크 대상을 다운로드한다

실행 코드


실행 결과





● <marquee> 태그

텍스트나 이미지들을 스크롤하게 할 때 사용한다
정보를 보여주기 위한 용도로 사용된다

marquee 태그의 속성

  • width : 스크롤 영역의 가로 넓이를 설정한다(px 단위)
  • height : 스크롤 영역의 세로 넓이를 설정한다(px 단위)
  • direction : 스크롤이 움직이는 방향을 설정한다
            - left : 오른쪽에서 왼쪽으로 움직인다
        - right : 왼쪽에서 오른쪽으로 움직인다
        - up : 아래에서 위로 움직인다
        - down : 위에서 아래로 움직인다
  • behavior : 스크롤 방식을 설정한다
           - scroll : 기본 값으로 marquee 영역의 경계에서부터 스크롤 된다(끝으로 사라졌다가 반대쪽에서 다시 나온다)
       - slide : scroll과 비슷하지만 marquee 영역의 경계에서 더이상 스크롤되지 않고 멈춘다
       - alternate : marquee 영역의 경계까지 갔다가 다시 돌아온다
  • scrollmount : 스크롤될 때마다 얼만큼 스크롤되는지를 지정한다(스크롤의 픽셀 수를 설정한다. 기본 값은 1픽셀)
  • scrolldelay : 스크롤의 이동 속도를 설정한다(단위는 1/1000초)
  • loop : 스크롤의 반복 횟수를 설정한다(기본 값은 -1로 무한 반복한다)
  • bgcolor : 스크롤 영역의 배경 색상을 설정한다
  • vspace : 수평 방향의 여백을 설정한다
  • hspace : 수직 방향의 여백을 설정한다

아무것도 적용하지 않은 marquee

옵션이 없는 기본 상태

넓이 300, 높이 50, 배경색 분홍색의 marquee

넓이 300, 높이 50, 배경색 분홍색

움직이는 방향이 왼쪽에서 오른쪽인 marquee

왼쪽에서 오른쪽으로 움직임

marquee의 경계까지 갔다가 다시 되돌아 오는 marquee

경계에서 되돌아옴

marquee의 이동 속도 정하기

10픽셀씩 이동하며 10/1000초의 속도로 움직인다

marquee의 스크롤 반복 횟수는 3번, 상하좌우 여백 20

3번 반복하는 상하좌우 여백 20의marquee





● <audio> 태그

웹 페이지에서 음성 파일을 재생할 때 사용한다
태그 사이에는 웹 브라우저가 audio 태그를 지원하지 않을 때 표시할 문구를 적는다

audio 태그의 속성

  • src : 오디오 파일의 경로를 지정
  • controls : 오디오 파일 재생 도구를 표시할 것인지 지정
  • autoplay : 자동 재생을 할 것인지 지정
  • loop : 오디오를 반복할 것인지 지정

실행 코드


실행 결과





● <video> 태그

웹 페이지에 영상 파일을 재생할 때 사용한다
태그 사이에는 웹 브라우저가 video 태그를 지원하지 않을 때 표시할 문구를 적는다

vedio 태그의 속성

  • src : 비디오 파일의 경로를 지정
  • width : 비디오 파일의 넓이 지정
  • height : 비디오 파일의 높이 지정
  • poster : 비디오가 준비 중일 때의 이미지 파일 경로 지정
  • controls : 비디오 파일 재생 도구를 표시할 것인지 지정
  • autoplay : 자동 재생을 할 것인지 지정
  • loop : 비디오를 반복할 것인지 지정
  • muted : 음소거

실행 코드


실행 결과

저작자표시 (새창열림)