본문 바로가기
:: coding/HTML5 & CSS3

[HTML] HTML 기본

공하루 2022. 7. 14. 19:31
반응형

HTML (hypertext markup language)

하이퍼텍스트를 마크업하는 언어

웹페이지가 어떻게 구조화되어 있는지 알 수 있도록 하는 마크업 언어

- 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

- 마크업 : 태그를 사용해 문서에서 어느 부분인지 표시하는 것

 

코딩할 때 기본

  1. HTML 기준으로 코딩하기
  2. 웹표준을 준수하기
  3. 실무에 맞게 가독성있게 코딩하기
    • 긴 코드 줄 피하기
    • 빈 줄, 공백, 들여쓰기 적절히 사용하기

 

 

태그

소스에서 <> 꺽쇠로 묶인 부분

 

태그 사용법

  • 소문자를 사용
  • 여는 태그와 닫는 태그를 정확히 입력하기
  • 적당히 들여쓰기 (여러번 띄어 쓰기해도 한 칸으로 인식)
  • 속성과 함께 사용 가능  (여는 태그에 사용) : 인라인스타일
<태그 속성=“속성값” 속성 >
<!--
       속성과 속성값이 동일한 경우 속성만 써도 됨
       속성이 여러 개일 경우 띄어쓰기로 구분
       속성값은 " " 따옴표로 묶으며, 등호 사이에 공백을 두지 않음
-->
  • 포함 관계를 명확히 하기 : 코드 중첩

 

태그 성질

- 코드 중첩이 가능

HTML은 DOM 객체로 부모-자식관계를 가짐

코드는 중첩이 가능하여 어떤 요소가 부모태그가 되기도 하고, 다른 요소의 자식태그가 되기도 함.

<!doctype html> 
<html>
    <head>
    </head>
    <body>
    	<!--부모태그-->
    	<div>
        	<!--자식태그-->
            <p>안녕하세요!</p>
        </div>
    </body>
</html>

 

태그 형태

  • 기본 태그 형태 : <시작태그>contents</종료태그> : 대부분 이와 같은 형식을 취함
<h1>contents</h1>
  • 단일 태그,빈태그 : <태그> : 일부분
<br>

 

태그 텍스트 관련 요소

블록 레벨 요소와 인라인 레벨 요소로 나뉨.

  블록 레벨 요소 인라인 레벨 요소
차이점 요소가 한 줄을 차지함 `한 줄을 차지하지 않음
예시 <h1>~<h6>, <p>, <hr>, <blockquote>, <pre> <strong>, <em>, <span>, <q>, <mark> 등

 

 

문서 기본 작성

파일 저장

  • 확장자 : .html or .htm
  • 파일이름은 소문자 사용
    • 포함되는 멀티미디어의 경우도 소문자로 사용하는 것이 오류를 줄임

 

 

문서 기본 구조

<!doctype>, <html>, <head>,<body> 이 네 개로 구성

 

- <!doctype> :

문서의 유형을 지정하는 선언문, 브라우저는 해당 소스만으로 HTML5 이라는 것을 알 수 있음

항상 문서 유형을 첫 번째 행으로 선언 할 것
<!doctype html>

 

- <html>

웹 문서의 시작을 알리는 태그

lang="ko" => 문서에서 사용할 언어를 지정
<!--
     웹 페이지에서 사용할 언어 설정
     검색엔진과 브라우저 지원
-->

국가별 언어 코드

코드 de en fr ja ko zh
언어 독일어 영어 프랑스어 일본어 한국어 중국어

 

- <head>

브라우저에 정보를 주는 태그 (title, meta, style 등)

 

- <title>

문서 제목, 웹 브라우저의 제목 표시줄에 표시

검색 엔진 최적화에 매우 중요 (SEO)

가능한 정확하고 의미있는 제목을 만드는 것이 좋음

웹 접근성!

 

- <meta>

문자 세트를 비롯한 문서 정보

<!-- 검색 엔진 인덱싱을 위해 해당 태그는 가능한 빨리 문서에 정의 -->
<meta charset="UTF-8">
<!-- 반응형 웹의 핵심 -->
<meta charset="viewport" content="width=device-width, initial-scale=1.0">
<!-- 인터넷 익스플러저 브라우저 고려하기 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 검색엔진 고려하기 -->
<meta name="keywords" content="사이트 키워드">
<meta name="description" content="사이트 설명">
<meta name="author" content="웹문서 개발자/소유자">

<!-- Meta Data -->
 <meta property="og:image" content="./images">
 <meta property="og:title" content="프로젝트 타이틀">
 <meta property="og:description" content="프로젝트 상세설명">
 <meta property="og:url" content="프로젝트 url 주소">
 <meta property="og:locale" content="메인 서비스 국가">
 <meta property="og:site_name" content="프로젝트 사이트 이름">
 <meta property="og:type" content="프로젝트 종류">

 

- <body>

실제 브라우저에 표시될 내용, 이 태그 내에 있는 내용만 보임

 

문서 기본 구조 예시

<!doctype html> 
<html>
    <head>
    </head>
    <body>
    </body>
</html>

 

 

주석

주석은 브라우저에 표시 되지 않지만, HTML 코드를 문서화하는데 도움이 됨

해당 콘텐츠의 코멘트를 달아 구분하거나, 콘텐츠를 일시적으로 숨길 때 사용이됨

주석이 긴 경우 여러 줄로 해야 가독성이 좋음

 

기본 문법 예시

<!-- 여기는 주석 부분 입니다 -->

 

단축키

ctrl + /

 

 

관련 포스트

블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element)

 

[HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element)

텍스트 관련 요소 크게 블록 레벨 요소(대부분)와 인라인 레벨 요소(일부분)로 나뉨 가장 큰 차이점은 해당 요소가 한 줄을 차지(즉 width : 100%)하는가 임. 1. 블록 레벨 요소 (Block Level Element) : 한

regularly-study.tistory.com

 

728x90
반응형

':: coding > HTML5 & CSS3' 카테고리의 다른 글

[HTML/CSS] 목록을 만드는 태그 (List Tag)  (0) 2022.07.28
[HTML] 시멘틱 태그 (Semantic Tag)  (0) 2022.07.27
[HTML] 특수 문자 작성 엔티티 코드(Entity Code)  (0) 2022.07.27
[HTML] 에밋(emmet) 알아보기  (0) 2022.07.26
[HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element)  (0) 2022.07.16

':: coding/HTML5 & CSS3' Related Articles

티스토리툴바