Part4. HTML 요소 - 주요범위 & 메타데이터

Develop/HTML & CSS

Part4. HTML 요소 - 주요범위 & 메타데이터

마크투비 2021. 7. 10. 22:03

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS

강의자료: 한 눈에 보는 HTML 요소 총정리

강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

1. 블록요소와 인라인 요소

◾️ 블록 요소

- DIV, H1, P 태그

- 사용 가능한 최대 가로 너비를 사용한다.

- 크기를 지정할 수 있다.

- 기본설정: width: 100%; height:0; 에서 시작

- 수직으로 쌓임

- margin, padding 위, 아래, 좌, 우 사용 가능

- 레이아웃을 위한 용도로 사용

◾️ 인라인 요소

- SPAN, IMG 태그

- 필요한 만큼의 가로 너비만 사용한다.

- 크기를 지정할 수 없다.

- 기본설정: width: 0; height:0; 에서 시작

- 수평으로 쌓임(줄바꿈을 할 경우 띄어쓰기를 할 수 있음)

- margin, padding 위, 아래는 사용 할 수 없음

- 텍스트를 다루는 용도로 사용

◾️ display 속성

- css에서 display: block;으로 블록 요소로 사용할 수 있음

- div, h1, p 태그는 display가 block 값으로 기본 설정되어 있음

- span, img 태그는 display가 inline 값으로 기본 설정되어 있음

div{
    display: block; 디폴트값
}
span{
    display: inline; 디폴트값
}

2. HTML 태그의 주요범위 & 메타데이터

◾️ HTML 요소 레퍼런스

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

◾️ HEAD 태그

- 문서의 정보를 담고 있음

◽️ <title> 태그: html 문서의 제목

◽️ <meta> 태그: 빈 요소로 시작 태그만 있음, 기타 정보

- charset="UTF-8"로 문자가 인코딩되는 방식을 정의. 주로 <head>태그의 맨 첫줄에 옴 (meta tag mdn)

- meta 태그 내에 name이라는 속성을 썼으면 http-equiv 속성을 사용할 수 없음 반대도 마찬가지

- <meta http-equiv="X-UA-Compatible" content="IE=edge"> Internet Explorer를 지원하기 위해

필요한 코드

◽️ <link> 태그: <link> 요소는 현재 문서와 외부 리소스의 관계를 명시. 빈 요소

- href="링크된 소스의 URL". 상대 경로는 ./~로 사용할 수 있음 (link tag mdn)

- type 속성: MIME type mdn

◽️ <style> 태그: 속성 type의 값이 기본 값인 "text/css"인 경우 생략 가능. <body>태그에도 작성 가능하지만, <head>태그에 작성하는 것이 적절함. (style tag mdn)

◽️ <base> 태그: 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정. 상대 경로를 지정. 단 base 태그는 html 문서에 단 한 번만 작성 가능. (base tag mdn)

<!DOCTYPE html>
<html lang="ko">
    <head>
        문서의 정보
        <title>HTML 요소 레퍼런스</title>
        - HTML 문서의 제목
        <meta>
        - 기타 정보
        <link>
        - 외부 소스의 링크 연결(주로 css)
        <style>
        - 스타일 직접 입력
        - 스타일 외부에서 가져와서 연결
        </style>
    </head>
    <body>
        문서의 구조
    </body>
</html>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML 요소 레퍼런스</title>
        <base href="https://heropcode.github.io/GitHub-Responsive/">
        <meta name="author" content="구미진">
        <meta name="description" content="구미진의 사이트입니다!">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="./css/main.css" hreflang="ko">
        <style type="text/css">
            div{
                color: salmon;
                background: seagreen;
            }
        </style>
    </head>
    <body>
        <img src="img/bg-small.jpg" alt="sample image">
        <img src="img/feature-tile__build.png" alt="sample image2">
    </body>
</html>

저작자표시

'Develop > HTML & CSS' 카테고리의 다른 글

Part6. HTML 요소 - 인라인 텍스트 & 수정 (0)	2021.07.10
Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0)	2021.07.10
Part3. HTML & CSS 첫걸음/CSS (0)	2021.07.04
Part2. HTML&CSS첫걸음/HTML (0)	2021.07.03
Part1. HTML & CSS 첫걸음 (0)	2021.07.02

현재글Part4. HTML 요소 - 주요범위 & 메타데이터

마크투비의 고 GO