Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210524 HTML01 : HTML 버전, 파일 태그 구성, 이미지 가져오기, 경로, a태그와 router, 개발자 도구, HTML syntax, 요소(부모, 자식, 상위, 하위), 빈 태그, 속성과 값, 인라인과 블럭요소, 인라인-블럭요소, 테이블 요소, 전역속성

7 분 소요

HTML01



HTML 버전


  • !DOCTYPE(DTD) : 마크업 언어에서 문서 형식 정의, HTML 버전에 대한 정보를 가지고 있음
  • 1, 2, 3, 4, XHTML, HTML5 (표준)
  • HTML5 -> !DOCTYPE html
  • XHTML -> !DOCTYPE html PUBLIC




HTML 파일 구성


  • html 태그 : 문서의 전체 범위가 어디서 시작하는지, 어디에서 끝나는지 알려줌
    • lang 속성 : 지정할 문서의 언어를 명시하는 속성
  • head 태그 : 문서의 정보를 나타내는 범위 (웹페이지의 제목, 설명, 사용할 파일 위치, 스타일 -> 보이지 않는 정보를 작성)
    • meta 태그 : 문서에 대한 여러 정보들 작성하고 이를 검색엔진 및 브라우저에게 제공
      • charset 속성 : 문자 인고딩 방식 (UTF-8 권장)
      • name 속성 : content속성과 쌍을 이루어 content가 가진 값의 정보 종류를 작성
        • name=”viewport” : 모바일 환경의 디바이스에서의 웹페이지의 가로 넓이, 확대 축소 등의 정보를 명시
      • content 속성 : name 속성과 쌍을 이루어 name이 명시하는 정보 종류에 맞는 정보의 값을 작성
    • title 태그 : 문서 제목을 정의하는 태그
    • link 태그 : 외부 문서를 가져와 연결시 사용(대부분 CSS 파일, 로고 아이콘)
      • rel 속성 : 가져올 문서와 관계 (작성 필수)
      • href 속성 : 가져올 문서의 경로
      • Favicon (파비콘) : 문서 타이틀에 쓸 아이콘 (favicon.ico, favicon.png)
    • style 태그 : html 문서 안에서 직접적으로 css syntax를 사용해서 스타일을 작성 할 수 있음
    • script 태그 : 자바스크립트 파일을 가져오게 연결하거나(src 속성), HTML안에서 직접적으로 JS을 작성하는 경우
  • body 태그 : 문서의 구조를 나타내는 범위 (로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등 -> 보이는 정보 구조 작성)


<!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.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" />
    <style>
      div {
        color: red;
      }
    </style>
    <link rel="logo" href="./favicon.ico" />
    <script src="./main.js"></script>
  </head>
  <body>
    <div>client content</div>
  </body>
</html>




이미지 가져오기 출력하기 (웹페이지에서 사용하고 있는 로고 가져올 때)


  • 웹페이지에서 img가 아닌 div태그로서 로고 이미지를 사용하고 있는 경우
    • 브라우저 개발 툴의 해당 element의 CSS 속성중에 background-image 또는 backgraound를 찾아서 url을 우클릭 해서 새탭으로 열어 이미지를 다른 이미지로 저장 하면됨
    • body 태그에서 img 태그의 src 속성에 해당 이미지 파일 경로 연결해주면 됨
    • alt 속성은 src속성 error 발생시 대체 텍스트 임
    • css를 통해서도 image를 출력할 수 있음(backgorund: url(경로))




경로

  • 상대 (주변)
    • ./ (생략 가능) : 자신이 작업하는 파일의 주변
    • ../ : 자신이 작업하는 파일의 상위 폴더 주변
  • 절대
    • http or (https) : 원격 (remote)
    • / or (//) : 최상위 경로, 프로젝트 전체 (root)
      • / 사용하면 기본적로 서버의 root 인 http:// (domain or localhost) :포트 를 가르킴




a 태그와 링크, router (페이지 나누기)


  • a 태그 : href 속성에 주소를 넣으면 해당 페이지로 갈 수 있음
  • 원격의 경로 (http)를 넣어 다른 사이트로 이동도 가능하지만 /를 사용해서 자신 서버의 다른 페이지로도 이동하게 할 수 있다.
  • 브라우저는 자동으로 index.html이라는 파일 이름을 찾도록 되어 있다.
    • 그래서 다른 폴더 구조(예. /about)에 index.html 파일을 생성하고, a태그 경로에 그 폴더 명까지만 해놓아도 알아서 해당 폴더의 index.html을 찾아 표시하고
    • 주소창에 index.html 파일까지의 경로를 표시하지 않음
  • 위의 특성을 활용하면 라우터(router) 기능을 구현할 수 있음
    • 기본적인 home 화면은 최상위 루트에 index.html을 만들고, 다른 페이지의 경우에는 다른 폴더에 이름을 지정해서 index.html을 만들면 됨
    • 또한 해당 다른 페이지에서만 동작하는 CSS를 해당 폴더에서 형성해서 만들수 있음!
    • 깔끔하게 /폴더명 구조의 주소로 router가 형성 됨 (근데, 모든 웹사이트가 이러한 구조가 아닐수도 있어서 /폴더명이 아닐수도 있음)
<!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.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://naver.com">naver</a>
    <a href="/about">about</a>
    <a href="/login">login</a>
    <a href="/">home</a>
  </body>
</html>




개발자 도구


  • 브라우저에서 제공하고 있는 dev tool
  • Elements 창에서 html 구조 확인이 가능하다.
    • html 구조 확인 창 밑에 부분에서 특정 태그가 속한 상위 태그 및 클래스 구조를 한줄 로 볼수 있다.
  • 좌측 상단 커서 모양을 클릭해서 화면에서 직접 특정 element를 찍어서 해당 element의 Sytles를 확인 할수 있다.
    • styles 탭은 임시적으로 style을 바꿀수 있어 test용도로 사용 할수도 있다. 새로고침하면 원상태로 돌아옴
  • 또한 computed 탭을 클릭하면 content 사이즈 및 여백 사이즈 그리고 적용된 style 까지 깔끔하게 모아서 볼수 있다.




HTML syntax


  • 요소(Element) : <태그>내용</태그>
    • 열린태그, 시작태그 ~ 닫힌태그, 종료태그
    • 내용(content)




부모와 자식

  • 외부 요소(부모) 내부에 다른 요소(자식)
  • 한줄로 코딩하면 가독성이 떨어져서 부모와 자식은 indent로 쉽게 구분
    • 자식 요소 : 내가 감싸고 있는 바로 아래 요소
    • 부모 요소 : 나를 감싸고 있는 바로 위 요소
    • 상위(조상) 요소 : 나를 감싸고 있는 모든 요소 (부모 요소 포함)
    • 하위(후손) 요소 : 내가 감싸고 있는 모든 요소 (자식 요소 포함)




빈 태그

  • 종료 태그가 없어 내용이 없는 태그
  • 빈 태그의 표현
    • <태그> : HTML 1, 2, 3, 4, 5 지원 (편리함)
    • <태그/> : XML, HTML5 지원 (엄격한 문법으로 안전함)
      • 주의) 종료태그는 슬래쉬가 앞(</태그>), 빈태그는 종료 태그가 뒤(<태그/>)
    • HTML5는 모두 지원함




속성, 값

  • 기능의 확장
    • (다른 기능을 추가하거나, 어떤것을 표현할지 명확히 하는 역할)
  • 사용 : <태그 속성="값">내용</태그>
  • 빈 태그 같은 경우 기본적인 기능인 내용 표현을 기능하지 못하기 때문에 보통 속성, 값을 무조건 적으로 필요함 (필수 속성)




글자와 상자

  • 요소가 화면에 출력되는 특성, 크게 2가지로 구분
  • 인라인(Inline) 요소 : 글자를 만들기 위한 요소들
  • 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들




인라인 요소


span 요소

  • <span></span>
    • : 대표적인 인라인 요소로, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도
    • 요소가 수평으로 쌓임 (옆으로 쌓인다는 이야기임)
    • span 태그의 구분을 개행(줄바꿈)으로 위아래로 두면 화면에 표시될때 띄어쓰기로 표시됨
    • 포함한 콘텐츠(글자) 크기만큼 자동으로 줄어들어 맞춤
    • 글자 요소라서 CSS의 width, height 속성을 무시함
    • 외부 여백(margin), 내부 여백(padding) 지정시, 좌우 여백은 반영되지만 상하는 반영되지 않음
    • 일반적으로 인라인 요소는 하위 요소에 블록 요소를 넣지 못함
<!-- 파일01 -->
<span>안녕</span><span>하세요</span>
<!-- 안녕하세요 -->

<!-- 파일02 -->
<span>안녕</span>
<span>하세요</span>
<!-- 안녕 하세요 -->

<!-- 여백: 좌우만 가능하고 상하 불가 -->
<span style="margin: 20px 20px;">안녕</span>
<span style="padding: 20px 20px;">하세요</span>

<!-- 하위 요소 블록 불가 -->
<!-- <span><div></div></span> -->
<!-- 인라인 요소만 가능 -->
<span><span></span></span>


img 요소

  • <img src="경로" alt="대체 이미지 이름 텍스트" />
  • : 인라인 요소로 이미지를 삽입하는 요소
  • src, alt는 필수 속성임

a (Anchor) 요소

  • <a href="링크 URL">글자</a>
  • : 인라인 요소로 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
  • target 속성 : url의 페이지가 어디에서 표시될지 위치를 정하는 속성
  • target="_blank" 속성 : 새탭에서 열기됨

br (Break) 요소

  • <br/>
  • : 인라인 요소로 줄바꿈 역할을 하는 요소




블럭 요소


div 요소

  • <div></div>
  • : 대표적인 블록요소로 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
  • 요소가 수직으로 쌓임
  • 부모 요소의 크기 만큼 자동으로 늘어남
  • width, height 모두 반영됨
  • margin, padding 모두 상하좌우 모두 반영
  • 블록에 블록요소, 인라인 요소 모두 넣을 수 있음


h1, 2, 3, … (Heading) 요소

  • <h1>제목</h1>
  • : 블록요소로서 제목을 의미하는 요소
  • 숫자가 작을수록 더 중요한 제목을 정의 (숫자가 작을수록 더 큼)
  • h1은 남발하지 말고 중요도에 따라서 잘 사용하자

p (Paragraph) 요소

  • <p>문장</p>
  • : 블록 요소로서 문장을 의미하는 요소
  • 기능자체는 div로 묶어서 사용해도 똑같음

ul (Unordered List) 요소

  • <ul></ul>
  • 순서가 필요 없는 목록의 집합을 의미
  • 하위 요소들로 li 요소를 가짐 (li 태그가 1개 이상 있어야 함)

li (list item) 요소

  • <li></li>
  • : 목록 내 각 항목
  • ul, ol 요소의 하위 요소들로 쓰임 (둘중 하나로 감싸 있어야 함)

label 요소

  • <label>글자</label>
  • : 인라인 요소로서 라벨 가능 요소(input 요소)의 제목
  • input 요소를 한데 묶으면 input의 반응을 label요소도 공유함 (같이 눌러도 같이 체크됨)
<label> <input type="checkbox" /> Apple </label>
<!-- 체크박스 Apple -->




인라인-블럭 요소


input 요소

  • <input type="데이터 형식"/>
  • : 사용자가 데이터를 입력하는 요소
  • 인라인이면서 블록인 요소임
  • 수평으로 쌓이면서(인라인 특성), 상화좌우 여백(블록 특성)이 가능함
    • type 속성 : 입력받을 데이터의 타입
      • type=”checkbox” : 사용자에게 체크 여부를 입력 받음 (다중 선택 가능)
      • type=”radio” : 사용자에게 체크 여부를 그룹에서 하나만 받음 (택1),
        • 그룹으로 묶이지 않고 혼자 있는 경우 한번 체크 되면 해제가 안됨
    • checked 속성 : type이 checkbox일때 이미 체크 됨을 표시할 경우
    • name 속성 : radio 버튼을 하나의 그룹으로 묶을 경우 사용하고, 같은 값을 가지면 그룹이 됨 (선택 해야 하니까)
    • value 속성 : 미리 입력된 데이터
    • placeholder 속성 : 사용자가 입력할 데이터에 대한 힌트 제공
    • disabled 속성 : 입력 요소 비활성화 (속성이름만 작성함, 값을 가지지 않음)




테이블 요소


  • 표 요소, 행과 열의 집합
  • <table></table>
  • 테이블(table) - 행(tr) - 열(td)
  • 현대의 경우 레이아웃 구조를 잡는 CSS가 잘 발전해서 테이블 요소는 잘 사용하지 않음

tr 요소 (행)

  • <tr></tr>
  • table row
  • table 요소에 감싸져 있는 요소로 행을 구성함

td 요소 (열)

  • <td>내용</td>
  • table data
  • tr 요소에 감싸져 있는 요소로 열을 구성함
  • 하나의 셀을 구성함
    • colspan="2" 속성 : 셀 병합
<table>
  <tr>
    <td>A1</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B2</td>
  </tr>
</table>




전역 속성


  • 기본적으로 각 태그들은 각 태그들마다 사용할 수 있는 속성들이 다르다.
  • 전역속성 : body에서 사용하는 모든 태그들이 공유하는 속성들이 존재하는 것을 말함

title 속성

  • <태그 title="설명"></태그>
  • 요소에 커서를 올리면 나타나는 정보


style 속성

  • <태그 style="스타일"></태그>
  • 요소에 적용할 스타일을 지정


class 속성

  • <태그 class="클래스 이름"></태그>
  • 요소를 지칭하는 중복 가능한 이름
  • CSS에서 스타일링을 위한 선택자
  • JS로 스타일링을 제어하기 위함


id 속성

  • <태그 id="이름"></태그>
  • 요소를 지칭하는 고유한 이름 (중복되면 안됨)


data-이름 속성

  • <태그 data-이름="데이터"></태그>
  • 요소에 데이터를 지정
  • 데이터는 기본적으로 문자 데이터 임
  • 잠시 저장한 데이터를 JS에서 사용하기 위함임
  • js에서 속성 가져올때 camelCase 조심할 것!
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

const els = document.querySelectorAll("div");
els.forEach((el) => {
  console.log(el.dataset.fruitName);
});
// apple
// banana

태그:

업데이트:

참고