웹페이지

HTML 기본, 유용한 정보

코딩하는둥이 2022. 11. 6. 21:02

의미와 정의

 - 웹브라우저에서 보이도록 디자인된 문서

 - 표준화된 Markup language 사용

 

Markup language이란?

 - 태그들을 이용해서 구조적으로 작성된 것

 - 일반적인 텍스트를 문법적으로 구분하기 위해서 문서에 주석

<recipe> 
  <title>Peanut-butter On A Spoon </title>
  <ingredientlist>
     <ingredient>Peanut-butter</ingredient>
     <preparation>
       Stick a spoon in ajar of peanut peanut-butter,
       scoop and pull out a big glob of peanut-butter.
     </preparation>
   </ingredientlist>
</recipe>
<!-- <>는 태그이며 </>로 통래 태그를 끝냄, 태그 안에는 컨텐츠
 list안에는 여러 개의 태그가 들어갈 수 있음-->

개발툴 사용

  - https://jsbin.com/?html,output

 

JS Bin

Sample of the bin:

jsbin.com

 

!DOCTYPE html>  <!-- 문서의 타입은 html이다. -->
<html>  <!-- html 태그는 html 파일의 제일 상위에 있는 태그이다. head,body로 구성되어 있음 -->
  <head>  <!-- 제목, 아이콘, cs파일 연결(사용자에게 보여지는 건 없고 메타데이터만 있음) --> 
    <meta charset="utf-8"> <!-- 글자의 포멧은 utf-8사용 -->
    <meta name="viewport" content="width=device-width"> <!-- viewport정의 장치의 넓이를 다 사용함 --> 
    <title>JS Bin</title> <!-- 북마크 추가할때 보여지는 타이틀중 하나 -->
  </head>
  <body> <!-- 사용자에게 보여지는 최상위 컨텐츠 -->
     <h1>Heading1</h1>  <!--제일 큰 문자 -->
     <h2>Heading2</h2>   <!--그다음으로 큰 문자 -->
     <button>Click Me!</button> <!--클릭가능한 버튼 -->
  </body>
</html>

결과

p, b, span, div

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <p>This is a sentence <b>That</b> is</p>
  <p>This is a sentence <span>That</span> is</p> <!-- span으로 css를 통해 색지정, 굵기 지정 가능 -->
  <p>This is a sentence <div>That</div> is</p> <!--block-->
<body>

</body>
</html>

결과

 

ol, ul, li

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <ol type "i" reversed> 
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <ul> <!-- 아이템을 정렬할 떄 많이 씀 -->
    <li>hello</li>
    <li></li>
    <li></li>
  </ul>
<body>

</body>
</html>

결과

 

 - ol

더보기

사용법

  - <ol type=”원하는 타입”>항목을 셀 때 사용할 카운터 유형. 

   - 'a'는 소문자 알파벳, • 'A'는 대문자 알파벳, • 'i'는 소문자 로마 숫자, • 'I'는 대문자 로마 숫자, • '1'는 숫자(기본값)를 나타남(타입지정을 안 하면 1.2.3. 이 나옴)

 targer 종류

  <ol reversed>

     목록의 순서 역전 여부

  <ol start =”시작하기 원하는 숫자”>

    항목을 셀 때 시작할 수

W3C(World Wide Web Consortium)

 - 웹의 표준화를 추진

 - chrome, firefox, safari, Edge

 - 오류 확인 가능: https://validator.w3.org/#validate_by_input

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

MDN

 - 웹개발자들이 정보를 MDN사이트에서 확인

 - https://developer.mozilla.org/ko/ 

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

 - HTML 요소 참고

    https://developer.mozilla.org/ko/docs/Web/HTML/Element

 - 웹사이트 구조확인

    https://validator.w3.org/#validate_by_input

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

 

구성

BOX

- 사용자에게 보이지 않는 것

 - header

 - footer

 - nav

 - aside

 - main

 - section

 - article

 - div

 - span

 - form

 

ITEM

- 사용자에게 보이는 것들

- button

- label

- img

- video

- audio

- map

- canvas

- table

- input

- a

더보기

 뜻

 - href특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듦

사용법 

 <a href=”하이퍼링크가 가리키는 URL” target=링크한 URL을 표시할 위치>

 targer 종류

  • _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
  • _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
  • _parent: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
  • _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

. -  block 

더보기

한 줄에 하나씩 블록형태로 우리가 지정 한대로 표기됨

- inline

더보기

블록 여러 개가 한 줄에 정렬

 

 웹사이트 박스 구성 확인

 - F12 or ctrl +shift +I