Step 1. HTML

2021. 10. 29. 15:01

HTML이란

Hypertext Markup Language의 줄임말로, 프로그래밍 언어가 아니며 '웹사이트'를 만드는 가장 기초가 되는 'Mark Up'언어이다. 특별한 기호나 표기를 사용해 글의 서식과 스타일을 정해주는 언어를 뜻한다.

마크업 언어가 무엇인지 사실 감이 잘 잡히지 않았었다. 몇 번 반복하다보니 감이 오는데, 함축적인 단어 표현을 통해 글의 구조, 내용, 스타일 등을 꾸밀 수 있게 해주는 언어를 말하는 것 같다.

생활코딩에서 HTML, CSS, Javascript도 들어보고 SW사관학교 정글 자료를 보면서 공부도 했었지만, 잘 만들어진 페이지의 코드를 보면 여전히 모르는 것이 많다.

태그, Tag

태그란 '<'와 '>' 사이에 어떤 단어(태그)를 적는 것이다.

<br> br 태그는 줄바꿈을 실행시킨다.
<p> p 태그는 paragraph의 약자이다. 말 그대로 단락을 표현할 때 사용되는 태그이며 자동으로 줄바꿈이 실행된다.</p>

HTML Tag의 특징으로는 여는 태그와 닫는 태그가 있다는 것이다. 한 예시로, 제목을 나타낼 때 자주 쓰는 h1 태그가 있다.

<h1>바닐라코딩</h1>
개발자 도전기
<br>
hello world

이와 같이 <h1> 다음 </h1>을 적어 '바닐라코딩'부분만이 제목으로 사용되게 할 수 있다. 닫는 태그에는 '/'가 추가된다. 태그의 종류는 무수히 많다. 이걸 하나하나 공부해가며 외울 필요는 없고, 필요할 때 검색을 통하여 알아내면 된다. 혹은 https://developer.mozilla.org/ko/docs/Web/HTML/Element 모질라 사이트에서 검색하면 빠르게 찾아낼 수 있다.

문서의 구조

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
</head>
<body>
   <h1 id="profile">프로필</h1>
   안녕하세요
   <br>
   바닐라코딩을 준비하고 있는 사람입니다.
   <p>
   현재는 설비엔지니어로 일하고 있고, 개발자가 되기를 희망하고 있습니다.
   </p>
</body>
</html>

HTML의 구조는 대부분 위와 같이 html 태그 안에서 head와 body로 이루어진다.

- html : 웹 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.

- head : 외부 소스를 참조할 때 사용한다. 예로 jQuery나 Bootstrap, 구글 폰트를 따오는 코드가 head 태그 안으로 들어가게 된다. style 태그로 CSS가 들어가기도 하고 script 태그로 JavaScripr가 들어가기도 한다.

- body : 웹 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여준다. 페이지의 내용을 구성하는 부분이라고 보면 된다.

HTML에서 이미지 추가하기

<img src="https://techbullion.com/wp-content/uploads/2021/06/Hire-Web-Developer.jpg" alt="developer">

HTML에서 이미지는 말그대로 img 태그를 통해 구현할 수 있다. 이 때 src는 source의 약자이고 여기에 이미지의 주소나 파일 이름을 기입하면 된다. 여기서 src는 속성, attribute이다. 포함하고자 하는 이미지로의 경로를 지정할 때 사용된다. 그러므로 img 태그를 사용할 때 src는 필수이다.

alt는 alternative의 약자로, 이미지의 간단한 설명을 나타낼 때 사용된다. alt는 필수는 아니지만 네트워크 오류 혹은 콘텐츠 차단, 죽은 링크로 인해 이미지를 표현할 수 없을 때 alt 속성 값이 대신 나타나며 사용자에게 차단된 이미지가 어떤 것이었는지 암시해줄 수 있다.

HTML 링크

    <a href="https://www.vanillacoding.co"
      ><img
        src="https://techbullion.com/wp-content/uploads/2021/06/Hire-Web-Developer.jpg"
        alt="developer"
      />바닐라코딩 홈페이지</a
    >
    <br />

    <a href="mailto:tmdwns0570@naver.com">이메일 보내는 링크</a>
    <br />

    <a href="tel:114">전화를 거는 링크</a>
    <br />

    <a href="#profile">프로필로 가기</a>

링크는 우리가 원하는 공간(페이지)로 이동할 수 있게 해준다. a 태그를 이용하고 href 속성값에 따라 어떤 페이지로 갈지가 정해진다. a 태그는 '바닐라코딩 홈페이지'라는 글씨 뿐만 아니라 img 태그도 감쌀 수 있어, 사진에도 링크를 걸 수 있다.

또한, mailto: 혹은 tel:을 href에 기입해 클릭 시 이메일을 보내거나 전화를 걸 수 있다.

그리고 id 값을 기입하면 HTML 문서 내의 같은 id 값을 가진 곳으로 이동한다. 보통 id는 HTML 문서에서 1개만 지정되기 때문에 이동하는 곳이 중복되지 않는다. 예로, 내가 h1 태그에 id 값으로 profile을 부여했으면, 다른 태그에는 id 값으로 profile을 부여하지 않는 것이 원칙이다.

    <style>
      a[href^="https"]::before {
        content: "🔗 ";
      }

      a[href^="mailto"]::before {
        content: "📧 ";
      }

      a[href^="tel"]::before {
        content: "📞 ";
      }

      li {
        margin-bottom: 0.5rem;
      }
    </style>

위는 CSS인데, HTML 문서를 꾸며줄 때 사용되는 언어이다. a 태그의 href 속성값에 https, mailto, tel이 들어가면 각각에 해당되는 아이콘을 앞에 붙여줄 수 있다.

절대경로와 상대경로

- 절대경로 : 전체 인터넷을 기준으로 해당 자료의 위치 표현

- 상대경로 : 같은 파일 시스템 구조 상의 위치 표현

사실 처음 듣는 개념이고 Prep Guide만으로는 이해가 안되어 검색을 해봤다.

절대경로란, 최초의 시작점으로 경유한 경로를 전부 기입하는 방식이다. 내가 만약 윈도우 OS의 바탕화면에 index.html 파일을 두었다고 가정하면, C:\Users\Administrator\Desktop\index.html이 절대경로가 되는 것이다. (이 때 Administrator는 UserID로, 각 사용자의 이름에 따라 달라질 것이다)

어떠한 OS든 이렇게 최상위의 경로, 즉 모든 경로를 기입한 절대경로로만 파일을 찾을 수 있다. 그렇다면 상대경로는 왜 생겼을 까.

상대경로는 이름처럼 상대적인 개념이 적용되는데, 항상 그 기준이 필요하다. C:\Users\Administrator\Desktop\index.html처럼 절대경로가 아니라, 만약 Desktop\index.html 혹은 index.html이라고 표현되어 있다면 해당 경로는 어디를 나타내는 것인가? 이는 기준 경로에 따라 결정된다. 만약 기준(비교 대상)이 C:\SSJ라면 두 경로는 C:\SSJ\Desktop\index.html과 C:\SSJ\index.html이 된다.

상대경로가 필요한 이유는, index.html의 경로가 항상 일정한 것이 아니고 바뀔 수도 있기 때문에, 절대경로만 존재한다면 매번 경로를 일일히 바꿔주어야 할 것이다. 크게 와닿진 않는다. 하지만 좀 더 학습하다가 절대경로와 상대경로를 쓰게 되는 시점이 오면 더 이해할 수 있을 것이다.

결론적으로 절대경로란 최상위 경로(디렉토리)가 반드시 포함된 경로이고, 상대경로는 현재 기준(현재 디렉토리, 비교대상)으로 작성된 경로를 의미한다.

절대경고와 상대경로 참고 출처 : https://mommoo.tistory.com/82

HTML 링크 관련 참고할만한 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

Step 2. JavaScript(1) (0)	2021.11.24
Step 1. Google Clone (0)	2021.11.14
Step 1. CSS (0)	2021.11.02
준비를 위한 준비 (0)	2021.10.28
또다른 입구 (0)	2021.10.27

Aloha!

Step 1. HTML

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

+ Recent posts

티스토리툴바