u-zing.log https://velog.io/ https://zing829.tistory.com/ Tue, 27 Feb 2024 01:17:05 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright (C) 2019. u-zing.log. All rights reserved. <![CDATA[HTML]]> https://velog.io/@u-zing/HTML-35qeqpvj https://velog.io/@u-zing/HTML-35qeqpvj Tue, 27 Feb 2024 01:17:05 GMT

브라우저는 HTML 파일에 에러가 있다고 알려주지 않는다

장점 : 실수를 하더라도 콘텐츠를 볼 수 있다. 단점 : 무엇이 잘 못되었는지 알 수 없다.

HTML(HyperText Markup Language) : 의미와 구조를 정의할 때 사용한다.

<문서 구조 작성방법>

  • 파일명과 폴더명은 항상 소문자로 작성한다.( 확장자 .html)
  • 파일의 내용이 변경될 때마다 저장해 줘야 한다. ctrl + s
    <!DOCTYPE html>
<html lang="kr"> //문서의 고유 언어를 설정하는 lang 포함
<!-- 사이에 있는 모든 것은 HTML 주석 -->
<head>
<title></title>
<meta />
외부적으로 보이지 않는 웹사이트의 환경설정
</head>
화면에 실제 보여지는 데이터를 작성하는 공간. ```

< !DOCTYPE html > 브라우저에게 text 파일이 아닌 html 문서라고 알려준다.

< html> 루트 요소, 전체의 콘텐츠를 감싼다. ->html 태그 안에 모든 내용은 html 문서임

        문서의 고유 언어를 설정하는 lang 속성을 포함

< head> 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분 ( 웹사이트의 환경설정 )

        <title> 페이지의 제목을 설정, 로드된 페이지 브라우저의 탭에 나타나는 제목.

        <meta name="" content=""> 부가적인 요소 - name과 content 두 개의 속성을 갖는다.

< body> 사용자가 볼 수 있는 contet를 보여줌

HTML 요소(element)는 "태그"를 사용해서 문서의 다른 텍스트와 구분한다.

  • < p> 문단을 적는 공간 / 길이가 긴 text

  • < span> 문장을 적는 공간 / 길이가 짧은 text

  • < img> 문서에 이미지를 넣는다. self-closing tag ( 이미지는 text가 없기 때문이다.)

    • src (이미지의 url) 속성은 필수

  • <h1h6> </h1h6> 제목

  • < ul> unordered list 순서가 없는 목록

  • < ol> ordered list 순서가 있는 목록

    • < li> list item 목록 항목

  • < a> anchor의 약자로 웹을 웹으로 만들어준다. -> 다른 웹사이트로 이동하는 방법 (= 링크)

    • 속성 herf (hypertext reference) 하이퍼 텍스트 참조이며 오직 < a>에만 추가할 수 있다.
      <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

요소(element)는 "속성(attribute)"을 가진다.

  1. 태그와 속성 사이에 공백이 있어야 한다.
  2. 속성 이름 뒤에는 등호가 와야 한다.
  3. 속성 값의 앞뒤에는 인용부호(" ,')가 와야 한다.

  • herf

    = "이동할 곳" / 오직 < a>에만 작동

  • target

    = "_self" 기본값

    = "_blank" 새로운 탭에서 열림

  • src

    = "이미지 주소 url " / 오직 < img />에서만 작동

  • id (unique identifier 고유 식별자)

    = body 안에 어떤 태그에든 넣을 수 있다.

    = element 당 하나의 id만 가질 수 있다.

    id = "apple" -> # tomato (CSS)

  • class

    = 여러 element에서 사용 가능

    = 한 번에 여러 class 사용 가능하다 class = " tomato apple lemon"

    class = "apple" -> .apple (CSS)

]]>