HTML의 기본 구조와 개념

2023. 6. 20. 23:59·Development/HTML
반응형

 

1. HTML의 기본 구조

<html>

  <head>

    <meta> // 웹브라우저에는 보이지 않지만 웹문서와 관련된 정보를 지정할 때 사용. 한글로된 내용을 표시할 때는 UTF-8이라는 문자 세트를 사용한다고 웹브라우저에 알려주어야 한다. <meta charset="UTF-8"> 하지 않으면 한글이 깨질수도 있다.

    <title>웹문서의 제목 입력</title> // 웹 브라우저 제목 표시줄에 표시

  </head>

  <body> // 실제 웹 브라우저 화면에서 보여주는 내용 작성

      <header></header>

      <main></main>

      <footer></footer>

  </body>

</html>

 

2. 이외 개념

1) HTML 기본구조 자동입력하기 : 첫 줄에 ! 입력 후, Tab 또는 Enter, 입력 후 lang="en"을 lang="ko"로 변경

2) 웹 문서의 영역 : 헤더, 메인, 푸터, 사이드바

3) 경로 입력 시, 절대경로, 상대경로 구분 유의

절대경로 : 속성값이 항상 같은 경로 ex) https://naver.com

상대경로 : 현재 작성하는 문서의 위치를 기준으로 함. 문서의 위치에 따라 바뀜. ex) ./sub/sub2.html, ../index.html 

※ 경로 표기법 

/ : 최상위 경로

./ : 현재 폴더 위치

../ : 상위 폴더 위치

4) 코딩의 대전제 : 2개 이상의 요소는 하나로 묶는다. 단일이어도 특정 스타일을 적용할 경우도 div로 묶는다.

텍스트 요소는 별 의미없이 묶을 땐 <span>을 사용. <strong>강조 <em> 특별한 의미일 경우 묶는다.

5) 태그 구분 block, inline-block, inline

block : h1~h6, p, adress, ol, ul, li, dl, table(테이블로 따로 분류되기도 함), form, fieldset, div, header, section, footer, nav, article, aside

inline-block : <img>(홑태그), <input>(홑태그), textarea, select

inline (text) : a, em, strong, mark, b, small, sub, sup, label, span,

table : table (블럭같이 행동함)

6) 부모 자식 상속 관계와 예외

- 부모가 블럭이면 누구든 자식으로 받을 수 있다.

- 부모가 인라인이면 인라인만 자식으로 받을 수 있다.

 - 단, 몇몇 블럭은 자식으로 블럭을 둘 수 없다. 아래와 같이 주로 텍스트 위주로 사용되는 태그들이 그렇다. 

   <h1>~<h6>, <p>, <address>, <dt>

반응형
저작자표시 비영리 변경금지
'Development/HTML' 카테고리의 다른 글
  • HTML, CSS 에서의 문자셋 설정 charset, UTF-8
  • HTML form 관련 태그 / button태그와 input type=button 의 차이
  • 웹 디자인 및 프로그래밍 시 자주 활용되는 주요 플러그인 사이트 5
  • Table 태그
DREYA
DREYA
한발 한발 나아가는 Delight(기쁨) 개발일지는 이곳에서 → https://velog.io/@jaidy/posts
  • DREYA
    Delight
    DREYA
    • 분류 전체보기
      • Algorithm
      • Psychology
      • Development
        • HTML
        • CSS
        • JavaScript
        • TypeScript
        • React
        • Vue.js
        • Spring
        • SQL
        • 웹 최적화
      • Design
  • 블로그 메뉴

    • 개발일지🍀
  • 공지사항

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
DREYA
HTML의 기본 구조와 개념
상단으로

티스토리툴바