우리는 이전 시간들을 통해서 여러 가지 html 파일과 css파일을 만들었다.
이렇게 우리가 css파일과 html파일을 계속 생성하면 어떻게 될까??
당연히 파일이 난잡해진다!
html과 css가 섞여서 찾기 불편해진다.
이를 해결하기 위해 html은 html만의 폴더에, css는 css만의 폴더에 따로 저장할 것이다.
여러 가지 방법이 있지만 필자는 메인 폴더에 html만 남겨두고 css폴더와 image폴더를 생성 후 지난 시간에 만들었던 파일들을 정리해볼 것이다.
이렇게 새로운 폴더를 만들고 아래 파일들을 드래그해 넣어주기만 하면 된다.
정말 깔끔하게 정리가 되었다.
그런데, 이 상태로 index.html을 실행시키면 어떻게 될까??
다른 폴더로 옮긴 CSS와 image가 적용되지 않은 것을 볼 수 있다.
왜냐하면 파일 위치를 옮겼다는 것은 즉 다른 링크를 가지게 됐다는 것인데
index.html의 <link> 파트를 보면 css와 image의 링크가 변경되지 않은 것이 보일 것이다.
이를 해결하는 방법은 간단하다.
컴퓨터를 많이 만자는 사람은 알 것이지만 컴퓨터에게 파일 위치를 지정해주는 표기법이 따로 있다.
style.css를 이용해서 예를 들어 보자.
style.css는 메인 폴더 안의 styles 폴더 안에 존재한다.
이 문장을 알고리즘 느낌으로 표현하면
메인 폴더 -> styles폴더 -> style.css으로 된다.
컴퓨터에게 이를 지시하는 법은 간단하다.
->를 / 로 바꿔주면 끝이다.
그러면 우리는
이제 모든 링크의 주소를 고쳐 쓰고 다시 코드를 실행해보자!
<html>
<head>
<title>My Daily Challenge</title>
<link rel="stylesheet" href="styles/shared.css">
<link rel="stylesheet" href="styles/style.css" />
<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>
<img src="images/challenge.jpg" alt="A trophy">
<h1>Sia Challenge</h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I will acheve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
모든 링크를 수정했다.
다시 원래처럼 작동하는 것을 볼 수 있다!
이제부터는 이렇게 폴더에 따로 파일을 생성해서 철저히 분류해주면서 공부하겠다.
'100일만에 개발자 되기!' 카테고리의 다른 글
| 6일차(2) : 리스트 이해와 리스트 만들기 (1) | 2022.11.29 |
|---|---|
| 6일차(1) : Live Server 소개 (0) | 2022.11.29 |
| 5일차 (3) : 두 번째 CSS 파일 추가하기와 공유 CSS + 과제 해답 (1) | 2022.11.21 |
| 5일차(2) : 두 번째 HTML 파일 추가하기 (2) | 2022.11.21 |
| 5일차(1) : 이미지를 추가하자!! (첨부파일 있음) (1) | 2022.11.20 |