HTML 기본 구조

HTML 기본 구조
HTML을 작성시 기본적으로 적용해야할 구조
<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html> // HTML5의 기본 Document Type을 의미
  • <html lang="en"></html> // html 코드를 작성하는 공간을 할당하는 것을 의미
  • <meta charset="UTF-8"> // UTF-8은 한글에 최적화 되어있는 문자 체계, Encording 시 한글 깨짐 현상이 없음
  • <title>Title</title> // 제목을 입력하는 곳으로 상단바에 나타남
  • <body></body> // 실제 코드가 동작하는 영역
실행결과

HTML TAG

태그란?
웹문서를 내가 원하는 방식으로 표현하는 방법

 

<!--주석 내용-->

해당 코드에 대한 설명을 하기 위한 코드
실제 코드가 실행될 때 이 부분은 실행되지 않음
코드 부분 <!--주석 내용-->
실제 사용 예시

<pre>

<!-- __________________________ -->
<pre></pre>
<b></b>
<br>
<hr>
<hr color="#______" width="___" size="__" align="_____">
<p></p>
<font></font>
<font size="__" color="#______" face="__________">
<img>
<img alt="_______" src="______"> 
<style></style>
  • <!--_______________--> // HTML에서 주석처리 방법
  • <pre></pre> // 해당영역은 내가 짠 코드모습 그대로 줄바꿈처리가 됨
  • <b></b> // 글씨를 굵게 표시
  • <hr> // 수평선 생성
  • <hr color="#______" width="___" size="__" align="_____"> //수평선에 색(color), 길이(width), 두께(size), 정렬(align)을 설정
    ※ color는 #을 이용해 세밀하게 조정, 특정 색(red, green, yellow...)으로 지정
    ※ witdh, size는 px 단위로 지정(단위길이를 설정하지 않을 시)
    ※ align은 Left, Right, Center 등으로 지정
  • <font></font> // 글씨체를 설정
  • <font size="__" color="#______" face="__________"> // 글씨의 크기(size), 색(color), 글꼴(face)을 설정
    ※ face는 Impact과 같이 특정 글꼴명을 입력
  • <img> // 사진과 같은 이미지 파일을 삽입할 때 사용
  • <img alt="_______" src="______"> // 이미지에 대한 설명(alt), 이미지 파일의 위치(src)
    ※ alt는 이미지 로드를 실패 했을 때 대신 나오게 되는 텍스트
    ※ src는 이미지 파일의 위치(동일 선상의 폴더일 경우에는 ../를 이용해서 찾아야함
  • <style></style> // 해당 태그에 내에 있는 요소들에 여러가지 스타일 요소들을 적용가능
  • <style="background: ___; font-size:___ "> // 해당 태그내의 요소들에 배경색과 폰트 크기를 변경

'[혁신성장_청년인재_집중양성_사업] > [HTML]' 카테고리의 다른 글

HTML 태그 #2  (2) 2020.06.11

+ Recent posts

티스토리툴바