[HTML/CSS] HTML, HTML이란?

ktmihs·2021년 9월 27일
0

HTML-CSS

목록 보기
1/14
post-thumbnail

CH1. HTML

1) HTML(HyperText Markup Language)

이전에는 다른 페이지로 이동하기 위한 요소만을 가리켰지만, 요즘에는 웹 문서를 이루고 있는 요소 하나하나를 전부 Hypertext라고 보면
된다.


2) 웹브라우저

  • 웹브라우저 : html로 작성된 파일을 구동할 수 있는 프로그램
    HTML 📄 ↔ 웹브라우저 💻
    ex) 크롬, 엣지, 익스플로러, 사파리 등

  • 웹브라우저의 다양한 역할
    • 문서를 보여주는 뷰어 역할
    • 검색 등 다양한 부가 기능
    • 웹 페이지를 분석할 수 있는 개발 도구 제공

3) Markup Language

  • 프로그래밍 언어 : 데이터를 가공
  • 마크업 언어 : 어떤 방식으로 어디에 어떻게 표현할지를 기술

html은 웹페이지를 위한 마크업 언어 !


4) HTML, CSS, Javascript

[구조] HTML : 웹 문서의 기본적인 골격을 담당

[표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당

  • 사용자의 웹페이지를 사용할 때의 경험 증대
  • 웹 페이지만의 아이덴티티

[동작] Javascript : 동적인 요소 (사용자와의 인터렉션)을 담당

  • 사용자의 행동에 의해 동작 제어
  • HTML과 CSS까지만으로는 정적인 정보 전달이 주를 이루지만, javascript를 사용한다면 단순히 보여지는 형태가 아닌 웹어플리케이션 형태를 띠게 됨

HTML과 CSS가 나누어있다면 스타일링과 레이아웃만 다른 두 개의 웹페이지를 만들 수 있음 (ex.웹용과 모바일용)


5) 웹 표준, 웹 접근성, 웹 호환성

웹 표준 (Web Standards)

  • html5(2014년 W3C) ➡ HTML Living Standard(2019년 WHATWG)
  • HTML이 표준화 되기 이전에는 독자적인 플러그인이 존재하기도 함
    ex) 익스플로러의 액티브X
  • 웹 표준을 준수하여 작성한다면 운영체제, 브러우저마다 의도된대로 보여지는 웹 페이지를 만들 수 있음

웹 접근성 (Web Accessibility)

  • 일시적으로 키보드나 마우스를 사용할 수 없는 경우에도 브라우저를 사용할 수 있게 해줌
    ex) 화면 돋보기, 스크린리더, 음성 인식, 키보드 오버레이 등

웹 호환성 (Cross Browsing)

  • 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근
  • 웹 표준 준수를 통한 브라우저 호환성 확보
    • HTML, CSS 문법 준수
    • 동작, 레이아웃, 플러그인 호환성

웹 표준, 웹 접근성, 웹 호환성이 좋을수록, 더 나은 코드와 웹 페이지를 만들 수 있음 !




CH2. HTML이란?

1) HTML은 어떻게 생겼을까

  • 웹 페이지를 구성하고 있는 요소 하나하나를 "태그"라는 표기법을 작성
  • 태그를 통해 어떤 요소인지 명시
    ex) 제목, 본문, 이미지, 비디오 등
  • 태그의 이름은 HTML5 웹 표준에 맞게 작성

HTML 형태

 <p>내용</p><opening tag>내용(content)</closing Tag>
// ⇒ 세 개를 통틀어 요소(element)라고 함

태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장


2) 빈 요소

  • 내용이 없는 요소 == 빈 요소(Empty element)
    ex) 이미지, 수평선, 줄바꿈 등
  • 이 경우 닫는 태그를 추가로 명시하지 않아도 됨
    ➡ Empty element, Self-Closing element, Void element, single tag
// 빈 요소 example
<br>
<hr>
<tag scr="~~">
<meta charset="~~~">
<input type="~" name="~">
  • 작성 방법 : <br> or <br/>
    (opening tag or self-closing tag)

어떤 방법으로든 일관성 있게만 작성하면 된다 !


3) 요소의 중첩 (Nesting)

  • 요소 안에 다른 요소가 들어가는 포함관계 성립
  • 여러 요소가 중첩될 경우, 열린 순서의 반대로 닫아야 함
    (최근 연 것부터 닫기)
  • 들여쓰기로 포함관계 구분
//요소의 중첩 예시
<body>
	<h1>title</h1>
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
</body>

4) 주석 (Comments)

  • 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 함
  • 주석의 목적:
    • 코드에 메모 추가
    • 사용하지 않는 코드를 임시로 처리
  • ex)
<!-- html 주석처리된 내용 -->
// js 주석처리된 내용
# 파이썬 주석처리된 내용

5) HTML 문서의 구조

  • <html> : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소
    • <head> : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보
      • head tag는 한 파일에 하나만 존재
      • <head>의 주 목적은 기계 처리를 위한 정보로, 사람이 읽을 수 있는 정보가 아님
        ➡ 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 <header> 요소를 사용
      • <meta> : 문서의 일반적인 정보와 문자 인코딩을 명시
      • <title> : 웹페이지의 제목
    • <body> : 웹브라우저 화면에 나타나는 모든 콘텐츠
      • body tag는 한 파일에 하나만 존재
      • html 문서의 내용을 나타냄

⬇ html code example

<!-- html example -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>page title</title>
  </head>
  
  <body>
    <a href="/login">
      <div>
        <h2>로그인 하러 가기</h2>
        <br/>
        <h6>로그인 후 사용합니다 <i>click</i></h6>
      </div>
    </a>
  </body>
</html>

6) HEAD 태그

mozilla MDN - head 참고


7) BODY 태그

mozilla MDN - body 참고


8) 태그를 구분짓는 특성

<body> 안에 들어가는 요소만 두 가지로 구분할 수 있음

(1) 구획을 나누는 태그

  • 단독으로 사용했을 때에는 눈에 보이지 않음
  • 여러가지 요소들을 묶어서 그룹화
    ➡ 레이아웃을 위해 사용
    ex) div, span

(2) 자체로 요소인 태그

  • 단독으로 사용했을 때에도 눈으로 확인할 수 있음
    ex) button, input

9) 블록과 인라인

(1) 블록 (block)

  • 블록 레벨 요소는 언제나 새로운 줄에서 시작
  • 좌우 양쪽으로 가능한 모든 너비를 차지
    ex) div

(2) 인라인 (inline)

  • 인라인 요소는 줄의 어느 곳에서나 시작할 수 있음
  • 바로 이전 요소가 끝나는 지점부터 시작, 요소의 내용만큼만 차지
    ex) span

포함 규칙
대부분의 블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 요소를 포함할 수 없음 !


10) 콘텐츠 카테고리

  • HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
  • 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있음

메타데이터 콘텐츠, 플로우 콘텐츠, 섹션 콘텐츠, 프레이징 콘텐츠, 임베디드 콘텐츠, 인터렉티브 콘텐츠




CH3. 실습환경 세팅

1) 웹 에디터와 통합개발환경

웹 에디터 (편집기)

  • HTML 문법에 맞추어 편리하게 작성할 수 있도록 도와주는 편집기
  • 문법에 따라 색깔, 들여쓰기 등을 구분할 수 있음
  • 온라인 웹 에디터 : jsbin , replit , codeopen

통합개발환경 (IDE)

  • 개발을 할 때, 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록 함
    ex) VScode, intelliJ, Xcode, Eclipse 등
  • 툴 종류
    • 소스코드 편집기
    • 빌더
    • 디버거
    • 플러그인

2) VScode 단축키

vscode 단축키 github.io



📝 Notion link ✔


profile
💛

0개의 댓글