Front/HTML

1.HTML - 2

잘잔디 2023. 3. 28. 14:48

텍스트를 묶어주는 태그

  • <h1~h6> : 제목 표기
  • <p> : 텍스트 단락
    • 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐
  • <br> : 줄 바꾸기
    • 줄을 바꿀 위치에 <br> 태그를 사용(닫는 태그가 없음)
  • <hr> 태그 - 주제가 바뀔 때 분위기 전환용, 수평 줄 생김

  • <blockquote> : 다른 텍스트보다 안으로 들여 써짐.
  • <pre> : 소스에 표시한 공백이 그대로 표시됨 , 프로그램 소스를 표시할 때 유용함.

텍스트를 한 줄로 표시하는 태그

  • <strong> , <b> : 굵게 표시
  • <q> : 인용 내용 표시 (인용 내용 앞뒤에 따옴표 추가됨)
  • <mark> : 형광펜 효과
  • <span> : 줄 안에서 인라인 묶기
  • <div> 줄 바꿔 블록 단락으로 묶기

목록 만들기

  • <ol> , <li> : 순서가 있는 목록
    • 각 항목 앞에 숫자가 붙여짐

  • <ul> , <li> : 순서가 없는 목록

표 만들기

  • <caption> : 표 제목 위쪽 중앙에 표시
  • <thead> , <tbody> , <tfoot> 태그로 사용한다.

  • <col>, <colgroup> : 원하는 열끼리 스타일 지정이 가능하도록 묶어준다.

이미지, 오디오, 비디오 삽입하기

  • <img src = “이미지 파일 경로” alt = “대체용 텍스트”> : 이미지 업로드
    • img 태그의 width, height 속성 : 이미지 크기 조정
    • width = “50%” 로 비율지정 혹은 width = “150” 상수로 지정
  • <figure>, <figcaption> : img 태그 밑에 만들어서 이미지에 대한 설명글을 붙여준다.
<figure>
        <img src="images/cat.jpg" alt="고양이" width = "100" >
        <figcaption>고양이 사진</figcaption>
    </figure>

  • <embed src =”파일 경로”> : pdf와 같은 파일 삽입 가능
  • <audio src = “오디오파일 이름”>: 오디오 삽입
  • <video src = “비디오파일 이름”> : 비디오 삽입

하이퍼링크 삽입하기

  • <a herf = “링크할 주소” [속성 = “속성 값”]>텍스트</a> : 링크를 연결해줌
    • 현재 html 파일의 id 이름, 다른 html파일, 웹사이트 등의 형태로 입력해주면 이동이 가능
    • 반드시 href 속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다.

<a> 태그에서 사용할 수 있는 속성

  •