티스토리 뷰

홈페이지 만들기

3. 소스코드 읽는 방법 알기 첫번째

cocoder 2024. 3. 13. 14:33
728x90

이번엔 홈페이지의 소스코드를 불러오고 읽는 방법을 알려드려 볼까 합니다.

 

 

우선 저번에 설치한 Visual Studio Code 를 실행을 해봅시다.

 

 

이런 모습이겠죠?

 

여기서 'Open Folder...' 를 클릭해봅시다. 월컴페이지를 꺼버리셨다면 하단의 사진처럼 상단의 탭에서 선택해주세요.

'file > Open Folder...'

 

이제 압축을 풀었던 폴더를 찾아봅시다. 다운로드를 받은 후 그 공간에서 압축을 풀었다면 다운로드 폴더로 이동해서 경로를 찾으면 됩니다.

 

 

전 다운로드 폴더에 압축을 풀었고 위 사진처럼 경로를 이동하여 '폴더 선택'을 하였습니다. 폴더 선택을 할때는 'index.html' 파일이 존재하는 폴더에 경로를 잡는 것이 좋습니다.

 

전 'C:\Users\freef\Downloads\fruitables-1.0.0\fruitables-1.0.0' 해당경로에 'index.html' 파일이 존재하여 이 경로로 폴더 선택을 했습니다.

 

폴더 선택을 완료하면 이 폴더를 신뢰할거냐? 라는 알림이 뜨는데 하단에 다른 파일들도 신뢰한다는 부분에 체크를 하고 'Yes, I trust the authors'를 클릭합니다.

 

정상적으로 폴더를 불러왔다면 위 사진처럼 나올겁니다.

 

여기서 'index.html' 파일을 클릭해본다면?

짠! 외계어들이 등장합니다..... 무슨말인지도 모를 .....

걱정하지마세요 천천히 하나씩 알려드릴게요 !! ㅎㅎ

 

우선 좀 뜬금 없지만 곤충을 세부분으로 나누면 어떻게 되는지 아시나요?

 

'죽.는.다' 라고 생각하시는 분들도 계실수 있는데 정답은 '머리, 가슴, 배'로 입니다.

html도 크게 나눈다면 머리(head), 몸통(body), 다리(footer) 가지로 나눌수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>

    <footer>

    </footer>
</body>

</html>

요게 html의 한 페이지를 만들기 위한 최소한의 구성입니다.(물론 아무것도 내용이 없기때문에 빈페이지 입니다.....)

 

위의 코드를 보시면<> 이런 꺽쇠로 표시된 부분이 많이 보이실거에요. 이런것들을 태그(tag)라고 합니다. html 파일은 이런 무수히 많은 태그들로 구성이 되어있어요. 보통 태그들은 시작과 끝이 존재합니다.(그렇지 않은 태그들도 있습니다.) html 태그의 경우 '<html>' 이 부분이 시작 '</html>' 이부분이 끝 부분입니다.

 

예전 학창시절 수학시간에 집합에 대해서 배울때 A ⊂ B 이런식으로 A는 B에 속한다 이런 집합 개념에 대해서 공부했던거 혹시 기억하시나요? 전 수포자였긴했지만 어렴풋이 기억이나는것 같습니다. ㅎㅎ 이 개념을 html에 적용을 해보면 이해가 좀 편하실 수 있을것 같아서 예시를 들어봤습니다.

 

그림으로 표현해보자면

이렇게 표시할 수 있는데 head 태그와 body 태그는 html 태그안에 속한다. footer 태그는 body태그안에 속한다.

기호로 표시를 하자면,

 

<head>  ⊂ <html> , <body> ⊂ <html>, <footer>  ⊂ <body>

 

이런식으로 표현할 수 있을것같네요.

 

여기서 소개한 태그들의 역할을 간단하게 알아보겠습니다. 태그안에 다른 태그들을 담을 수 있고 또 그 태그안에도 다른 태그들을 담을 수 있습니다. 이런 포함 관계로 이루어져 있습니다. 안에 속해있는 태그에 대해서 보통 '자식 태그', 감싸고 있는 태그에 대해서는 '부모 태그' 라고 지칭합니다.

 

<html> : html파일의 기본 구성요소의 태그입니다. 최상위의 태그입니다.

<head> : <title>태그로 페이지의 제목을 변경할 수 있습니다. 

<body> : 실제적인 페이지의 내용을 입력하는 태그입니다.

<footer> : 하단에 고정되어있고 기업정보, 저작권 정보 등을 표시하는 태그입니다.

 

다음번 포스팅에는 실제 가져온 코드를 읽고 간단하게 텍스트를 편집하는 방법에 대해서 포스팅 해보겠습니다.

728x90

'홈페이지 만들기' 카테고리의 다른 글

5. 소스코드 읽는 방법 알기 세번째  (0) 2024.03.14
4. 소스코드 읽는 방법 알기 두번째  (4) 2024.03.14
2. 오픈소스 활용하기  (0) 2024.03.13
1. 홈페이지 만들기 준비하기  (0) 2024.03.13
누구나 만들 수 있는 홈페이지 제작  (0) 2024.03.13