본문 바로가기
블록체인_9기/❤️ HTML & CSS

1강_230227_html의 기초(h1~6, p, br, div, span)

weeji 2023. 3. 13.
728x90

 

 

 

 

 

 

HTML?

  1. HTML이란?
    1. hyper text markup language
    2. 웹페이지 표시를 위해 개발된 마크업 언어.
    3. 제목, 목록 같은 구문을 구조적으로 나타낼 수 있다.
    4. 따라서, 구조적 문서를 만들 수 있는 방법
  2. 메모장으로도 코드를 작성하여 구현이 가능하나, visual studio code를 사용하면 자동으로 입력되는 태그들이 있기 때문에 작성이 간편하다.
    1. 비쥬얼 코드에서 새 파일 작성 시, ‘파일이름.html’로 작성되어야 한다.

 

 

 

주석

  1. 주석이란, 개발자가 개발하면서 메모하는 방법을 일컫는다. 주석으로 처리된 내용은 코드로 읽지 않는다.
  2. 입력방법
    1. <!-- 주석에 삽입 될 내용 -->
  3. 단축키
    1. 주석 설정: ctrl + k + c
    2. 주석 해제: ctrl + k + u
<!-- 주석처리 될 내용 -->

 

 

 

코드 작성 방법

<!DOCTYPE>

  1. 현재 작성하는 웹 문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달하는 역할
  2. html 문서에서 가장 먼저 선언되어야 한다.
    1. 태그가 아니다. (끝나는 </DOCTYPE>가 없다.)
  3. 웹페이지에 필요한 제목, 내용 등을 작성할 수 있다.
  4. 단축키: ! (enter)
    1. html의 기본 골조를 자동완성 시켜주는 단축키이다.
<!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>
    
</body>
</html>

Live server

  1. visual studio code에서 제공되는 기술 중 하나로, 프로그램에서 작성 중인 코드가 웹페이지에 반영되는 모습을 실시간으로 확인할 수 있다.
  2. 코드 수정 시에는 ‘저장’을 눌러야 웹페이지에 반영이 가능하다.
  3. 단축키: alt + l + o

Tag

  • html 문서를 구성하고 있는 요소. 태그는 이름과 속성이 존재한다.
  • html
    • 실제 문서, 정보, 내용이 시작되고 끝나는 것을 표시하는 태그
  • tatle
    • 제목. 페이지(페이지 상단의 탭)의 이름을 작성
    • 코드화면
<!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>안녕하세요</title>
</head>
<body>
    반갑습니다
</body>
</html>

title 적용화면

  • 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>안녕하세요</title>
</head>
<body>
    반갑습니다
</body>
</html>

body 적용화면

  • h1 ~ h6
    • 문자 스타일(볼드, 크기 등) 값을 가지고 있는 태그. 문자들의 제목을 작성할 때 주로 사용하는 태그이다.
    • 1, 2, 3, 4, 5, 6 순차적으로 글씨 크기가 작아진다. (h1 > h2 > h3 > h4 > h5 > h6)
<!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>안녕하세요</title>
</head>
<body>
    <h1>안녕하세요</h1>
    <h2>헬로</h2>
    <h3>니하오</h3>
</body>
</html>

h1 ~ h6 적용화면

  • p, br
    • p 태그
      • 문단을 작성할 때 사용하는 태그
      • 본문 내용을 작성할 때 사용된다.
    • br 태그
      • 줄을 내려줄 때 사용하는 태그
<!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>예시 화면</title>
</head>
<body>
    <h1>튀르키예 지진 기사</h1>
    <p>무너진 건물 잔해 사이, 세상을 떠난 딸의 손을 꼭 잡고 차마 자리를 뜨지 못하던 아버지. <br>
      튀르키예 대지진이 빚어낸 참상을 전 세계에 보여준 한 장의 사진이다. <br>
      형언하기 어려운 표정을 짓고 있던 사진 속 아버지, <br>
      메수트 한제르(49)는 "내 딸은 침대에서 천사처럼 자고 있었다"며 <br>
      "그 애의 손을 놓을 수 없었다"라고 당시 심경을 전했다.</p>
</body>
</html>

p태그, br 태그 적용화면

  1. div, span
    1. div 태그
      1. 웹 페이지 작성 시 영역을 나눠줄 때 사용하는 태그
      2. div태그는 블록 속성이 있다.
        1. div 태그는 한 줄의 영역을 전부 차지한다.
          1. div태그 안에 br태그 사용이 가능하다.
    2. span 태그
      1. inline 속성의 태그이다.
      2. liline 속성: div 속성과 반대로 한 줄을 차지하지 않고, 그 옆에 배치되어 필요한 만큼의 공간만을 차지한다.
<!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>예시 화면</title>
</head>
<body>
    <h1>블록체인 9기</h1>
    블록체인 9기는 <div>2023년 02월 27일에 개강하였다.</div>
    블록체인 9기는 <div><br> 2023년 02월 27일에 개강하였다.</div>
    블록체인 9기는 <span>2023년 02월 27일에 개강하였다.</span>
</body>
</html>

div태그, span태그 적용화면

728x90

'블록체인_9기 > ❤️ HTML & CSS' 카테고리의 다른 글

5강_230306_html (transform, @keyframes, @media, input, +, ~, >, 폰트설정)  (0) 2023.03.14
4강_230303_html 태그 및 속성(video, audio, iframe, form, lable, position, background 등)  (1) 2023.03.14
3강_230302_html (style속성)  (1) 2023.03.14
2강_230228_html의 태그, table (ol, ul, li, a, img, table, style 속성)  (1) 2023.03.13

'블록체인_9기/❤️ HTML & CSS' 관련글

티스토리툴바