HTML 기초

HTML 기초
/category/%ED%95%99%EC%8A%B5%20TIL/HTML

2021. 8. 1. 17:39

HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어입니다. 글자 그대로, HTML은 프로그래밍 언어가 아닙니다. 그러나 HTML은 웹 페이지를 구성하는 뼈대가 되는 언어입니다. HTML은 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있습니다. 다른 코드가 그러하듯, 내가 작성한 HTML 문서도 다른 사람이 읽는 경우가 있습니다. 의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다.

Achievement Goals

HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.

<head>태그 안에 <style></style>을 만들어 style태그 안에 css언어로 작성해주면 된다.
또는, <link rel="stylesheet" href="./Style.css"> 이렇게 css파일을 연결시켜 따로 css만 쓰는 방식으로 해서 CSS를 적용한다.
HTML이 Markup language라는 것을 이해할 수 있다.
- "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
  ex)<head> : Opening tag, </head> : closing tag, <img /> : self-closing tag
자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
- div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
  
  <div> 와 <span> 태그는 영역을 설정할 때 필요합니다. 웹 페이지에 레이아웃을 구성하고자 할 때 없어서는 안 되는 태그입니다. 그럼 두 태그의 차이는 무엇일까요? 두 가지가 있습니다. 하나는 줄 바꿈 입니다. div 는 줄 바꿈이 되지만 span 태그는 옆으로 붙습니다. 두 번째 차이는 영역을 지정하는 방식의 차이입니다. 텍스트를 표현할 때 div 는 사각형 박스로 구역을 정하지만 span 은 문장 단위로 지정합니다.
- ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
  
  ul : unordered list 순서없는 리스트화
  ol : ordered list 순서가 있는 리스트화
  li : list 리스트화
- input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
  
  웹 브라우저에서 무언가를 입력할 때 input을 활용하는데, 타입에 따라 패스워드 입력, 제출 버튼, 체크, 숫자만 입력 등등 다양한 타입들이 있다.
동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
- 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
  
  -프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
  -JavaScript의 경우입니다. textContent 문자열을 매개변수로 하고  <li> 요소를 반환하는 함수를 생각해봅시다. 코드 볼 때, 함수를 build('Peach') 로 부르거나 createLiWithContent('Peach') 부르는 것 중 어느 것이 이 함수의 기능 파악하기에 쉬울까요?
  -CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는 리스트 태그 li 가 있다고 가정해봅시다.   div> ul> li 와 .fruits__item   둘 중 어떤 것이 어떤 DOM부분이 선택되었는지 잘 알려줄까요?
  -예를 들어 HTML에서는 <h1> 은 시맨틱 요소입니다.  "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다. 기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트 <h1> 가 제목(heading) 처럼 보이도록 큰사이즈 폰트로 스타일을 만듭니다(원하는 대로 스타일을 바꿀 수도 있습니다).
- HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
  
  의미론적 요소(element)는 사용가능한 백 여개 정도의 요소들이 있습니다. <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> ...etc