[프론트엔드] HTML

#프론트엔드
Written by Sungbin2026년 7월 10일 · 13 min read

시리즈의 글 (5개)

  1. [프론트엔드] 백엔드 개발자에 의한, 백엔드 개발자를 위한 프론트엔드
  2. [프론트엔드] 프론트엔드에 대해
  3. [프론트엔드] HTML
  4. [프론트엔드] Javascript
  5. [프론트엔드] css

해당 포스팅은 인프런의 백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편를 참조하여 만들었습니다.

banner

HTML의 기본 구조

지금부터 프론트엔드 코드 작성 방법에 대해 알아보도록 하겠다. 지금부터 웹 브라우저와 HTML 문서의 관계, 그리고 HTML의 기본 구조에 대해 알아보도록 하겠다.

웹 브라우저와 HTML

먼저 HTML 문서가 어디서 사용되는지 알아보자. 특히, HTML 문서가 서버와 웹 브라우저 사이에서 어떻게 사용되고 있고 그것을 가리키는 용어는 각각 무엇인지 알아 볼 필요가 있을 것이다.

우리는 웹 서비스를 사용할 때 웹 브라우저를 사용한다. 사용자가 웹 브라우저에서 특정 URL을 접속하거나 링크를 누르면 HTTP 요청이 서버쪽으로 날아간다. 그럼 웹 서버는 이 HTTP 요청을 받아서 HTTP 요청에 대응되는 HTML 문서를 서버에서 찾아낸다. 그리고 그 HTML 문서를 HTTP 응답에 포함시켜주는 것이다. 그럼 웹 브라우저는 그 응답에 포함된 HTML 문서를 읽어와서 정해진 문법에 맞게 화면에 그려낸다. 이렇게 HTML 코드를 화면에 그리는 과정을 전문용어로 '렌더링'한다라고 표현한다.

여기서 한 가지 짚어두면 좋은 점은, HTML 하나만 받아온다고 해서 페이지가 바로 완성되는 것은 아니라는 점이다. HTML 안에는 CSS 파일, 자바스크립트 파일, 이미지 같은 외부 자원들이 <link>, <script>, <img> 같은 태그로 참조되어 있고, 웹 브라우저는 HTML을 파싱하면서 이 자원들을 각각 별도의 HTTP 요청으로 다시 가져온다. 즉 우리가 한 페이지를 열었을 뿐인데 실제로는 수십 개의 HTTP 요청이 발생할 수 있는 것이다. 이런 과정을 웹 브라우저에서 직접 확인이 가능하다. 바로 개발자 도구를 이용해보면 된다.

image01

웹 페이지에 접속을 하고 F12버튼을 누르면 위와 같이 사이드 바에 탭이 하나 열리는 것을 볼 수 있다. 여기서 Network 탭으로 접속해 다시 새로고침을 해보면 뭔가 여러 파일들이 쭉 나오는 것을 볼 수 있다. 방금 이야기한 "수십 개의 HTTP 요청"이 바로 이 목록이다. 여기서 제일 처음것을 눌러보면 알 듯이 이거 하나하나가 HTTP 요청과 응답이라고 보면 좋을 것이다. 이 2개를 묶어서 HTTP 트랜잭션이라고도 부른다. 그리고 이 HTTP 트랜잭션 하나를 눌렀을 때 오른쪽에는 이 HTTP 트랜잭션에 해당하는 HTTP 요청과 응답이 각각 나와있다.

image01

하나의 HTTP 트랜잭션을 열어보면 여러개의 탭들이 존재하는데 Headers, Preview, Response 이렇게 3가지만 보도록 하겠다. 먼저 headers에서 general이라고 되어 있는 이 부분은 요청과 응답 헤더 중에서 자주 사용되는 헤더들, 중요한 헤더들을 모아서 보여주는 것이다. 요청 메서드, URL, 상태 코드 같은 것들이 여기에 요약되어 있다. 아래 쪽의 response headers는 응답에 대한 헤더들이 나와 있다. Content-Type으로 응답 본문이 HTML인지 JSON인지 이미지인지 구분할 수 있고, Cache-Control이나 Set-Cookie 같은 헤더도 이 영역에서 확인할 수 있다.

image02

아래로 스크롤을 좀 더 내려보면 위와 같이 request headers도 보이는 것을 알 수 있다. 브라우저가 서버에게 "나는 어떤 요청을 보내고 있다"를 전달하는 영역으로, User-Agent, Accept, Cookie 같은 값들이 여기에 담긴다. 백엔드 개발자 입장에서는 서버 로그만 보던 정보들을 클라이언트 쪽에서 직접 들여다볼 수 있다는 점에서 유용한 창이다.

image03

다음으로 preview 탭으로 가보면 위와 같이 우리가 지금 보고 있는 해당 웹 페이지를 보여주고 있다. 즉, 해당 HTTP 트랜잭션을 통해 받아온 정보를 미리보기로 보여주는 것을 의미한다. 또한, HTML 문서만 보여주기 때문에 일부 이미지를 로드해야한다던지 CSS를 로드해야 하는 행위는 다른 트랜잭션에서 진행할 수 있으므로 깨지는 화면이 보이는 경우도 존재한다. 이는 앞서 말한 "HTML은 여러 자원을 참조할 뿐, 자원 자체는 별도 요청으로 가져온다"는 구조 때문이다.

image04

preview에 그려진 HTML 문서가 궁금할 때는 위와 같이 response 탭을 클릭하면 어떤 응답이 내려왔는지 알 수 있다. 이렇게 개발자 도구를 보면서 확인해볼 수 있었던 것처럼 HTML 문서 내에 포함되어 있는 자바스크립트나 CSS, 이미지등 다른 요소들은 웹 브라우저가 자동으로 해당 요소들을 요청해서 사용자에게는 HTML 문서에 CSS나 Javascript 그리고 이미지가 포함된 웹페이지를 하나로 렌더링 해서 보여주는 것이다.

HTML은 태그로 이루어져 있다.

<form action="./article" method="post">
    <input type="text" name="title" />
    <input type="text" name="content" />
    <input type="submit" />
</form>

다음으로 HTML의 문법적인 특징에 대해 알아보도록 하자. Java와 같은 프로그래밍 언어에서 문법의 기초를 이루는 건 세미콜론(;) 단위로 나뉘는 하나하나의 문장, 실행문이라고 부른다. 반면 HTML에서의 문법은 기본적으로 태그 단위로 나뉜다. 위의 코드가 대표적인 HTML 예시이다. 위의 코드를 보면 form이라는 태그가 존재하고 그 태그 안에 input이라는 태그가 3개 들어가져 있는 형태이다.

특징을 보면 이렇게 끝나는 부분에 slash를 하고 태그 이름으로 나와 있는 부분이 존재한다. 이런 태그를 닫는 태그라고 부르며 form 태그는 여는 태그(<form>)와 닫는 태그(</form>)가 있는 반면에 input 태그는 여는 태그와 닫는 태그로 존재하지 않고 하나의 태그로만으로 존재한다. 이런 태그들을 void element(자기 자신만으로 닫히는 태그)라고 부르며, <input>, <img>, <br>, <meta>, <link>가 대표적이다. 이런 태그들은 내용을 감싸는 것이 아니라 그 자체로 하나의 요소를 의미한다.

그리고 여는 태그와 닫는 태그는 서로 중첩되어 트리 구조를 이룬다. 위의 예시에서 form 안에 input이 들어 있는 것처럼, 바깥 태그가 안쪽 태그를 감싸는 형태로 HTML 문서 전체가 하나의 커다란 트리를 만들어낸다. 이런 것이 몇 개 존재하는데 실제 적용해보면 많이 익숙해질 것이다.

HTML 태그 용어

<form action="./article" method="post">
    <input type="text" name="title" />
    <input type="text" name="content" />
    <input type="submit" />
</form>

HTML 태그 용어는 계속 등장하기 때문에 알아가보자.

  • 태그 이름: 태그의 가장 앞에 온다. 특정 태그가 어떤 태그인지 결정하는데 가장 중요한게 바로 이 태그의 이름이다. ex. form, input
  • 태그의 속성과 값: 태그의 구체적인 특징을 결정 짓는 것이다. 이 속성은 보통 attribute라고 부르는 경우가 더 많아서 혼용해서 사용하는 점 유의하면 좋을 것 같다. 그리고 이 각각의 속성에는 값이 매핑되는 형태이다. 즉, 속성의 이름이 나오고 그리고 등호가 나오고 그리고 큰 따옴표로 감싸지는 형태이다. 속성이 여러 개일 때는 공백으로 구분되며, 순서는 의미를 가지지 않는다. ex. action="./article", method="post"

HTML 문서의 기본 구조

<html>
    <head></head>
    <body>
 
    </body>
</html>

HTML이 태그 단위로 이루어져 있고 기본적인 용어도 알아보았다. 다음으로 HTML 문서가 어떤 구조를 가지고 있는지 알아보면 좋을 것이다. HTML 문서는 기본적으로 위와 같은 형태로 존재한다. 가장 최상단에는 html이라는 태그로 시작을 진행한다. 모든 HTML의 다른 태그들은 이 html 태그 안쪽에 존재한다. 그리고 이 html 태그 안에 head와 body 태그가 위치한다. 간단히 말해 head 는 "이 문서에 대한 정보"를 담는 공간이고, body는 "사용자에게 실제로 보여줄 내용"을 담는 공간이다. 각각의 태그가 무엇을 하는지는 추후에 알아보도록 하자.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
 
    </body>
</html>

그런데 이런 식으로 html 태그보다 위에 DocType이라고 되어 있는 태그를 볼 수 있는데 이 태그는 DocType이라는 선언으로 HTML 태그의 일부라기 보다는 이 HTML 문서가 어떤 문법으로 해석되어야 하는지를 정의한다. 마치 자바의 버전이 있는 것처럼 HTML 문서의 버전을 의미한다. HTML도 발전을 해오면서 여러가지 버전이 존재하였는데 현재 가장 널리 알려진 버전은 HTML5이다. 위의 <!DOCTYPE html>이 HTML5를 의미하는 것이다. 예전 HTML 버전에서는 DOCTYPE 선언이 매우 길고 복잡했지만 HTML5부터 이렇게 간결해졌고, 현재는 사실상 이 선언 하나만 쓰면 된다고 보면 된다.

<head>

head 태그는 HTML 문서를 설명하기 위한 데이터가 주로 들어간다. 이를 메타 데이터라고 부르는데 메타 데이터는 데이터를 설명하기 위한 데이터라고 보면 좋을 것 같다. 즉, 이 문서의 제목은 무엇인지, 어떤 문자 인코딩을 사용하는지, 어떤 CSS/JS 파일을 함께 불러올지 같은 정보들이 여기에 담긴다. head에 들어가는 내용은 보통 사용자 눈에 직접 보이지 않지만(탭 제목 정도는 예외), 페이지가 동작하는 방식과 검색 엔진이 이 페이지를 어떻게 인식할지에 큰 영향을 미친다. head 태그 안에는 여러 태그들이 존재하는데 주요 태그로는 아래와 같다.

  • <title>: 웹 페이지의 제목
  • <meta>: 인코딩, 뷰포트, SEO 관련 메타데이터
  • <link>: 외부 CSS 파일 연결 등

<body>

다음은 body 태그에 대해 알아보자. 우리가 앞으로 작성해야 할 프론트엔드 코드는 해당 body 태그 안에서 작성할 것이다. body에 작성하게 되는 태그들은 보통 웹 브라우저에 실제로 보이는 것들이다. 텍스트, 이미지, 버튼, 링크, 입력 폼처럼 사용자가 화면에서 눈으로 확인하고 상호작용하는 요소들이 모두 body 안에 들어간다. body에 들어가는 태그는 아주 많은데 아래 3가지 정도만 일단 살펴보도록 하겠다.

  • <a>: 다른 페이지로 이동하는 링크
  • <img>: 이미지 표시
  • <script>: 자바스크립트 코드 삽입/로드

주석

<form action="./article" method="post">
    <input type="text" name="title" />
    <input type="text" name="content" />
    <input type="submit" />
</form>
 
<!-- 주석 -->

HTML도 주석이 존재한다. 주석은 보통 <!-- -->로 형태로 작성을 한다. 주석은 브라우저 화면에 렌더링되지는 않지만, 응답 자체에는 포함되어 사용자가 "소스 보기"나 개발자 도구를 통해 그대로 열람할 수 있다는 점은 기억해둘 필요가 있다. 즉 API 키나 내부에서만 쓰는 정보를 주석으로 남겨두면 그대로 노출된다는 의미이므로, 서버사이드 주석과는 성격이 다르다는 점을 주의하자.

head 태그에 포함되는 주요 태그들

이번에는 HTML의 head 태그에 포함된 주요 태그들에 대해 알아보도록 하자. head 태그의 위치는 html 태그 안의 최상단에 위치한다. 그러면 head 태그 안에서 사용하는 주요 태그에 대해 알아보도록 하자.

title

title 태그는 웹 브라우저에 표시되는 해당 웹 페이지의 제목을 지정할 수 있는 태그이다. title 태그를 사용하면 이 페이지가 어떤 페이지인지 알 수 있다. 단순히 브라우저 탭에만 표시되는 것이 아니라, 사용자가 북마크할 때의 기본 이름, 구글 같은 검색 엔진의 결과 목록에 노출되는 제목, 소셜 미디어에 링크를 붙여넣을 때 나타나는 미리보기 제목의 기반이 되기도 한다. 그래서 겉보기에는 사소해 보여도 SEO와 사용자 경험 측면에서 의외로 비중이 큰 태그이다. 그러면 한번 코드로 살펴보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Robert</title>
</head>
<body>
 
</body>
</html>

위와 같은 코드에 title 태그의 원하는 이름으로 바꿔보고 실행을 했을 때 잘 반영되었는지 확인해보면 좋을 것이다.

meta

다음은 meta 태그에 대해 알아보도록 하자. meta 태그의 속성은 뭘 사용하느냐에 따라 아주 많은 기능을 사용할 수 있다. 여기서는 대략 2가지 정도를 설명드리고 싶다. meta 태그로 할 수 있는 일 중 하나는 웹 페이지의 인코딩에 대한 내용이고 다른 하나는 검색 엔진을 위해 이 웹 페이지가 어떤 페이지인지 설명하는 기능이 존재한다. 여기서 실습으로 볼 것은 인코딩에 대한 내용이고 검색 엔진에 대한 내용은 개발자 도구를 통해 알아보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Robert</title>
</head>
<body>
 
</body>
</html>

먼저 인코딩에 대해 설명해보도록 하겠다. 위의 코드에서 charset이라는 속성으로 UTF-8이라는 문자열을 넣어주고 있다. 문자열 UTF-8은 인코딩 방식 중 하나인데 현재 거의 표준처럼 사용하고 있는 인코딩 방식이다. 우리가 어떤 웹 어플리케이션을 개발을 할 때 인코딩 방식을 정해야 한다면 그때는 반드시 UTF-8을 사용해야 한다.

📝 용어 정리

인코딩: 어떤 파일에 대한 내용을 기록할 때 어떤 방식으로 이 파일의 내용을 기록할 것인가에 대한 내용이다.

예를 들어, 한글을 저장할 때 어떤 인코딩 방식은 2바이트를 쓸 수 있고 어떤 인코딩 방식은 3바이트를 쓸 수 있다. 그런데 그런 방식 중 하나의 일종이 UTF-8인 것이고 기존에 우리가 많이 쓰던 방식이 있는데 그것이 EUC-KR 방식이다. UTF-8이 사실상의 표준이 된 이유는 한글뿐만 아니라 전 세계 거의 모든 문자를 하나의 체계 안에서 표현할 수 있기 때문이다. EUC-KR은 한글과 일부 문자만을 다룰 수 있어서, 한글 외의 언어가 섞이면 문제가 생길 수 있다.

이렇게 인코딩 종류가 있는데 만약 서로 다른 인코딩으로 적혀져 있다면 어떻게 될까? 만약 위의 코드를 다른 인코딩으로 하면 어떻게 될까? 위의 html 파일은 UTF-8로 해석을 하려고 하지만 만약 파일 자체의 인코딩이 다른 방식이라면 어떻게 될까? 직접 실습해보시면 알겠지만 내용 중에 한글 내용이 깨지는 것을 알 수 있을 것이다. 이렇게 깨진 경우에는 2가지 방식이 있다. 파일 인코딩 체계를 변경해주던가 meta 태그의 charset을 실제로 저장된 인코딩 방식과 일치시켜주면 된다. 중요한 것은 "파일이 어떤 인코딩으로 저장되어 있는가"와 "브라우저에게 어떤 인코딩으로 해석하라고 알려주는가"가 서로 일치해야 한다는 점이다.

image05

그리고 위와 같이 인프런 홈페이지에 개발자 도구를 열어서 head 태그 안에 meta 태그를 보면 검색 엔진 관련 태그들이 있는 것을 확인해 볼 수 있다. 대표적으로 <meta name="description" content="...">은 검색 결과에서 제목 아래에 표시되는 요약문을 담당하고, <meta property="og:title">, <meta property="og:image"> 같은 Open Graph 태그들은 카카오톡, 슬랙, 트위터 등에 링크를 붙여넣었을 때 보이는 미리보기 카드를 구성한다. 이렇게 meta 태그는 "페이지가 외부에 어떻게 노출되는가"를 결정하는 중요한 역할을 한다.

link

link 태그는 html 파일에 css 파일들을 적용하기 위해 사용되는 태그이다. HTML 문서에 link 태그가 존재한다면 웹 브라우저는 해당 파일을 다운로드 하여 css 속성으로 페이지에 적용을 한다. 그러면 한번 실습을 해보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Robert</title>
</head>
<body>
    안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
</body>
</html>
.custom-style {
    font-size: 30px;
}

위와 같이 코드를 작성해보자. link 태그로 속성 rel에 stylesheet를 주면 css를 정의할 것이다라는 의미이고 href 속성을 주면 해당 css 파일의 경로를 찾아서 웹 브라우저가 다운로드를 해준다. rel은 "relationship"의 약어로 이 연결된 자원이 현재 문서와 어떤 관계인지를 브라우저에게 알려주는 속성이다. stylesheet 외에도 파비콘을 지정하는 icon, 미리 리소스를 가져와두는 preload 같은 값들이 쓰인다. 그리고 body 안에 span 태그로 class라는 속성을 주어 원하는 이름을 정의해주었고 그 네이밍으로 css에 스타일을 정의해주었다.

css에 .이라는 의미는 class라는 속성을 찾아라라는 의미이다.

그리고 스프링 애플리케이션을 실행하면 아마 아래와 같이 스타일이 적용된 페이지를 볼 수 있을 것이다.

image06

여기서 더 하나 알아가보면 꼭 css를 외부 파일에 정의하고 해야하는 것은 아니다. 아래처럼 style 태그를 head 태그 안에 정의를 하고 그 안에 css를 정의해도 괜찮다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        .custom-style {
            font-size: 30px;
        }
    </style>
    <title>Robert</title>
</head>
<body>
    안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
</body>
</html>

자, 그러면 이렇게 내부에 css를 정의하는 방식 말고 이전에 봤던 파일에 정의하고 불러오는 방식에는 조금 특별한 차이가 있다. 바로 css 문서를 불러오는 과정에서 HTTP 트랜잭션이 하나 더 날아가는 효과를 볼 수 있다. 바로 아래처럼 말이다.

image07

위의 네트워크 탭을 보면 index.html은 네트워크 상태가 200이 날아온 것을 볼 수 있다. 그런데 style.css는 304가 나왔다. 304 상태 코드는 해당 파일이 캐시가 되어 있는 경우 해당 네트워크 상태가 나올 수가 있다. 정확히는 "Not Modified"라는 의미로, 브라우저가 서버에게 "내가 이미 가진 캐시가 최신인가?"를 물어봤고 서버가 "맞아, 변한 것 없어"라고 답한 상황이다. 이때 서버는 응답 본문을 다시 내려주지 않고 헤더만 돌려주기 때문에 네트워크 비용이 크게 줄어든다. 외부 파일로 CSS를 분리해두면 이런 캐시 효과를 얻을 수 있는 반면, <style>로 HTML 안에 인라인으로 넣으면 매번 HTML과 함께 다시 내려온다는 차이가 있다. 이것이 실무에서 보통 CSS를 외부 파일로 분리하는 이유 중 하나이다.

body 태그에 포함되는 주요 태그들

다음으로 body 태그 안에 포함된 주요 태그들에 대해 살펴보도록 하자. body 태그는 html 태그 안에 가장 하단에 위치를 한다. HTML 문서에서 실제 보이는 부분을 담당하는 태그로 UI를 개발하는 경우 head 태그보다는 주로 이 body 태그 내에서 코드를 작성한다. 화면에 표현할 수 있는 요소가 매우 다양하기 때문에 body 안에 사용할 수 있는 태그는 정말 다양하지만 이번에는 a, img, script 3가지 태그에 대해서만 알아보도록 하겠다.

a

a 태그는 다른 페이지로 연결하는 링크를 만드는 태그이다. 이렇게 페이지 사이를 이동하는 것이야 말로 웹의 근간이 되는 정보 탐색 방식이라 할 수 있다. 어느 페이지에 포함된 링크를 타고 다른 페이지로 이동하는 건 개발자가 아닌 다른 사람에게도 익숙한 행동이다. 그리고 그걸 가능하게 해주는 태그가 바로 a 태그이다. 그러면 한번 실습을 해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Robert</title>
</head>
<body>
    안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
    <a href="https://www.inflearn.com">인프런</a>
</body>
</html>

위와 같이 a 태그를 정의하고 href 속성으로 연결할 링크를 걸어둔다. 그리고 a 태그 안에 다른 태그나 텍스트를 넣을 수 있다. 마치 하이퍼 링크와 같은 개념이라 생각하면 쉬울 것이다. 화면은 아래와 같을 것이다. 화면을 보면 위의 내 소개 문구와 하이퍼 링크가 1줄로 되어 있는 것을 알 수 있을 것이다. 우리가 코드에 개행을 했지만 실제 결과에서는 개행이 적용되지 않았다. 그 이유는 HTML에서 공백과 줄바꿈은 기본적으로 하나의 공백 문자로만 처리되기 때문이다. HTML에서 줄을 바꾸고 싶다면 <br> 태그를 쓰거나 블록 요소(<div>, <p> 등)로 감싸서 분리해야 한다. 일단 이것은 나중에 알아보도록 하자.

image08

그런데 실습해 본 독자들은 알겠지만 링크를 클릭하면 원래 있던 창이 없어지고 그 창으로 새로운 페이지로 이동됨을 알 수 있을 것이다. 우리가 생각해보면 어떤 링크는 이처럼 해당 탭에서 새로운 페이지로 변하기도 하지만 어떤 링크는 새 탭이 열려서 나오는 경우도 존재한다. 그것을 결정하는 것은 a 태그의 속성을 지정해주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Robert</title>
</head>
<body>
    안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
    <a href="https://www.inflearn.com" target="_blank">인프런</a>
</body>
</html>

위와 같이 a 태그의 target이라는 속성을 주고 그 값으로 _blank라는 값을 주면 해당 링크를 클릭했을 때 새 창으로 링크 페이지가 열리는 것을 볼 수 있을 것이다.

⚠️ 참고

외부 사이트를 target="_blank"로 열 때는 보안과 성능상의 이유로 rel="noopener noreferrer"를 함께 붙여주는 것이 관례이다. 이 속성이 없으면 새로 열린 페이지가 자바스크립트로 원래 창의 window.opener에 접근할 수 있어, 악성 사이트가 원래 탭을 조작할 수 있는 여지가 생긴다. 최근 브라우저들은 target="_blank"일 때 기본적으로

noopener

동작을 하지만, 명시해두는 것이 안전하다.

img

img 태그는 간단하다. 그냥 이미지를 보여주는 태그이다. 우리가 웹 서비스를 이용하다 보면 이미지를 많이 볼 수 있는데 그 이미지를 웹 페이지에 넣을 수 있는 태그이다. 그러면 한번 실습을 해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Robert</title>
</head>
<body>
    안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
    <a href="https://www.inflearn.com" target="_blank">인프런</a>
    <img src="https://cdn.inflearn.com/assets/brand/logo.png?t=1&amp;w=201" alt="inflearn logo" />
</body>
</html>

위와 같이 img 태그에 src 속성에 이미지 경로를 적어주고 alt 속성은 해당 이미지를 불러오는게 실패했을 경우 대체 텍스트로 보여주는 것을 의미한다. alt 속성은 단순히 "이미지가 깨졌을 때 보여줄 텍스트" 역할만 하는 것이 아니라, 시각장애인을 위한 스크린 리더가 이 이미지를 어떻게 읽어줄지를 결정하는 접근성(accessibility) 요소이기도 하다. 또한 검색 엔진이 이미지의 내용을 파악하는 기준이 되기도 하므로, 장식용이 아닌 이상 되도록 의미를 담아 작성하는 것이 좋다.

그리고 한 가지 기억해둘 점은, img 태그는 앞서 이야기한 것처럼 이미지를 HTML 안에 직접 담는 것이 아니라 경로만 참조하고 있다는 것이다. 브라우저는 HTML을 파싱하다가 img 태그를 만나면 src에 적힌 주소로 별도의 HTTP 요청을 보내 이미지를 받아온다. 그래서 HTML은 이미 도착했는데 이미지만 늦게 뜨거나, 네트워크가 끊긴 환경에서는 이미지만 깨진 채로 보이는 현상이 생기는 것이다. 서비스를 운영할 때 이미지가 4xx나 5xx로 깨지는 상황이 생기면, 개발자 도구 Network 탭에서 해당 이미지 요청의 상태 코드를 보고 원인을 추적할 수 있다.

script

다음으로 script 태그에 대해 알아보자. script 태그는 자바스크립트 코드를 넣을 수 있는 태그이다. 자바스크립트 코드를 직접 넣는 것도 가능하고 css처럼 자바스크립트 코드를 외부에 받아와서 실행할 수 있다. 그러면 한번 실습을 해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Robert</title>
</head>
<body>
안녕하세요. <span class="custom-style">개발자 Robert</span>입니다.
<a href="https://www.inflearn.com" target="_blank">인프런</a>
<img src="https://cdn.inflearn.com/assets/brand/logo.png?t=1&amp;w=201" alt="inflearn logo"/>
 
<script>
    console.log('로그 출력');
</script>
</body>
</html>

위의 코드를 작성하고 한번 잘 작동 되는지 알아보자. console.log는 마치 자바의 System.out.println과 같은 것이다.

image09

스프링 어플리케이션을 다시 실행하고 개발자 도구에 콘솔 탭에 가보면 로그가 잘 찍힌 것을 볼 수 있을 것이다.

자바스크립트 코드를 외부 파일로 분리하고 싶다면 아래처럼 src 속성을 사용하면 된다. 이렇게 하면 CSS와 마찬가지로 브라우저 캐시를 활용할 수 있고, 여러 페이지에서 동일한 스크립트를 공유할 수도 있다.

<script src="./app.js"></script>

또 한 가지 알아두면 좋은 점은 script 태그의 위치가 중요하다는 것이다. 브라우저는 HTML을 위에서부터 차례로 파싱하다가 script 태그를 만나면 스크립트 다운로드와 실행을 먼저 처리하고 그 다음 HTML 파싱을 이어간다. 그래서 <head> 안에 무거운 스크립트를 두면 본문이 보이기까지 시간이 지연될 수 있다. 전통적으로 script 태그를 </body> 바로 앞에 두는 관례는 이런 이유에서 나온 것이다. 최근에는 <script defer>나 <script async> 같은 속성을 사용해서 이 문제를 더 세밀하게 제어할 수 있지만, 그 부분은 지금 단계에서는 몰라도 된다.