콘텐츠기획자의 IT입문서

HTML의 구조와 필수 태그들 본문

HTML, CSS

HTML의 구조와 필수 태그들

lazy_cat 2021. 5. 14. 23:15
HyperText Markup Language
정보를 표현하기 위해 방법들을 구조화한 언어

 

HTML의 구성 요소들은...?

1. 태그 : 정보 전달을 위해 각각의 의미에 맞춰서 사용해야 한다.

2. 속성값

3. 텍스트 : 보여지는 문자 정보

HTML의 구조와 필수 TAG

구분 태그 설명
문서 형식 선언 <!DOCTYPE html> - Document Type Declaration
- HTML에서는 필수적으로 사용해야한다.
- 선언을 하지 않으면 문서를 대충 자기방식대로 표현하기 때문!!
   즉, 오류 없이 잘 렌더링 해달라는 선언 
HTML <html> - 제작하고 있는 html 문서의 시작과 끝
- <head>, <body> 만이 안에 속 할 수 있음
<head> - 화면에 보여지는 정보를 어떻게 보이게 할 것인지에 대한 정보
- 필수 태그 : <title>
- 그외 포함하는 태그 : <link>, <style>, <script>
<meta
name="메타데이터 종류"
content="메타데이터 값">		 - 가장 먼저 표기되는 메타 태그는 <meta charset="UTF-8">
- 반응형 웹 (다양한 기기에 맞춰 화면을 조정하기 위해 반드시 표기해야함)
name="viewport" content="width=device-width, initial-scale=1.0"
- 작성자 표시
name="author" content="작성자"
- 웹 페이지 관련 키워드 (SEO)
name="keywords" content="키워드, 키워드"
name="description" content="페이지 설명문구"
더보기
<title> - HTML 문서의 대제목 (탭에 명시됨)
- 페이지마다 성격에 맞게 다르게 구성하는 것이 SEO에 좋음!
<link rel="stylesheet"
href="./style.css">		 - 내부/외부 css파일을 연결
<style> - css에 들어갈 수 있으나 <head> 내부에서 스타일을 적용할 때 사용
- 보통은 별도의 css 파일로 빼서 사용하므로 잘 사용하지 않음
- <link> 보다 우선적으로 적용됨!
<script src="./script.js"> - js를 
- <style>처럼 <html> 내부에서 <script>로만 사용도 가능
이 경우에는 <body>가장 마지막에 기재!
<body> - 페이지에 실제로 보이는 정보
주석 <!-- 주석 --> - HTML 주석 표기 방식
/* 주석 * / - CSS 주석 표기 방식
// 한줄 주석
/* 여러 줄 주석 */		 - SCRIPT 주석 표기 방식

 

오늘 추가적으로 배운 TAG

  • List tag
    <ul> = unordered list
    <ol> = ordered list
    <li> = list
  • Table tag
    <table> : table
    <tr> : row
    <td> : cell
  • Image tag
    <img> : 단순하게 이 태그만 넣는다고 이미지가 나타나는 것은 아님. 어떤 이미지인지 정보 설정 필요.
    <img src=“이미지 이름” width=“사이즈”>
      src : source
      width : 사이즈는 px or %로 설정 가능
  • Ancor tag
    <a> : ancor은 항해하다라는 의미로, <img>와 동일하게 추가적인 설정 필요.
    <a href="링크” target=“인수” title=“문구”>
      href : hyperlink reference
      target : 어디서 링크를 열 것인지 위치 설정
      title : 해당 문구에 커서를 올렸을 때 뜨게 하고 싶은 문구

오늘 배운 것을 토대로 작업 해본 것

오늘의 공부 범위 : 생활코딩 WEB 1-11~1-15

youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

'HTML, CSS' 카테고리의 다른 글

CSS 단위는 왜 이렇게 많은걸까...  (0) 2022.03.02
HTML 태그 정리본  (0) 2022.03.01
HTML로 계산기 만들기 (feat.input 태그)  (0) 2021.09.04
HTML이 중요한 이유  (0) 2021.05.13
HTML - TAG 기초  (0) 2021.04.29
'HTML, CSS' Related Articles more
Comments