오늘은 재목 그대로 두 번째 HTML 파일을 추가해보겠다.

두 번째 HTML 파일이 존재하는 이유가 무엇일까?

우리가 흔히 다른 사이트를 사용해보면 알 것이다.

가장 흔한 쿠O 을 예시로 들어보자.

쿠O에는 메인 화면, 상품을 진열하는 화면, 각 상품별 화면, 구매 화면, 개인정보 보는 화면 등등 많은 페이지가 존재한다.

일방적으로 한 페이지당 하나의 HTML 파일이 필요하다고 보면 된다.

그렇기에 여러 기능을 추가하기 위해서는 두개 이상의 HTML 파일을 추가하는 것은 거의 필수라고 볼 수 있다.

 

파일 추가하는 방법은 간단하다!

비주얼 스튜디오 코드에서 파일 추가버튼을 누르고 이름을 지어주면 된다.

필자는 full-week.html로 파일을 추가했다.

 

오늘 비주얼 스튜디오의 매우 꿀팁을 알려주겠다!

full-week.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>

처음 이 기본 뼈대를 보면 아무것도 모르겠지만

앞서 공부했던 우리는 어느 정도 틀이 보인다.

그럼에도 불구하고 아직 모르는 것이 보이지만 간단히 설명하겠다.

 

가장 위의 <!DOCTYPE html>은 지금 사용하는 html의 버전을 뜻한다.

html은 어느날 뿅! 생긴 것이 아니라 역사적으로 여러 버전이 출시되면서 지금 버전에 이르렀다,

우리가 최신 html을 사용한다는 것을 알려주는 역할을 한다.

 

두 번째로 <html lang="en">인데, 눈치가 빠른 사람은 바로 삘이 왔을 것이다.

바로 html에서 사용하는 언어가 영어입니다! 라고 알려주는 역할을 한다. (참고로 한국어는 kr을 쓴다)

 

<head> 바로 아래 있는 meta는 아직 배우지 않았으니 살짝 지워주자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이제 우리에게 익숙한 모습이 나왔다.

title은 사이트의 제목이라고 기억하고 있는가?!

그렇다면 바로~ 바꿔주는 작업을 해주자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Upcoming Challenges</title>
</head>
<body>
    
</body>
</html>

 

 

그 다음에는 우리가 공부하던 index.html에서 사용하는 글꼴을 복사해서 붙여 넣어주자.

왜냐하면 full-week.html 안에는 글꼴에 대한 주소가 없기 때문이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Upcoming Challenges</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Oswald&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap"
      rel="stylesheet"
    />
</head>
<body>
    
</body>
</html>

제목을 넣고 글꼴만 추가했을 뿐인데 뭔가 많이 한 것 같이 보인다.

 

이제 body 값을 추가해주겠다.

 

다만 바로 보여주지 않을 것이다.

 

오늘 포스팅에서 처음으로 여러분들이 연습할 수 있게 과제를 주겠다.

<body> 안에 넣을 값들을 알려주고 한번 스스로 작성해보기를 바란다.

 

다만 너무 어렵지 않게 기본 틀은 줄 것이다.

 

<body>

    제목

    index.html로 가는 하이퍼링크

    문단 1

    문단 2

    문단 3

</body>

 

여러분이 스스로 생각할 기회를 주는 것이다.

그러니 최대한 index.html 파일을 보지 않고 body를 채워보기를 바란다!

 

다음 포스팅에서 바로 답안지 공개와 함께 다음 진도를 나가보겠다.

 

'100일만에 개발자 되기!' 카테고리의 다른 글

5일차(4) : 폴더에 소스코드를 정리하자!  (1) 2022.11.23
5일차 (3) : 두 번째 CSS 파일 추가하기와 공유 CSS + 과제 해답  (1) 2022.11.21
5일차(1) : 이미지를 추가하자!! (첨부파일 있음)  (1) 2022.11.20
4일차(5) : 글자 크기와 글꼴을 내 마음대로!  (1) 2022.11.19
4일차(4) : ID선택자로 단일 요소 선택  (2) 2022.11.18

+ Recent posts

티스토리툴바