HTML은 웹페이지를 만들기 위한 언어로 브라우저만 있다면 HTML로 작성한 것을 확인할 수 있습니다.
.html은 확장자가 붙은 텍스트 파일입니다. 텍스트 편집기같은 앱을 열고 .html확장자로 저장한 후에 해당파일을 브라우저에 drag& drop하면 작성한 HTML파일을 확인할수 있습니다.
또한 텍스트만 작성하여도 .html확장자를 인식하여 브라우저가 자동으로 필요한 테그들을 붙여주고있습니다.
필수 HTML TAG
<html>
<head>
<body>
HTML 구조
<!DOCTYPE> --------------> HTML5버전 사용하는 의미
<html> ---------------> <!DOCTYPE>를 제외하고 모든HTML elements들은 <html>태그로 감싸져 있음
<head></head> ---------------> <html> 다음은 <head>태그 위치(사이트의 제목, 설명, 부가정보 ,기술적 내용)
<body></body> ----------------> 항상 <head> 태그 다음에
</html>
주로사용하는 tag (<body>)
| <h1> ~ <h6> | 주로 제목 텍스트 사용할 때, 숫자가 커질수록 글씨 크기 작아짐. <h1>만 페이지 내 한번만 사용 |
| <a> | 클릭시 화면 이동. href 속성에 이동하는 주소 작성 target="_blank"는 새창사용 (<a href="naver.com" target="_blank">naver</a> inline - element |
| <p> | 주로 텍스트. paragraph의 줄임말, 주로 문단 통으로 넣음. <span>과 달리 줄바꿈 일어남 |
| <span> | 주로 텍스트. 줄바꿈 X 한줄에 나옴--> 한줄에 이어서 나오는 요소 inline-element |
| <div> | division의 줄임말 웹페이지의 섹션을 나눌 때 사용 의미 없음 사용하는 이유는 그룹지어주거나 디자인 맞게 레이아웃 분리하기 각 <div>에 class나 id를 부여하여 css스타일 입혀주기 |
| <nav> / <footer> | <div>와 같은 섹션을 나누어주는 역할 nav는 navigation 줄임말, 주로 다른페이지로 이동하는 링크 모아놓는 영역을 감싸줌 footer는 하단에 기업주소, 사이트 정보 등의 모음 |
예시
<!DOCTYPE>
<html>
<head>
<mate charset="utf-8">
<!-- 한국어, 일어 중국어가 포함된 페이지라면 속성 필요 -->
<meta name="viewport" content="width=device-width">
<!-- 디바이스의 가로크기가 웹의 가로와 같다는 의미 -->
<title>repl.it</title>
<!-- 브라우저 탭에 보이는 페이지 이름 -->
<style>
h1{color:pink}
h4{color:brown}
</style>
<body>
<h1>오늘의 수업내용</h1>
<p>tag 알기<p>
<p>가자</p>
<a href="naver.com"
target="_blank"p>go naver</a>
<div>
<h4>자기소개</h4>
<p>이름: 김**</p>
<p>생년월일: 20**.**.**</p>
</div>
</body>
</head>
</html>
'HTML & CSS' 카테고리의 다른 글
| HTML 부모태그와 자식태그 (0) | 2023.02.17 |
|---|---|
| CSS-inline/inline-block/block (0) | 2023.02.07 |
| Img tag & background-image 차이 (0) | 2023.02.07 |
| CSS-2 (0) | 2023.01.03 |
| CSS - 1 (0) | 2023.01.02 |