3강 · 링크와 이미지, 그리고 속성

한눈에

지금까지 페이지에는 제목과 문단, 목록 두 개가 들어가 있습니다. 오늘은 눌러서 갈 수 있는 곳과, 눈으로 볼 것을 추가하겠습니다.

오늘 다룰 내용은 세 가지입니다. 먼저 속성이 무엇인지 보겠습니다. 사실 이미 네 개를 쓰셨습니다. 그다음 링크 두 개와, target 과 rel 이 무엇을 하는지 살펴봅니다. 마지막으로 그림을 직접 입력해서 그려보겠습니다.

속성이란

속성은 여는 태그 안에 적는 추가 정보입니다. 1강에서 html 태그에 lang 을, meta 태그에 charset 을 적으셨습니다. 그것들이 바로 속성입니다. 속성은 태그만으로는 답할 수 없는 질문에 답해줍니다.

링크 한 줄 뜯어보기

링크 하나를 뜯어보겠습니다. a 가 태그이고, 이것이 링크라는 뜻입니다. href 가 속성 이름이고, 링크가 어디로 가는지를 말해줍니다. 등호 뒤에 값이 오고, 값은 항상 따옴표 안에 넣어주셔야 합니다. 여는 태그와 닫는 태그 사이의 글자가 실제로 사람이 누르는 부분입니다. 주소 자체는 화면에 보이지 않습니다.

오늘 쓸 속성

오늘 다룰 속성은 다섯 개이고, 다섯 개 모두 계속 쓰시게 됩니다. href, target, rel 은 링크에 붙습니다. src 와 alt 는 사진에 붙습니다. 쓰는 순서는 상관없습니다. 다만 따옴표는 중요한데, 왜 그런지는 곧 보시게 됩니다. 같은 폴더를 다시 열어보겠습니다. 지난 시간까지 작업해서 파일이 29줄이 되었습니다. 오늘 추가할 내용은 전부 body 위쪽에 들어갑니다. 이미 작성해 둔 내용은 하나도 바뀌지 않습니다.

링크 두 개

링크 두 개를 넣을 텐데, 동작이 서로 다릅니다. 첫 번째 링크는 보고 있던 페이지를 그대로 대체합니다. 두 번째 링크는 target 속성 때문에 새 탭에서 열립니다. 두 링크 모두 문단 하나 안에 있어서 같은 줄에 나란히 놓입니다.

두 번째 문단 아래에 넣겠습니다. 안에 링크가 두 개 들어가서, p 태그를 따로 한 줄에 적었습니다. 읽기 편하라고 그렇게 쓴 것이고, 브라우저는 똑같이 처리합니다. rel 과 target 이 나란히 적혀 있는 것을 보실 수 있습니다. 저장하고 링크 두 개가 어떻게 보이는지 확인해보겠습니다.

index.html

지난 두 번과 같은 서버 명령어입니다. 지금 있는 폴더를 그대로 열어주기 때문에, 뒤에 만들 그림도 바로 불러올 수 있습니다. 끝날 때까지 그대로 두시면 됩니다.

터미널

링크 두 개가 파란색에 밑줄이 그어진 채로 나왔습니다. 이 색도 우리가 지정한 것이 아닙니다. 링크는 인라인 태그라서 나란히 붙어 있습니다. 링크에 마우스를 올리면 창 왼쪽 아래를 보셔야 합니다. href 에 적은 주소가 거기에 표시됩니다. 누르기 전에 어디로 가는지 확인하는 방법이라는 점에서 알아두시면 좋습니다.

target 과 rel

많은 분들이 읽어보지 않고 그대로 복사해서 쓰는 속성 두 개입니다. target 을 _blank 로 두면 링크가 새 탭에서 열립니다. 읽던 곳으로 돌아올 때는 좋지만, 그 외에는 불편하게 느껴집니다. rel 에 noopener 를 적지 않으면, 새 탭이 우리 페이지를 건드릴 수 있게 됩니다. 그래서 이 둘은 항상 같이 적어주시면 됩니다.

그림도 텍스트입니다

이제 오늘의 두 번째 내용입니다. 그림을 넣기 위해 꼭 사진이 필요한 것은 아닙니다. SVG 는 도형을 글로 설명하는 방식이라, 우리 페이지처럼 텍스트 파일입니다. 직접 입력해보면 브라우저가 그것을 그려줍니다.

profile.svg

네 줄이고, 들어간 것은 세 가지입니다. 원은 중심과 반지름이 있고, cx, cy, r 로 적습니다. fill 은 안쪽 색이고, stroke 는 테두리 색입니다. text 요소가 가운데에 글자 두 개를 넣어줍니다. 여기 적힌 것들이 전부 속성이라는 점이 오늘의 핵심입니다.

같은 폴더에 파일을 하나 더 만듭니다. 이번에는 확장자가 .html 이 아니라 .svg 입니다. 줄이 길어서 천천히 따라오시면 됩니다. 글자 두 개는 본인 이니셜로 바꾸셔도 됩니다. 저장해도 아직 아무 일이 없는데, 페이지가 이 파일을 모르기 때문입니다.

profile.svg

그림 보여주기

둘을 연결해주는 것은 태그 하나입니다. src 는 어떤 파일을 보여줄지 정하는데, 같은 폴더라서 이름만 적으면 됩니다. alt 는 그림의 내용을 글로 적는 곳이고, 생략하시면 안 됩니다. width 와 height 는 파일을 불러오는 동안 화면이 출렁이는 것을 막아줍니다.

그림은 body 태그 바로 아래, 맨 앞에 넣습니다. 닫는 태그가 없는데, 이미지는 안에 담을 내용이 없기 때문입니다. 이런 태그가 몇 개 있고, 앞에서 본 meta 도 같은 종류입니다. 저장하면 이번에는 화면이 바뀝니다.

index.html

우리가 입력한 그림이 그대로 나왔습니다. 어두운 원과 금색 테두리, 그리고 가운데 글자 두 개입니다. 이 중에 사진에서 온 것은 하나도 없습니다. 브라우저가 네 줄짜리 글을 도형으로 바꿔 그린 것입니다. 아직 정렬도 안 되어 있고 간격도 잡혀 있지 않습니다. 그 부분이 앞으로 몇 강에 걸쳐 다룰 내용입니다.

오늘의 화면

3강이 끝난 시점의 페이지입니다. 얼굴 하나, 이름, 링크 두 개, 그리고 지난 시간에 만든 구역들입니다. 전부 왼쪽에 하나씩 위아래로 쌓여 있습니다. 이게 기본값인데, 5강부터는 우리가 직접 정하기 시작합니다.

자주 막히는 곳

여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 값에 따옴표를 빠뜨리는 경우입니다. 값에 공백이 없을 때는 동작하다가, 공백이 생기는 순간 조용히 깨집니다. 둘째, 이미지에 alt 를 적지 않는 경우입니다. 스크린 리더를 쓰는 분들은 그림 자리에서 아무것도 전달받지 못합니다. 셋째, 파일 이름 앞에 슬래시를 붙이는 경우인데, 그건 사이트 최상위를 뜻합니다. 마치기 전에 서버를 멈춰두겠습니다. 이제 폴더에 파일이 두 개 있습니다. 페이지와 그림인데, 둘 다 텍스트 파일입니다. 3강까지 왔는데 아직 아무것도 설치하지 않으셨습니다.

정리

오늘 기억하실 것 세 가지입니다. 태그가 무엇인지를 말하면, 속성은 어느 것인지와 어디인지를 말해줍니다. 값은 전부 따옴표 안에 넣어주셔야 하고, 짧아 보여도 마찬가지입니다. alt 는 덤이 아니라 그림의 일부라고 보시면 됩니다. 다음 시간에는 header, main, footer 로 페이지에 뼈대를 잡아보겠습니다.

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.