DEV/HTML

HTML | 기초

devvnn 2021. 12. 28. 19:36
웹(Web)이란?

 

  • World Wide Web의 줄임말
  • WWW라고 부르기도 함
  • 인터넷을 이용해 정보를 공유할 수 있는 공간
  • 가상 공간의 네트워크가 거미줄처럼 연결되어 있어 '웹'이라고 부르게 됨

 

 

웹 표준(Web Standard)

 

  • 웹에서 사용되는 표준 기술이나 규칙을 의미
  • W3C의 권고안에서 나온 기술들이 여기에 해당
  • 이 표준 기술들을 기준으로 웹 브라우저들이 만들어지는데, 브라우저를 만드는 업체에서 표준 기술을 해석하는 차이 및 새로운 기술 삽입(표준화 제정 단계에 따른) 등으로 조금 다르게 구동되는 브라우저가 생기게 됨
  • 웹 브라우저 = 크롬, IE, 사파리 등
  • 브라우저를 만드는 업체 = 구글, MS, 애플 등

 

 

크로스 브라우징(Cross Browsing)

 

  • 각자 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면이나 같은 동작 등)을 줄 수 있도록 제작하는 기술 및 방법 등

 

 

웹 접근성(Web Accessibility)

 

  • 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적 혹은 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 컨텐츠를 제작하는 방법
  • 청각 장애인을 위해 영상에 자막을 넣거나, 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 사용할 수 있게 하거나, 이미지에 대체 텍스트를 제공하는 것 등이 모두 웹 접근성에 해당

 

 

HTML(Hyper Text Markup Language)

 

  • 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어
  • 웹의 구조를 담당
  • 튼튼한 구조를 만드는 것에 집중해야함

 

 

CSS(Cascading Style Sheets)

 

  • 마크업 언어(HTML, XML 등)가 실제 표시되는 방법을 지정하여 컨텐츠 구조를 꾸며주는 정적 언어
  • 웹의 시각적인 표현을 담당
  • 디자인 요소에 집중해야함

 

 

JS(JavaScript)

 

  • 컨텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 동적 언어
  • 웹의 동적 처리를 담당
  • jQuery : 자바스크립트 라이브러리 문서로, 자바스크립트의 명령을 간단하고 안전하게 사용할 수 있게 함

 

 

태그(Tag)

 

  • 태그는 열리고(open) 닫히는(close) 구조를 가지고 있으며 한 쌍으로 이루어짐
  • 시작하고 종료되는 구조라고 부르기도 하며, 이 구조는 태그의 범위를 만들어줌
  • <tag>CONTENT</tag>

 

 

빈 태그

 

  • HTML에는 닫히는 개념이 없는 태그들이 있으며, 아래와 같은 형태를 가짐
  • <tag>
  • <tag/>

 

 

속성

 

  • 태그(요소)의 기능을 확장하기 위해 아래와 같이 '속성'을 사용할 수 있음
  • <tag 속성="값"></tag>
  • 속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있음
  • 속성이 항상 가져야 하는 것 ① 요소 이름(또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 함 ② 속성 이름 뒤에는 등호(=)가 와야 함 ③ 속성 값의 앞 뒤여 열고 닫는 인용부호(" or ')가 있어야 함

 

 

HTML 문서의 구조

 

<!DOCTYPE html>
<html>
    <head>
        문서의 정보
    </head>
    
    <body>
        문서의 구조
    </body>
</html>
 

 

  • DOCTYPE(DTD, 버전 지정) - 마크업 언어에서 문서 형식을 정의(현재 표준 모드 : HTML5)
  • HTML(전체 범위) - HTML 문서의 전체 범위를 지정
  • HEAD(정보 범위) - 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정
  • BODY(구조 범위) - 웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 BODY 안에서 생성

 

 

<HEAD>

 

※ <head></head> 안에 사용하는 태그들은 문서의 정보를 가짐

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="홍길동">
        <title>내 사이트</title>
        <link rel="style" href="./css/main.css">
        <script scr="./js/main.js"></script>
    </head>
    
    <body></body>
</html>
 

 

  • TITLE(웹 페이지의 제목) - HTML 문서의 제목을 정의하고, 웹 브라우저의 각 사이트 탭에서 이름으로 표시됨
  • META(웹 페이지의 정보) - HTML 문서에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공하며 빈 태그임
  • LINK(CSS 불러오기) - 외부 문서를 연결할 때 사용하며, 특히 HTML 외부에서 작성된 CSS 문서를 볼러와 연결할 때 사용함. 빈 태그
  • STYLE(CSS 작성하기) - CSS를 HTML 문서 내부에 작성할 때 사용
  • SCRIPT(JS 불러오거나 작성)

 

 

<BODY>

 

※ <body></body> 안에 사용하는 태그들은 문서의 구조를 나타냄

 

<!DOCTYPE html>
<html>
    <head></head>
    
    <body>
    <h1>제목입니다</h1>
    </hr>
    <div>
        <p>문단1 입니다.</p>
        <p>문단2 입니다.</p>
    </div>
    </body>
</html>
 

 

  • <h1~6></h1~6> - 글의 제목을 표현하는데 사용
  • <div> - division의 약자로 반할을 뜻하며, 문서의 부분이나 섹션을 정의
  • <p> - HTML 문서의 단락을 표현하는데 사용