웹 개발 강의 3편 - 링크와 이미지, 그리고 속성
이번에는 속성(Attribute)을 다루어보겠습니다. 지금까지 만든 페이지에는 제목과 문단, 목록 두 개가 들어가 있습니다. 오늘은 눌러서 갈 수 있는 링크와, 눈으로 볼 사진을 추가합니다.
사진은 따로 준비하지 않으셔도 됩니다. 직접 그려서 쓸 예정입니다.
속성은 태그 안에 적는 추가 정보입니다
속성은 여는 태그 안에 적는 추가 정보입니다. 사실 1강에서 이미 네 개를 쓰셨습니다.
<html lang="en">
<meta charset="utf-8">lang 과 charset 이 속성입니다. 태그만으로는 답할 수 없는 질문에 답해주는 역할입니다. html 태그는 이것이 문서라는 사실만 말해줄 뿐, 무슨 언어인지는 말해주지 못합니다. 그 자리를 lang 이 채워줍니다.
속성의 모양
링크 하나를 뜯어보겠습니다.
<a href="https://haruwrite.com">My blog</a>| 조각 | 역할 |
|---|---|
a | 태그입니다. 이것이 링크라는 뜻입니다 |
href | 속성 이름입니다. 링크가 어디로 가는지를 말해줍니다 |
= | 이름과 값을 이어줍니다 |
"https://haruwrite.com" | 값입니다. 항상 따옴표 안에 넣어주셔야 합니다 |
My blog | 실제로 사람이 보고 누르는 글자입니다 |
</a> | 닫는 태그입니다. 여기서 링크가 끝납니다 |
주소 자체는 화면에 보이지 않습니다. 눌렀을 때 어디로 가는지만 정하고, 보이는 것은 태그 사이의 글자입니다.
오늘 사용할 속성
| 속성 | 붙는 태그 | 하는 일 |
|---|---|---|
href | a | 링크가 열 주소 |
target | a | _blank 로 두면 새 탭에서 열립니다 |
rel | a | noopener 로 새 탭을 우리 페이지에서 떼어냅니다 |
src | img | 어떤 파일을 보여줄지 |
alt | img | 그림의 내용을 글로 적은 것 |
쓰는 순서는 상관없습니다. 따옴표는 상관있습니다.
링크 추가하기
두 번째 문단 아래에 다음 내용을 넣어주세요.
index.html
<p>
<a href="https://github.com/ndb796">GitHub</a>
<a href="https://haruwrite.com" target="_blank" rel="noopener">My blog</a>
</p>링크가 두 개 들어가서 p 태그를 따로 한 줄에 적었습니다. 읽기 편하라고 그렇게 쓴 것이고, 브라우저는 한 줄로 적은 것과 똑같이 처리합니다.
저장하고 서버를 띄운 다음 확인해보겠습니다.
터미널
python -m http.server 5500처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.
링크 두 개가 파란색에 밑줄이 그어진 채로 나란히 붙어 있습니다. 이 색도 우리가 지정한 것이 아니고, 링크는 인라인 태그라서 줄을 새로 만들지 않고 나란히 놓인 것입니다.
링크에 마우스를 올려보시면 창 왼쪽 아래에 주소가 뜹니다. 누르기 전에 어디로 가는지 확인하는 방법이라는 점에서 알아두시면 좋습니다.
target 과 rel
두 번째 링크에만 붙어 있는 두 속성을 보겠습니다.
target="_blank" 를 적으면 링크가 새 탭에서 열립니다. 읽던 곳으로 돌아올 사람에게는 편하지만, 그 외의 경우에는 오히려 불편하게 느껴집니다. 브라우저의 뒤로 가기는 사람들이 이미 쓸 줄 아는 기능이라는 점에서, 저는 대부분의 링크를 같은 탭에서 열리게 두는 쪽을 추천드립니다.
rel="noopener" 는 보안과 관련이 있습니다. 이것이 없으면 새로 열린 탭이 우리 페이지를 건드릴 수 있는 통로가 열립니다. _blank 를 쓰실 때는 항상 같이 적어주시면 됩니다.
그림을 직접 그리기
사진을 넣기 위해 꼭 사진 파일이 필요한 것은 아닙니다.
SVG 는 도형을 글로 설명하는 형식입니다. 우리 페이지와 똑같이 텍스트 파일이라는 뜻입니다. 같은 폴더에 profile.svg 라는 파일을 만들고 다음 내용을 넣어주세요.
profile.svg
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
<circle cx="80" cy="80" r="76" fill="#1E222A" stroke="#C98B1B" stroke-width="4"/>
<text x="80" y="103" text-anchor="middle" font-family="Arial" font-size="58" fill="#E8C87A">DN</text>
</svg>circle 은 원입니다. cx 와 cy 가 중심 위치, r 이 반지름입니다. fill 은 안쪽 색이고 stroke 는 테두리 색입니다. text 는 가운데에 글자 두 개를 넣어줍니다.
여기 적힌 것이 전부 속성이라는 점을 보셔야 합니다. 오늘 배운 내용이 HTML 바깥에서도 그대로 쓰이는 것입니다.
글자 두 개는 본인 이니셜로 바꾸셔도 됩니다. 색이 마음에 안 드시면 fill 값을 바꿔보셔도 좋습니다.
그림 보여주기
저장해도 아직 아무 일이 없습니다. 페이지가 이 파일의 존재를 모르기 때문입니다. <body> 바로 다음에 한 줄을 넣어주세요.
index.html
<img src="profile.svg" alt="Round avatar with the letters D N" width="160" height="160">src 는 어떤 파일을 보여줄지 정합니다. 같은 폴더에 있으니 이름만 적으면 됩니다.
alt 는 그림의 내용을 글로 적는 곳입니다. 그림이 보이지 않는 상황에서 대신 전달되는 내용이라는 점에서, 생략하시면 안 됩니다. 스크린 리더를 쓰는 분들은 alt 가 없으면 그림 자리에서 아무것도 전달받지 못합니다.
width 와 height 는 파일을 불러오는 동안 화면이 출렁이는 것을 막아줍니다.
여기에는 닫는 태그가 없습니다. 이미지는 안에 담을 내용이 없기 때문입니다. 1강에서 쓴 meta 도 같은 종류입니다.
저장하고 새로고침해보시면 어두운 원과 금색 테두리, 가운데 글자 두 개가 보입니다. 이 중에 사진에서 온 것은 하나도 없습니다. 브라우저가 네 줄짜리 글을 읽어서 도형으로 그려준 것입니다.
완성된 파일
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dongbin Na</title>
</head>
<body>
<img src="profile.svg" alt="Round avatar with the letters D N" width="160" height="160">
<h1>Dongbin Na</h1>
<p>I build things on the web.</p>
<p>This is the first page I made by hand.</p>
<p>
<a href="https://github.com/ndb796">GitHub</a>
<a href="https://haruwrite.com" target="_blank" rel="noopener">My blog</a>
</p>
<h2>What I do</h2>
<ul>
<li>Write code almost every day</li>
<li>Record lectures</li>
<li>Read one paper a week</li>
</ul>
<h2>How I got here</h2>
<ol>
<li>Opened an editor</li>
<li>Typed ten lines</li>
<li>Opened the page in a browser</li>
</ol>
<h3>One thing I remember</h3>
<p>My first page had <strong>two lines</strong> in it, and that was <em>enough</em>.</p>
</body>
</html>이제 폴더에 파일이 두 개 있습니다. 페이지와 그림인데, 둘 다 텍스트 파일입니다. 3강까지 오는 동안 설치한 것은 편집기 하나뿐입니다.
전부 왼쪽에 하나씩 위아래로 쌓여 있는 모양이 마음에 안 드실 수 있습니다. 이게 브라우저의 기본값이고, 5강부터는 우리가 직접 정하기 시작합니다.
자주 발생하는 오류
첫째, 값에 따옴표를 빠뜨리는 경우
<img src=profile.svg>값에 공백이 없을 때는 동작합니다. 그래서 한동안 문제를 못 느끼시다가, 공백이 들어간 값을 쓰는 순간 조용히 깨집니다.
<img src="profile.svg">둘째, alt 를 적지 않는 경우
<img src="profile.svg">스크린 리더를 쓰는 분들은 그림 자리에서 아무것도 전달받지 못합니다. 그림이 장식이라서 설명할 것이 없는 경우에도 alt="" 로 비워서 적어주시는 쪽이 맞습니다.
셋째, 파일 이름 앞에 슬래시를 붙이는 경우
<img src="/profile.svg">앞의 슬래시는 사이트의 최상위를 뜻합니다. 지금 폴더가 아니라 다른 곳을 찾게 되어 그림이 사라집니다. 같은 폴더에 있는 파일은 이름만 적어주시면 됩니다.
연습 문제
- 본인이 자주 가는 사이트 링크를 하나 더 추가해보기
profile.svg의fill과stroke색을 바꾸어 보기<img>의width와height를 240 으로 바꾸고 그림이 어떻게 달라지는지 확인해보기
3번에서 SVG 는 크기를 키워도 흐려지지 않습니다. 도형을 글로 적어둔 것이라, 브라우저가 그 크기에 맞게 다시 그리기 때문입니다.
이 강의는 무료로 공개됩니다. 더 깊은 내용을 다루는 유료 강의는 링바이트에서 보실 수 있습니다.
다음 시간에는 header 와 main, footer 로 페이지에 뼈대를 잡아보겠습니다.