HTML (1)

프론트엔드/HTML | CSS

HTML (1)

SeungEunii 2023. 3. 21. 22:59

1. D2Coding 설치

https://github.com/naver/d2codingfont

GitHub - naver/d2codingfont: D2 Coding 글꼴

D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub.

github.com

사이트에 들어가서 조금만 내리면 다운로드가 보이는데 Ver 1.3.2로 들어가서 다운하면 된다.

다운 받고 압출 풀면 3개의 폴더가 나오는데 그중 D2CodingAll 폴더에 들어가서

하나있는 폰트를 모든 사용자용으로 설치하면 된다.

혹시나 모든 사용자용으로 설치가 없으면 설치 누르면 된다.

설정으로 들어가서 글꼴을 D2Coding으로 바꿔준다.

2. HTML 시작

Ctrl+space하면 자동으로 HTML sample 코드를 작성해 준다

지금은 link태그와 script태그는 사용을 안 해서 그 두 줄만 삭제를 하는데

한 줄씩 삭제하는 방법은 해당 줄에 가서 Shift + Delete 단축키를 이용하면 된다.

3. 웹 페이지 만들기

첫 번째 웹 페이지를 만들어봤는데

코딩

<!DOCTYPE html>
<html lang="ko">    <!--언어 한국어 설정-->
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>첫 번째 웹페이지</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    
    <!-- title 헤더 영역 시작 -->
    <h1 title="header">Hello HTML5</h1>  
    <!-- title 헤더 영역 종료 -->
    <div>
        <h2>Hello HTML5</h2> 
    </div>
    <div></div>
    <h3>Hello HTML5</h3>
    <h4>Hello HTML5</h4>
    <h5>Hello HTML5</h5>
    <div>
        <h6>Hello HTML5</h6>
        <p>신나는 웹개발</p>
    </div>
    <img src="cat.jpg" width="500"> 
    <img src="pork-belly.jpg" width="500"> 
    
</body>
</html>

head태그에서는 title태그를 제외한 나머지는 화면에 보이지 않는 부분이고

head태그 내에서 title태그는 페이지 탭을 의미한다