TIL 01 | HTML Basics

nazino·2022년 6월 23일
0

HTML/CSS

목록 보기
1/3

엘리님의 드림코딩에서 배운 내용들을 다시 한 번 정리해본다. HTML과 CSS에서 놓치기 쉬운 부분들을 복습해보자.

HTML의 기본구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  <head>
  <body>
    <h1>Heading1</h1>
    <h2>Heading2</h1>
    <button>Click Me!</button>
  </body>
</html>

HTML은 브라우저에서 실행가능한 가장 기본적인 파일이고 markup 언어로, 구조적으로 tag를 이용해서 보여진다. HTML 상위tag 안에는 총 두 가지 head와 body 파트가 있는 데 head에는 상세설명이 들어가고 body에는 사용자에게 보여지는 tag들로 이루어져있다.

기본적인 주석 표시는 다음과 같다.

<!-- 주석입니다. -->

Website Structure

좋은 웹사이트를 개발하려면 전체적인 구조를 box로 나눠서 바라보는 연습을 해야한다. 웹사이트는 커다란 box로 구성되어 있고 그 안에서도 여러 작은 box들로 구성되어져 있다. 웹사이트를 바라볼 때 작은 단위로 나눌 수 있어야 css 스타일링을 할 때 조금 더 구조적으로 만들 수 있다. 나중에 React를 다룰 때도 가장 작은 단위로 쪼개어서 작은 단위부터 구현하는 연습을 하는 것이 굉장히 중요하다.

BOX vs ITEM


태그는 크게 두 분류로 나눌 수 있다.
box는 섹션을 나누는 태그를 말한다. item은 사용자에게 보여지는 태그이다.

HTML Element Reference

  • <h1>~<h6> 콘텐츠의 중요도 차이를 줄 수 있다. (폰트 크기)
  • <p> paragraph
  • <b> bold
  • <u> underline
  • <strong> 강조(bold)
  • <i> italic
  • <em> 강조(italic)
  • <ol> ordered list
  • <ul> unordered list
  • <li> list
  • <div> generic container : new line (block level)
  • <span> generic container : same lind (inline container)

0개의 댓글