[ html5 ] html작성법, 제목,문단,목록, 유효성검사

HTML5

[ html5 ] html작성법, 제목,문단,목록, 유효성검사

변쌤(이젠강남) 2023. 8. 17. 19:59

html작성법과 제목, 문단, 목록

HTML과 CSS는 웹 개발의 기본이 되는 두 가지 핵심 기술입니다.

HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조의 스타일을 지정합니다.

HTML (HyperText Markup Language)

정의:

HTML은 웹 페이지의 콘텐츠와 구조를 정의하는 마크업 언어입니다.

기능:

구조 정의: 웹 페이지의 제목, 단락, 목록, 링크, 이미지 등을 정의합니다.
하이퍼텍스트: 다른 페이지나 리소스로의 링크를 제공합니다.

기본 요소:

태그: HTML 요소는 시작 태그와 종료 태그로 구성됩니다

<tagname>내용</tagname>

속성: 태그는 추가 정보를 제공하는 속성을 가질 수 있습니다.

<img src="image.jpg" alt="Description">

기본예)

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <a href="https://www.example.com">Visit Example</a>
  <img src="image.jpg" alt="An example image">
</body>
</html>

CSS (Cascading Style Sheets)

정의:

CSS는 HTML로 작성된 웹 페이지의 스타일을 지정하는 스타일시트 언어입니다.

기능:

스타일 지정: 텍스트의 색상, 글꼴, 간격, 배경색, 레이아웃 등을 지정합니다.
레이아웃 조정: 웹 페이지의 요소를 배치하고 정렬합니다.
반응형 디자인: 다양한 화면 크기와 장치에 맞게 웹 페이지의 스타일을 조정합니다.

기본 요소:

선택자: 스타일을 적용할 HTML 요소를 선택합니다

element {
  property: value;
}

속성 및 값: 선택된 요소에 적용할 스타일을 지정합니다.

h1 {
  color: blue;
  font-size: 24px;
}

/* styles.css */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333333;
  text-align: center;
}

p {
  color: #666666;
  line-height: 1.5;
}

html/css 형식)

<!DOCTYPE html>
<html>
<head>
  <title>Styled HTML Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a styled paragraph.</p>
  <a href="https://www.example.com">Visit Example</a>
  <img src="image.jpg" alt="An example image">
</body>
</html>

HTML과 CSS는 웹 개발의 기본이 되는 기술로서, 각각 웹 페이지의 구조와 스타일을 정의합니다. HTML을 사용하여 웹 페이지의 콘텐츠와 구조를 만들고, CSS를 사용하여 그 구조에 스타일을 적용합니다. 이 두 기술을 함께 사용하면 시각적으로 매력적이고 기능적인 웹 페이지를 만들 수 있습니다.

1. 작성법

- 파일 - 폴더열기 - 저장폴더 선택

- 왼쪽 메뉴에서 폴더 마우스 우측 또는 상단 아이콘 새 파일

- 파일명. html

-!, 또는 html5 엔터 또는 탭 - 기본 템플릿 구조 생성

- title에 내용 입력, body에 작성 위 영상 참고

- 마우스 우측 - Open with Live Server

- 기본 브라우저 ( 크롬 ) 결과 확인

HTML 파일명 규칙

소문자 사용
- 파일명은 소문자로 작성합니다. 이는 일관성을 유지하고, 일부 운영체제에서 대소문자를 구분하기 때문에 문제가 발생하는 것을 방지합니다.
공백 대신 하이픈 사용
- 파일명에 공백을 사용하지 않습니다. 대신 하이픈(-)을 사용하여 단어를 구분합니다. 이는 URL에서 공백이 %20으로 변환되는 것을 피하고 가독성을 높입니다.
특수문자 사용 금지
- 파일명에 특수문자(예: !, @, #, $, %, ^, &, *)를 사용하지 않습니다. 특수문자는 URL에서 문제가 될 수 있습니다.
확장자 사용
- HTML 파일의 확장자는 .html로 통일합니다.
짧고 의미 있는 이름 사용
- 파일명은 짧고, 해당 파일의 내용을 잘 설명할 수 있도록 합니다.
숫자 사용
- 필요할 경우 숫자를 사용하여 파일명을 구분할 수 있습니다.

예)

index.html
about-us.html
contact-us.html
products.html
blog.html
article1.html
article2.html
services.html
faq-v1.html
faq-v2.html
about-us-en.html
about-us-kr.html

HTML 파일명 규칙을 준수하면 파일을 쉽게 관리할 수 있으며, 웹사이트의 일관성과 가독성을 높일 수 있습니다. 이러한 규칙은 SEO와 접근성 향상에도 기여하므로, 웹 개발 시 반드시 고려해야 합니다.

* SEO (Search Engine Optimization) : 검색 엔진 최적화를 의미하며, 웹사이트나 웹 페이지를 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 나타나도록 최적화하는 과정입니다.

태그 정리

태그	설명	mdn	W3Schools
<html>	최상위	바로가기	바로가기
<title>	문서의 제목	바로가기	바로가기
<body>	본문	바로가기	바로가기
<h1> ~ </h6>	제목	바로가기	바로가기
<!-- 주석,설명 -->	설명, 주석
<p>	문단,단락	바로가기	바로가기
<br>	강제줄바꿈 ( 빈태그 )	바로가기	바로가기
<ul>	순서 없는 목록	바로가기	바로가기
<ol>	순서 있는 목록	바로가기	바로가기
<li>	항목	바로가기	바로가기
<dl>	정의하는 목록	바로가기	바로가기
<dt>	정의될 용어	바로가기	바로가기
<dd>	정의하는 설명	바로가기	바로가기

1. 제목 ( Heading ) 요소 - h1 ~ h6

<h1> ~ <h6>: 제목 태그로, 웹 페이지의 제목 수준을 정의합니다.

* Heading의 h

* 문서나 구분된 영역의 제목을 나타냄

* 숫자가 낮을수록 중요한 제목

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>제목 h1 ~ h6 </title>
</head>
<body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
</body>
</html>

2. 문단(p), 강제 줄 바꿈 (br)

<p>: 문단 태그로, 텍스트 단락을 정의합니다.

<br>: 줄 바꿈 태그로, 텍스트 내에서 줄을 바꿉니다.

문단 : paragraph => p

강제개행 : line-break => br

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>문단,강제줄바꿈</title>
</head>
<body>
   <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Quos eaque recusandae delectus facilis earum quaerat quasi nesciunt,
    harum fuga iusto vero, nisi repellat maxime omnis minima explicabo 
    laborum aut vitae.
   </p>
   <p>
    Lorem ipsum dolor, sit amet consectetur<br>adipisicing elit. Quos eaque recusandae<br>
    delectus facilis earum quaerat quasi nesciunt,<br>
    harum fuga iusto vero, nisi repellat maxime<br>omnis minima explicabo laborum aut vitae.
   </p>

</body>
</html>

목록 태그

<ol>: 순서 있는 목록 태그로, 번호가 매겨진 목록을 정의합니다.
<ul>: 순서 없는 목록 태그로, 불릿 기호가 있는 목록을 정의합니다.
<li>: 목록 항목 태그로, 목록 내의 각 항목을 정의합니다.
<dl>: 설명 목록 태그로, 용어와 정의로 구성된 목록을 정의합니다.
<dt>: 설명 목록의 용어 태그로, 용어를 정의합니다.
<dd>: 설명 목록의 정의 태그로, 용어에 대한 설명을 정의합니다.

3. 순서 있는 목록 ( ol ) , 순서 없는 목록 ( ul ), 항목 ( li )

순서 있는 목록 : ol ( Ordered List )

순서 없는 목록 : ul ( Unordered List )

자식으로 각 항목 li ( List item )

ol이나 ul의 자식은 li만 올 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title> 목록 </title>
</head>
<body>
   <h2>순서 있는 목록</h2>
   <ol>
    <li>사과</li>
    <li>수박</li>
    <li>옥수수</li>
    <li>오렌지</li>
   </ol>
  
   <h2>순서 없는 목록</h2>
   <ul>
    <li>사과</li>
    <li>수박</li>
    <li>옥수수</li>
    <li>오렌지</li>
   </ul>
</body>
</html>

4. 정의형 목록 (dl) 용어 (dt)와 그 설명( dd)

'용어'와 '그 설명'으로 구성된 목록을 '정의형 목록'(definition list)이고 정의형 목록은 dl요소로 정의하고 용어를 나태는 dt(definition term) 요소와 그 설명인 dd(definition description) 요소를 포함합니다.

<dl>
    <dt>과일의 종류</dt>
    <dd>사과</dd>
    <dd>수박</dd>
    <dd>옥수수</dd>
    <dd>오렌지</dd>
</dl>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language의 약자로, 웹 페이지를 구성하는 언어입니다.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 지정하는 언어입니다.</dd>

    <dt>JavaScript</dt>
    <dd>웹 페이지에 동적인 기능을 추가하기 위한 스크립트 언어입니다.</dd>

    <dt>Python</dt>
    <dd>일반적으로 사용되는 고급 프로그래밍 언어로, 문법이 쉽고 간결합니다.</dd>
</dl>

5. div : division

특별한 의미가 없는 순수한 컨테이너 역할을 합니다.

레이아웃을 만들거나 콘텐츠를 나누는 데 사용됩니다.

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정

의미 없는 태그 , 단순히 영역을 묶어줄 때 사용 합니다.

6. 문장 내에서 사용하는 요소

strong : 강한 강조

em : 약한 강조

span : 의미 없는 다른 글자와 구분을 목적으로 사용

b : 의미없는 다은글자와 구분을 목적으로 사용

i : 다른 글자와 구분되는 기술적 용어, 관용구, 생각 등에 사용 ( 아이콘 )

<strong>: 강조 태그로, 텍스트를 굵게 표시합니다.
<em>: 강조 태그로, 텍스트를 기울임체로 표시합니다.

태그	설명	mdn	W3Schools
div	구조 ( 의미없음 )	바로가기	바로가기
strong	강한 강조	바로가기	바로가기
em	약한 강조	바로가기	바로가기
span		바로가기	바로가기
b		바로가기	바로가기
i		바로가기	바로가기

<p>웹 개발을 배우는 것은 <strong>매우 중요합니다</strong>.</p>
<p>특히 <em>HTML</em>과 <em>CSS</em>는 기본 중의 기본입니다.</p>
<p>책에서 중요한 부분은 <i>이탤릭체</i>로 표시할 수 있습니다.</p>
<p>또한 중요한 키워드는 <b>굵게</b> 표시할 수 있습니다.</p>
<p>특정 부분을 스타일링하려면 <span style="color: red;">span 태그</span>를 사용할 수 있습니다.</p>

strong: 중요성을 강조하며, 기본적으로 굵게 표시됩니다.
em: 의미를 강조하며, 기본적으로 이탤릭체로 표시됩니다.
i: 이탤릭체로 표시하지만 의미 강조가 아닙니다.
b: 굵게 표시하지만 중요성을 강조하지는 않습니다.
span: 특정 텍스트를 스타일링할 때 사용되며, 이 예제에서는 글자 색상을 빨간색으로 지정했습니다.

7. 접근성 참고 사이트

https://www.wah.or.kr:444/

웹접근성 연구소

www.wah.or.kr:444

https://www.wa.or.kr/index.asp

한국웹접근성인증평가원

고객상담센터 02-858-7220 평일 09:00~18:00 (주말/공휴일 제외)

www.wa.or.kr

8. 유효성 검사

https://validator.w3.org/nu/

Ready to check - Nu Html Checker

This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change

validator.w3.org

예)

<div>
        <h2>모두가 꿈꾸는 최고의 삶<br>
            모두가 바라는 '좋은 집'의 기준</h2>
        <p>
            e편한세상은 줄곧 ‘좋은 집’의 기준을 만들어 왔습니다.
            사람들의 마음을 한 발 앞서 읽는 혁신적인 기술과 가장 편안한 공간으로
            살아볼수록 매력과 가치가 느껴지는 생활의 터전을 만들어 갑니다.
        </p>
    </div>

<div>
    <h3>회전근개파열</h3>
    <p>어깨를 덮고 있는 네 개의 근육이 합해져 하나처럼 된 회전근개라는 
    힘줄이 파열된 것을 회전근개파열이라고 합니다. 또한 회전근개파열 질환은 혈액순환, 
    압박이나 손상 등으로 나타나는 질환입니다. 어깨 근육 파열의 경우 심한 운동 후에 파열 
    증상이 나타나게 되는데 통증이 심한 것이 특징입니다.
    </p>
</div>

'HTML5' 카테고리의 다른 글

[ HTML5 ] table , form 요소 (9)	2024.02.28
[ html5 ] # 카카오 , 트위터, 메타, 파비콘 (0)	2023.09.06
[ html5 ] 시맨틱 태그 (0)	2023.08.21
[ html5 ] 이미지, 링크 , 엔티티 코드, 동영상 (0)	2023.08.17
[코딩에디터] 비주얼스튜디오 코드(Visual Studio Code) 설치 , 확장 플러그인(Extension) 설치 방법 (0)	2023.06.01

현재글[ html5 ] html작성법, 제목,문단,목록, 유효성검사

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

일	월	화	수	목	금	토
			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

fullstack-study