웹페이지 구성

HTML5, CSS3, JAVASCRIPT 개요

HTML5

웹 페이지상에서 문단, 제목, 표, 이미지, 동영상등을 정의하고 그 구조와 의미를 부여하는 마크업 언어를 의미합니다.

CSS3

배경색, 폰트, 컨텐츠의 레이아웃등을 지정하여, HTML 컨텐츠를 꾸며주는 스타일 규칙 언어를 의미합니다.

JAVASCRIPT

동적으로 컨텐츠를 변경할 수 있도록 하는 프로그래밍 언어를 의미합니다.

HTML(HyperText Markup Language)

마크 업을 사용하여 웹 페이지의 구조를 설명하는 HTML 태그(Tag), HTML 요소(Element), HTML 속성(Attribute) 으로 구성하는 언어를 의미합니다.

HTML 태그(Tag)

HTML 문서를 구성하는 명령어를 의미합니다.

<태그>로 작성합니다.

HTML 요소(Element)

시작태그와 종료태그 사이의 모든 내용을 의미합니다.

HTML 속성(Attribute)

요소의 추가 정보를 제공합니다.

시작태그에 추가합니다.

속성이름=“속성값"

HTML 기본 태그

태그(Tag)	설명	비고
<!-- -->	주석처리
<!DOCTYPE html>	문서 타입 정의 (HTML5 문서임을 정의함)
<a>	하이퍼링크를 정의함
<body>	문서의 본문을 정의함
<br>	줄바꿈 태그로 해당 태그를 만나면 줄을 바꿔줌	종료 태그 없음
<div>	문서의 섹션을 정의함
<h1>~<h6>	제목을 나타내며 <h1>이 제일 중요한 제목으로 글자크기가 제일 크다.	자동 단락 나눔
<head>	문서에 관한 정보를 정의함
<hr>	수평줄을 그어줌	종료 태그 없음
<img>	이미지를 표시함
<li>	목록의 아이템을 표시함
<ol>	순서가 있는 목록태그로 아이템은 <li>태그로 표시함
<ul>	순서가 없는 목록태그로 아이템은 <li>태그로 표시함
<title>	문서 타이틀 정의(웹 브라우저의 툴바나 타이틀바에 표시함)
<p>	문단태그로 단락을 나눠줌

HTML 블록(Block) 요소

줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비를 사용합니다.
<div> 태그에서 주로 사용합니다.
<p>,<ul>,<ol>,<li>,<h1>~<h6> 태그에서 사용합니다.

<div style="background-color: yellow;">블록(Block) 요소 </div>

HTML 인라인(Inline) 요소

새 줄에서 시작되지 않고 필요한 만큼 너비를 차지합니다.
<span>, <a>, <img> 태그에서 사용합니다.

<span style="background-color: pink;">인라인(inline) 요소</span>

블록요소(Block)와 인라인 요소(Inline)를 동시에 실행한 결과는 다음과 같습니다.

HTML5 시맨틱 태그(Semantic tag)

HTML5 에서 지원하는 시맨틱 태그(Semantic tag) 는 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가된 태그를 의미합니다.

<header>

페이지나 섹션의 머리말을 표현합니다.

페이지 제목, 페이지를 소개하는 간단한 설명을 표기합니다.

<nav>

하이퍼링크들을 모아 놓은 특별한 섹션으로 메뉴 부분을 나타내는 태그를 의미합니다.

페이지 내 목차를 만드는 용도로 사용합니다.

<section>

문서의 장(chapter, section) 혹은 절을 구성하는 역할을 하고, 제목별로 나눌 수 있는 태그를 의미합니다

일반 문서에 여러 장이 있듯이 웹 페이지에 여러개의 <section>이 가능합니다.

제목태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제를 기입합니다.

<article>

본문과 연관 있지만, 독립적인 개별 콘텐츠를 나타내는 영역을 의미합니다.

혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용이 위치합니다.

<article>에 담는 내용이 많은 경우 여러 <section> 둘 수 있습니다.

<aside>

본문에서 약간 벗어난 메모나 팁을 담아주는 영역을 의미합니다.

신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등이 위치합니다.

페이지의 오른쪽이나 왼쪽에 주로 배치하여 사이드 바를 나타내는 태그를 의미합니다.

<footer>

웹 페이지 작성 편집기

서브 라임 텍스트 (SublimeText)

( https://www.sublimetext.com/ )

서브 라임 텍스트는 웹퍼블리셔 영역에서 매우 유명한 에디터입니다.
서브 라임 텍스트는 무료이면서 프로그램이 너무 가벼워 프로그램 구동이 매우 빠릅니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML5_CSS_JAVASCRIPT' 카테고리의 다른 글

CSS3 배경 스타일 (0)	2022.05.12
CSS 글꼴과 문자 스타일 지정 (0)	2022.05.09
CSS 선택자 지정 방법 (0)	2022.05.08
CSS 기본 구조와 CSS 문서 적용 방법 (0)	2022.05.07
HTML5 시맨틱 웹을 위한 요소 (0)	2022.05.06

두리몽실 컴실 복실

웹페이지 구성