HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로의 변환기 키보드 단축키

HTML 레이아웃 요소 및 기술


웹사이트는 잡지나 신문과 같은 여러 열에 콘텐츠를 표시하는 경우가 많습니다.


예시

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


HTML 레이아웃 요소

HTML에는 웹 페이지의 다른 부분을 정의하는 몇 가지 의미론적 요소가 있습니다.

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
HTML5 시맨틱 요소
  • <header> - 문서 또는 섹션의 헤더를 정의합니다.
  • <nav> - 탐색 링크 세트를 정의합니다.
  • <section> - 문서의 섹션을 정의합니다.
  • <article>- 독립적이고 독립적인 콘텐츠를 정의합니다.
  • <aside>- 콘텐츠 이외의 콘텐츠 정의(사이드바 등)
  • <footer>- 문서 또는 섹션의 바닥글을 정의합니다.
  • <details>- 사용자가 필요에 따라 열고 닫을 수 있는 추가 세부 정보 정의
  • <summary>- <details>요소 의 제목을 정의합니다.

HTML 의미론에서 의미론적 요소에 대해 자세히 읽을 수 있습니다 .


HTML 레이아웃 기법

여러 열 레이아웃을 만드는 네 가지 기술이 있습니다. 각 기술에는 장단점이 있습니다.

  • CSS 프레임워크
  • CSS 부동 속성
  • CSS 플렉스박스
  • CSS 그리드


CSS 프레임워크

레이아웃을 빠르게 생성하려면 W3.CSS 또는 Bootstrap 과 같은 CSS 프레임워크를 사용할 수 있습니다 .

W3Schools Spaces 에 대해 들어본 적이 있습니까? 여기에서 웹사이트를 처음부터 만들거나 템플릿을 사용하여 무료로 호스팅할 수 있습니다.

무료로 시작하세요 ❯

* 신용카드 불필요


CSS 플로트 레이아웃

floatCSS 속성 을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적 입니다. Float은 배우기 쉽습니다 . float clear속성이 어떻게 작동하는지 기억하기만 하면 됩니다. 단점: 부동 요소는 문서 흐름에 연결되어 유연성에 해를 끼칠 수 있습니다. CSS 부동 및 지우기에서 부동에 대해 자세히 알아보십시오 .

예시

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS 플렉스박스 레이아웃

flexbox를 사용하면 페이지 레이아웃이 다양한 화면 크기와 다양한 디스플레이 장치를 수용해야 할 때 요소가 예상대로 작동하도록 합니다.

CSS Flexbox에서 flexbox에 대해 자세히 알아보십시오 .

예시

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


CSS 그리드 레이아웃

CSS 그리드 레이아웃 모듈은 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공하므로 부동 소수점과 위치 지정을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.

CSS 그리드 소개에서 CSS 그리드에 대해 자세히 알아보세요 .