HTML 기본 태그(tag) 개념 배우기

HTML 기본 태그 규칙
html 웹언어를 사용하면서 우리는 여러가지 문법과 태그등을 배우게 된다. 하지만 규칙이 존재하는데, 대부분의 문법과 태그는 시작과 끝이 존재한다. [시작 – 내용 – 끝] 이렇게 3가지 나뉘게 되는데, <h1>내용</h1>와 같이 항상 시작을 <h1>으로 시작하면 중간에 내용을 적고, </h1> 식으로 닫아줘야 된다. 꼭 /(백슬러쉬)를 넣어줘야된다는점 잊지말자.

HTML 틀 잡아보기

html 기본문법은 지난 시간에도 배웠던 내용처럼 문서 유형 선언을 < !DOCTYPE html>으로 시작해야 된다. html 문서 자체는 <html>….</html>으로 되어 있다.

사용자에게 실제로 문서의 내용을 보여주는 html 기본 문법은 <body>….</body>의 내용이다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<h1>큰 제목 적는곳</h1>
<p>동해물과 백두산</p>

</body>
</html>

HTML 제목

html 제목을 표현하기 위해서 사용하는 태그는 아래와 같다.

<h1> ~ <h6>

<h1> 가장 중요한 제목 큰 제목을 정의하는것이다. <h6> 가장 작은 타이틀의 제목을 정의하는 것이다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<h1>큰 제목 1</h1>
<h2>조금 큰 제목 2</h2>
<h3>조금 덜 큰 제목 3</h3>
<h4>조금 덜덜 큰 제목 4</h1>
<h5>조금 덜덜덜 큰 제목 5</h2>
<h6>조금 덜덜덜덜 큰 제목 6</h3>

</body>
</html>

HTML 단락

html에서 단락을 정의하는 태그는 <p> 태그를 사용하면 된다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<p>첫번째 단락 정한것</p>
<p>두번째 단락 정한거</p>

</body>
</html>

HTML 링크

html 링크태그는 <a>…</a>으로 정의된다. 앞서 설명한 태그와는 조금 다르다. 아래 예제를 참조하길 바란다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<a href="https://www.itopening.com">IT Opening 사이트 접속</a>

</body>
</html>

위 예제를 보게되면 href 속성이 지정된 것을 확인할 수 있다. 아직 이번 포스팅에서는 속성에 대해서 배워보는 시간이 아니기 때문에 “href를 사용하여 링크 연결을 하는구나” 정도만 알아두자.

HTML 이미지

html 이미지는 <img>…</img>태그를 사용하여 정의된다. 이미지 태그에서도 속성이 들어가는데, 어떤것인지 아래 예제를 참고하길 바란다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<img src="https://www.itopening.com/wp-content/uploads/2019/07/html5-%EC%8B%9C%EC%9E%91-%EB%A1%9C%EA%B3%A0-1-150x150.png" alt="https://www.itopening.com" width="500" height="400">

</body>
</html>

위 예제에서는 소스 파일(src), 대체 텍스트(alt), width, height 가로 세로 사이즈를 지정하는 속성까지 조금 더 속성함수를 사용하고 있다는걸 확인할 수 있다.

HTML 버튼

html 버튼 생성은 <button> 태그를 사용하여 정의하게 된다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<button>버튼 클릭</button>

</body>
</html>

HTML 목록(리스트)

html 목록(리스트)를 만드는 방법은 총 3가지인데, <ul>(글 머리표 목록), <ol>(번호가 매겨진 목록), <li>(항목) 태그를 사용하여 표시되게 된다.

실제 예제 참조

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

<ol>
  <li>자동차</li>
  <li>비행기</li>
  <li>자전거</li>
</ol>

</body>
</html>

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다