은은하게 코드 뿌시기

HTML5 문서 구조와 작성 규칙, 레이아웃 본문

웹/html

HTML5 문서 구조와 작성 규칙, 레이아웃

은은하게미친자 2022. 7. 5. 16:21
728x90

* HTML5 문서의 구조

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>   <!-- html5 로 작성된 웹문서임을 나타냄-->
<html>
 
<head> <!-- html5 문서의 머리-->
    <title>제목영역</title>
</head>
 
<body> <!-- html5 문서의 본문-->
    <p>본문 영역1</p>
    <p>본문 영역2</p>
</body>
 
 
</html>
 cs

<!DOCTYPE html>  :  html5문서를 선언하는 구문.하위 호완성을 위해 작성을 권장.(생략가능)

<html> : html5문서의 시작

</html> : html5문서의 끝

 

[html  주의사항 및 특징]

* 태그 이름은 대소문자를 구분 하지 않음.(소문자권장)

* 본문내 연속된 공북이나 줄바굼은 하나의 공백으로 처리

* 태그의 포함관계 - 들여쓰기 적용

* 태그 중첩 주의 : 열고 닫기가 하나의 구조안에서 처리 되도록 할것!

* 종료 태그 반드시 사용할것.

* 주석 : <!--  -->

* 태그를 사용자가 직접 정의 하여 사용할수있음

 

*태그의 속성 : <태그이름 속성이름 ="값">  내용 </종료 태그>

글로벌 속성
속성 설명
accesskey="단축키" 공백으로 구분하여 여러개의 단축키를 지정할 수 있다. 단축키를 작성한 순서대로 순위가 매겨지기 때문에 제일 처음 작성한 단축키가 적용된다.
class="클래스명" 공백으로 구분하여 여러개의 클래스명을 지정할 수 있따. 클래스속성은 동일한 문서 안에 있는 여러개의 태그에 동일한 이름으로 지정할 수 있다. 스타일 시트를 적용할 경우에는 셀렉터로도 이용가능하다.
contrteditable="편집할 수 있는지 없는지" 편집할 수있는 경우에는 true로 지정하고 빈문자(" ")이거나 편집할 수 없는 경우에는 false로 지정한다.
contextmenu="menu 요소의 id 속성값" 메뉴 요소의 id속성값을 지정한다.
dir="텍스트 표시 방향" 왼쪽에서 오른쪽인 경우에는 ltr, 오른쪽에서 왼쪽인 경우에는 rtl로 지정한다.
draggable="드래그할 수 있는지 없는지" 드래그 할  수 있는 경우에는 true, 드래그할 수 없는 경우에는 false로 지정한다.
dropzone="드롭한 아이템 처리방법" 값을 copy로 지정하면 드래그한 데이터가 이 장소에 복사되고, move로 지정하면 드래그한 데이터가 이동한다. 또한 link라고 지정하면 오리지널 데이터와 드롭된 곳 사이에 어떤 연결이 만들어진다.
hidden="hidden" 이 속성이 지정된 요소는 브라우저에 표시되지 않는다.
id="이름" 문서 내에 해당태그를 유일하게 식별하는 역할, 동일한 문서 내에서 동일한 이름을 중복하여 사용 할 수 없다.
lang="언어코드" 한국어는 ko, 영어는 en, 미국영어는 en-US, 프랑스어는 fr, 일본어는 ja 등 언어의 속성값을 지정한다.
spellcheck="철자 체크를 할 것인지말것인지" 철자체크를 할 것인지 말 것인지 지정한다.
style="CSS 선언" 세미콜론으로 구분하면 여러개의 css선언을 지정 할 수있다.
tabindex="이동순서" 실제로 탭키를 이용하는지 아닌지는 환경에 따라 다르다. 값에는 정수를 지정하며, 값이 작은것에서 큰것으로 이동된다. 값이 0으로 지정된 요소와 tabindex 속성이 지정되어 있지 않은 요소는 1 이상의 값이 지정되어 있는 요소 다음으로 포커스가 이동된다. 또한 마이너스 값을 지정한 경우. 포커스는 가능하지만 탭 키에 의한 이동 대상은 되지 않는다.
문법 설명 예제
<a href = "url"> url 사이트로 이동 <a href="http://www.naver.com"> 네이버로 이동</a>
<br> 엔터값 안녕<br>하세<BR>요

 

*웹문서의 레이아웃

구조적 태그 요소

 

<header>  머리말
<nav> 네비게이션(navigation) 영역으로 웹 사이트 내에 분류된 다른 영역으로 이동 할 때 사용
<section> 문서의 영역을 구성할 떄 사용. <header>.<article> 태그 등 포함 할 수 있음.
<article> 독립된 주요 콘텐츠 영역을 정의, 하나의 <section> 태그 내에 여러개의 <article> 태그를 구성할 수 있음.
<aside> 주요 콘텐츠 이외에 남은 콘텐츠를 표시
<footer> 사이트의 자세한 정보를 표시

 

 

 

 

 

 

*<hr> 요소 : 구분선(horizontal line)을 그을 때 사용

속성 값 설명
align left, center, right 수평선 정렬 지정
noshade noshade 수평선 입체감 제거
size pixels 수평선 두께 지정
width  piels,% 수평선 상대적 넓이

 

 

*예제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<% //html구문칠꺼야잉 http://localhost:8080/testjsp/htmlcss/test02.jsp %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 연습</title>
</head>
<body>
    하이퍼링크<br>
    <a href="http://www.naver.com"> 네이버로 이동</a><br>
    <a href="http://www.google.com"> 구글로 이동</a><br>
 
    <div>
        영역           &nbsp;&nbsp;&nbsp;        영역 <br>
    </div>
    <p>
        p태그는 한줄을 띄울때 사용합니다. 글자간 위아래 띄어쓰기가 되용
    </p>
    무슨말인가?<br>
    <h1> 제목 </h1>
    <h2> 제목 </h2>
    <h3> 제목 </h3>
    <h4> 제목 </h4>
    <h5> 제목 </h5>
    <h6> 제목 </h6>
    <h7> 제목 </h7>
    <h8> 제목 </h8>
    <h9> 제목 </h9>
    
    <h1> 점심뭐먹어? </h1>
    <h2> 점심뭐먹어? </h2>
    <h3> 점심뭐먹어? </h3>
    <h4> 점심뭐먹어? </h4>
    <h5> 점심뭐먹어? </h5>
    <h6> 점심뭐먹어? </h6>
    <h7> 점심뭐먹어? </h7>
    <h8> 점심뭐먹어? </h8>
    <h9> 점심뭐먹어? </h9>
    <!-- html 주석은 요겁니당. 주석 지웠는데 될때가 있었다더라.... -->
    <lunch> <br> 여기는 점심영역 사용자 지정태그 쌉가능 </lunch>
    <lunch> <br> 웹크롤링 : web상에 존재하는 contents를 수집하는 작업 </lunch>
</body>
</html>
 cs

 

*html 이론 참고 사이트 :

http://www.tcpschool.com/html/html_intro_basic

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

728x90

'웹 > html' 카테고리의 다른 글

폼 태그/ FORM 태그  (0) 2022.08.02
부트스트랩 참고사이트  (0) 2022.07.14
html 박스 속성  (0) 2022.07.07
html 기본태그 멀티태그  (0) 2022.07.05
html 특수문자 코드표  (0) 2022.07.05
'웹/html' Related Articles more
Comments