FrontEnd : HTML

이지수·2021년 4월 13일

frontend

FrontEnd

목록 보기

1/7

📝HTML 기본문법

📌태그와 속성

태그는 내용을 가질 수 있는 태그와 내용을 가질 수 없는 태그로 크게 나눌 수 있다.

<h1 title = "header">Hello</h1>
<img src ="image.png"/>

여기서 h1, img은 태그, title, src는 속성 이름, "header", "imgage.png"는 속성 값, Hello는 내부 문자이고 img태그는 내용을 갖지 않는다.

📌주석

주석은 프로그램 실행에 영향을 미치지 않고 설명용으로 사용하는 코드인데,

  <!DOCTYPE HTML>
  <HTML>
    <head>
      <!--HTML공부-->
        <title>웹 브라우저 제목</title>
    </head>
    <body>
    </body>
  <HTML>

여기서

<!--HTML공부-->

가 주석이다.

📌HTML기본구조

  <!DOCTYPE HTML>
  <HTML>
    <head>
      <title>웹 브라우저 제목</title>
    </head>
    <body>
    </body>
  <HTML>

🖊 HTML태그의 lang 속성

<html lang = "ko">

lang 속성은 웹브라우저 동작에는 영향을 주지 않고 구글과 같은 검색엔진이 웹페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 알 수 있도록 도와준다.
lang속성의 속성값으로는

lang 속성 값	언어
ko	한국어
en	영어
ja	일본어
ru	러시아어
zh	중국어
de	독일어

🖊 head태그 내부에 넣을 수 있는 태그

lang 속성 값	언어
meta	웹 페이지에 추가 정보 전달
title	페이지 제목 지정
script	웹 페이지에 스크립트 추가
link	웹 페이지에 다른 파일 추가
style	웹 페이지에 스타일시트 추가
base	웹 페이지의 기본 경로 설정

☝🏻 팁 !!
vscode에서 코드 작성시 html:5를 입력하고 tab키를 누르면 html 기본 형태를 자동으로 생성합니다. 이 외에도 특정 태그를 입력하고 tab키를 누르면 태그를 자동으로 생성합니다.

📌스타일시트 작성

내부스타일 시트 작성과 외부스타일시트 작성 방법이 있는데 여러 사람이 협업하고 프로젝트 규모가 큰 경우에는 외부 스타일 시트 방법이 좋다.

다음은 외부 스타일 시트 방법이다.

h1{
	color: red;
    background: black;
}

=>스타일 시트를 작성하고 style.css로 저장한후

  <!DOCTYPE HTML>
  <HTML>
    <head>
      <title>웹 브라우저 제목</title>
      <link rel = "stylesheet" href = "style.css"/>
    </head>
    <body>
    </body>
  <HTML>

=> link태그를 이용해 html과 css를 연결시켜준다.

내부스타일 시트 작성법은 위의 스타일 시트에 해당하는 내용을 html태그 안에 head태그 안에 style태그 안에 작성해주면 된다.

📌자바스크립트 작성

마찬가지로 내부 자바스크립트 작성방법과 외부 자바스크립트 작성방법이 있는데 주로 외부 자바스크립트를 사용한다.

alert('자바스크립트입니다.');

=>자바스크립트를 작성하여 javascript.js로 저장한후

  <!DOCTYPE HTML>
  <HTML>
    <head>
      <title>웹 브라우저 제목</title>
      <script src ="javascript.js"><script/>
    </head>
    <body>
    </body>
  <HTML>

=>html안에 head안에 script태그를 사용하여 외부 자바스크립트를 불러오도록 해줍니다.

css는 link태그! javascript는 script태그 이용

이지수

The only thing worse than starting something and failing...is not starting something

다음 포스트