[HTML, CSS] - HTML기초

LEE JI YOUNG·2021년 8월 28일
0

HTML/CSS

목록 보기
1/10

HTML : structure . 구조 . 웹페이지 구조를 담당하는 markup 언어

CSS : Presentation . 스타일 . 디자인요소를 시각화하는 stylesheet 언어

JS : Interaction . 상호작용 . 단순한 언어를 프로그램으로 만들어 유저와 상호작용하게 해주는 프로그래밍 언어

  • 서로의 관심사를 분리하기 위해 '구조, 스타일, 상호작용'으로 나눠서 코드를 작성.
  • JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었습니다.
  • 새로고침 : ctrl + R , F5
  • VSCode : 같은단어 한번에 바꾸기 : 선택 후 shifh + ctrl + L
  • html 주석 : <!-- 안녕하세요 --> F12 소스 참조를 했을 때, 주석을 확인할 수 있다.
    <% -- 잘가세요 --%> F12 소스 참조를 하더라도 주석이 안보임.
  • css 주석 : /* ~~~ */


HTML(HyperTextMarkupLanguage)

  • 마크업 언어(markup language) : 태그 등을 이용하여 문서, 데이터의 구조를 명기하는 언어. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별됨.
  • HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성 가능.
    의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발 가능.
  • 웹 표준 확인 HTML Living Standard
  • 엘리먼트의 본래 목적에 맞게 사용하는 것이 권장
  1. HTML은 tag들의 집합
    • tag : <>(부등호)로 묶인 HTML의 기본 구성 요소
  <html> <!--html 태그 -->
  <body> <!--body 태그 -->

  1. html 확장자 사용

  1. 트리 구조 (TREE STRUCTURE) : 부모 - 자식 노드로 이루어짐
    • HTML 문서 시작 : 선언
      • html
        • head
          • title
        • body
          • h1 : Hello world
          • div : Contents her
            • span : Here too!

      html의 자식 head, body
      body의 자식 h1,div , div의 자식 span , title의 부모 head

태그 TAG

시맨틱(Semantic) 태그 : 의미있는 태그

  • 개발자로 하여금 문서의 의미론적인 구조를 쉽게 파악할 수 있게 해준다.
  • 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색을 하도록 만든다. 쉽게 검색되어지게 만들어준다.
<div> 태그 // non-semantic 태그 . 들어간 내용의 의미를 알 수가 없음. 
<table>, <article> 등의 태그 // semantic 태그 . 대략이라도 태그 안에 들어갈 내용의 의미를 유추 가능

시맨틱 태그설명
<header>화면 상단에 위치하는 사이트나 문서의 정보를 정의
<nav>문서의 네비게이션 항목을 정의
<main>문서의 주가 되는 컨텐츠를 정의
<aside>페이지의 주요 내용 외의 내용을 정의. 페이지의 주요 내용 주변(사이드바)에 위치하여 관련된 내용을 배치할 수 있다. (예)광고
<footer>화면 하단에 위치하는 사이트나 문서의 정보를 정의
<section>문서의 section은 하나의 주제를 그룹할 때 사용 (자동차, 건축 등..)
<article>section내에서 하나의 기사를 article 태그로 감쌀 수 있음. 그런데 article 내에서도 section 태그가 있을 수 있음.
<details>사용자가 보거나 숨길 수 있는 추가적인 세부 정보를 정의한다.
<summary>details에 대한 보이는 요소를 정의
<figure>사진이나 다이어그램과 같은 부가적인 요소를 정의
<figcaption>figure에 대한 자막 정의
<mark>참조나 하이라이트 표시를 필요로 하는 문자를 정의
<time>날짜 / 시간 정의




  1. Opening tag, closing tag : <></>
<!DOCTYPE html>  <!--이 문서가 html문서임을 명시. 선언-->
<html>       <!--html 시작 태그로, 문서 전체의 틀을 구성-->
  <head>     <!--head 태그는 문서의 메타데이터를 선언--> 
    <title>Page title</title>      <!--문서의 제목, 브라우저의 탭에 보여짐-->
  </head>    <!--</태그이름>은 해당 태그가 끝났음을 의미-->
  <body>     <!--body 태그는 문서의 내용을 담는 곳-->
    <h1>Hello world</h1> <!--heading을 의미하며, 크기에 따라 h1~h6까지 있음-->
    <div>Contents here   <!--content division을 의미, 줄바꿈됨-->
      <span>Here too!</span>    <!--줄바꿈이 없는 content 컨테이너-->
    </div>               <!--div 태그가 끝났음을 의미-->
  </body>               <!--body 태그가 끝났음을 의미-->
</html>    <!--html 태그가 끝났음을 의미-->



  1. self-closing tag : 태그 내부 내용이 없다면 <tag/>와 같이 표현 가능
<img src = "codestates-logo.png"></img> 
<img src = "codestates-logo.png" />       



  1. 자주 사용하는 HTML tag
태그설명
<h1>제목태그한줄을 차지. <h1>로 시작해서, <h2>, 순차적으로 기입
<div>Divisiondiv 태그는 한줄을 차지
<span>spanspan 태그는 컨텐츠 크기만큼 공간 차지
<p>paragraph하나의 문단을 표현 . 한줄을 차지
<img>Image이미지 삽입. self-closing tag
<a>Link링크 삽입
<ul>&<li>Unordered List & List Itemul순서없는리스트. li순서있는 넘버링리스트
<input>Input(text, checkbox, radio)입력창. self-closing tag
<input type="text">Input(text)ID 입력창
<input type="password">Input(password)password 입력창
<input type="checkbox">Input(checkbox)중복체크 가능
<input type="radio" name="choice">Input(radio)여러개 중 하나 선택. name으로 묶어야 함
<textarea>Multi-line Text Input줄바꿈이 되는 입력폼
<button>Button버튼기능
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8"/>
        <title>제목</title>
    </head>
    <body>
        <div>div 태그는 한줄을 차지 합니다.</div>
        <div>division 2</div>
        <span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
        <span>span 2</span>
        <span>span 3</span>
        <div>division 3</div>
        <img src="codestates-logo.png" /> 
      	<a href="http://codestates.com" target="_blank">코드스테이츠</a>
        <!--순서없는 리스트-->
      	<ul>  
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3 has nested list</li>
           <ul>
             <li>Item 3-1</li>
           </ul>
         </ul>
<!--순서있는 넘버링 리스트-->
         <ol> 
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3 has nested list</li>
            <ol>
              <li>Item 3-1</li>
            </ol>
         </ol>
<!--Input - Id, Password 창-->
      	 <div>
           ID <input type="text" placeholder="type here">
         </div>
         <div>
           Password <input type="password">
         </div>
<!--Input - radio, checkbox 창 -->
         <div>
           <input type="radio" name="choice" value="a"> a
           <input type="radio" name="choice" value="a"> a
         </div>
         <div>
           <input type="checkbox" checked> checked
           <input type="checkbox" > unchecked
         </div>
<!--textarea -->
         <textarea></textarea>
<!--button -->
         <div>
           <button>로그인</button>
         </div>
    </body>
</html>
  • input - radio 속성 설명
    <input type="radio" name="choice" value="a">
    • name : name의 값이 같은 것 중에서 하나를 선택합니다.
    • value : 선택했을 때 전달될 값입니다.
    • checked : 선택된 상태로 만듭니다.
profile
프론트엔드 개발자

0개의 댓글