텍스트를 묶어주는 태그
- <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> 태그에서 사용할 수 있는 속성
'Front > HTML' 카테고리의 다른 글
1.HTML - 3 (0) | 2023.03.29 |
---|---|
1.HTML - 1 (1) | 2023.03.28 |