멋쟁이사자처럼

HTML

h_jinnny 2024. 4. 1. 16:40

HTML, 혹은 하이퍼텍스트 마크업 언어는 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어

 

시작태그, 끝태그, 내용

<h1>Hello</h1>
  • 시작태그 : <h1>
  • 끝태그 : </h1>
  • 내용 : Hello
  • 요소(element) : 시작태그 + 내용 + 끝태그
  • 내용에는 다른 요소들이 올 수 있다.

속성

naver

주석

<!-- 설명 -->
  • “”까지가 주석
  • 프로그램 실행에 영향 X

기본 구조

<!DOCTYPE html>
<html>
	<head>
		<title>문서의 제목</title>
	</head>
	<body>
		문서의 내용
	</body>
</html>

head

  • 웹 브라우저에 문서 정보를 알려준다
  • 화면에 보이지 않는다
  • <meta>, <title>을 사용
    • meta 태그
      1. 문자셋 정의 : 문서의 문자 인코딩을 지정
      <meta charset="UTF-8">
      1. 뷰포트 설정 : 반응형 웹 디자인에 필수적인 속성. 모바일 브라우저에서 페이지가 어떻게 보여질지 제어
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      1. 키워드 : 페이지 내용과 관련된 키워드를 제공, 검색엔진 최적화에 도움
      <meta name="keywords" content=" HTML, CSS, JavaScript">
      1. 웹 페이지 설명 : 뭽 페이지의 간단한 설명을 제공. 검ㅅ색엔진 검색결과에서 페이지 아래에 표시되는 설명문
      <meta name="description" content="Html 구조에 대해 설명합니다.">
  • 스타일시트 파일(CSS)도 head에서 연결

제목 (h태그)

  • h1, h2, h3, h4, h5, h6
  • h1이 가장 큰 제목, h6은 가장 작은 제목

개행 (br 태그)

  • 줄바꿈

가로줄 (hr 태그)

  • 가로줄이 그어짐

앵커 (a태그)

<a href=”주소”>내용</a>
  • 하이퍼 링크 태그를 의미. 내용 부분을 클릭하면 주소로 이동

글자의 모양

<b>, <i>, <small>, <sub>, <sup>, <ins>, <del>
  • 태그로 사용하지 말고 CSS를 사용할 수 있도록 한다.

목록 태그 (ul, ol, li태그)

<ul>
	<li>사과</li>
	<li>배</li>
	<li>수박</li>
</ul>

<ol>
	<li>강아지</li>
	<li>고양이</li>
	<li>사자</li>
</ol>
  • ul : 순서가 없는 목록 표현
  • ol : 순서가 있는 목록 표현
  • li: 목록의 요소를 의미

테이블 태그 (table 태그)

  • table : 표
  • tr : 표 내부의 행
  • th : 제목 셀 태그
  • td : 일반 셀 태그
  • border : 표의 테두리 두께 (CSS를 사용할 수 있도록)
  • rowspan : 세로의 셀을 합친다
  • colspan : 가로의 셀을 합친다

이미지 태그 (img 태그)

  • img : 이미지
  • src : 이미지 경로
  • alt : 이미지 설명(이미지 업로드에 실패하면 화면에 보인다)
  • width : 이미지 너비
  • heigth : 이미지 높이