link나 image는 하나의 웹 페이지에서 벗어나 외부 리소스를 가져온다는 점에서 차이를 보인다.
link는 한 페이지에서 다른 페이지로 사용자를 이동시켜주며, image는 다른 리소스를 페이지 내부로 가져온다.
이 둘을 사용하기 위해서는 attribute라는 다른 html syntax가 필요하다.
이번에는 몇 개의 html문서와 이미지 파일을 포함한 하나의 웹 사이트를 만들어볼 것이다.
본질은 복수의 파일과 폴더의 조직화에 있다는 것을 잊지 않게 주의하면서 시작해보자.
2.1. Naming Conventions
지금까지 만든 폴더나 파일은 이름에 white space가 하나도 없다. 앞으로도 거의 없을 것이다.
이를 추가하려면 추가적인 처리가 필요해 보통은 이름에 띄어쓰기가 들어가지 않도록 한다.
2-2. Anchor <a>
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>문장은 예시입니다.</p>
</body>
</html>
<a> 태그를 붙여 link를 넣을 수 있다. 대상인 텍스트를 감싸 그 역할을 바꿔주는 것이다.
대응하는 링크 없이 <a> 태그만 붙여줄 경우 변화가 없는데, 이는 <a> 태그는 그 자체로는 아무 기능이 없기 때문이다.
Element가 그 content에 의미를 더해주는 것처럼, attribute도 그게 붙은 element에 뜻을 더해준다.
예를 들어, 여기서 <a> 태그에 추가할 href attribute는 링크 클릭 시 갈 목적지를 지정해준다.
이는 다른 웹 페이지일수도, 파일일 수도 있다.
// 다음과 같이 <p> html을 수정
<p> 이 문서는 예시입니다. <a href='image.html'>images</a></p>Attribute가 어떤 형식으로 들어가는지를 기억하자.
attribute:'value'
방금 쓴 html을 브라우저에서 불러와 'images' 텍스트를 클릭하면 image.html로 이동한다.
href attribute는 브라우저에게 <a> element가 link이며, 사이에 있는 문자가 사용자를 이미지로 옮겨준다는 것을
알려준다.
2.3. Absolute, relative & root-relative links
링크를 잘 사용하려면 웹 사이트가 어떻게 구성되는지를 알아야 한다. 웹 사이트는 간단하게 html 파일들의 집합이다.
그 파일을 다른 파일에서 불러오기 위해 인터넷은 URL, uniform resource locators를 이용한다.
어떤 것을 불러오느냐에 따라 URL도 다른 format을 취하는데, 크게는 3가지로 나눌 수 있다.
2.3.1 Absolute links
Absolute link는 웹 리소스를 가져오는 가장 디테일한 방법이다. 우선 scheme (e.g. http://)으로 시작해
domain name을 쓰고, 다음 목표 웹 사이트의 path를 넣으면 된다.
<a href='http://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla Developer Network</a>이렇게 이동할 링크를 a tag에 attribute로 추가해주고 태그 안의 텍스트를 클릭하면 넣어준 주소로 이동할 수 있다.
같은 웹 사이트의 페이지 간 이동에도 이 방법을 사용할 수 있지만, 가독성을 위해 다른 웹 사이트로 이동할 때만
사용하는 것이 권장된다.
2.3.2 Relative links
relative link는 동일 웹 사이트의 다른 페이지를 지정한다.
scheme과 domain은 같다고 가정하므로 path만 적으면 된다.
여기서는 링크하고 싶은 파일의 위치와 이름을 href의 value로 적으면 된다.
value는 해당 html 파일에서 목표 html 파일을 적으면 된다.
이렇게 links.html에서 misc 폴더에 있는 extras.html을 연결하고 싶다면
<a href=./images.html'> images </a>
./misc/extras.html을 적어주면 된다. 슬래시는 폴더의 이름을 구분하는 역할을 한다.
반대로 extras.html에서 misc 폴더 밖의 links.html로 연결하고 싶다면 다른 syntax가 필요한데,
온점 2개를 찍으면 현재 폴더에서 한 단계 상위 폴더로 나가는 것을 의미한다.
여기서는 다음과 같이 써주면 된다.
<a href='../images.html'>links</a>
2.4. Link target
가끔은 attribute를 이용해 element의 두 가지 이상의 특성을 바꿔야 할 때가 있다. 예를 들어 <a>에 attribute를 붙일 때,
연결되는 웹 페이지뿐만 아니라, 그 페이지를 어디에 띄울 것인지도 지정할 수 있다. 디폴트 값으로는 현재 페이지를
지정 페이지로 대체하지만, 새 탭에서 열도록 바꿔주는 것도 가능하다.
<a href='https://deveolper.mozilla.org/en-US/docs/Web/HTML' target='_blank'>Mozilla Developer Network</a>
다음과 같이 target attribute와 그 값을 각각 지정해주면 새로운 탭에서 페이지를 열어준다.
2.5. Images
이미지는 그것을 렌더링하는 웹 페이지의 외부에서 온다. 이미지는 <img> 태그와 src attribute,
그리고 src의 value로는 이미지 파일의 위치를 넣어주면 된다.
<img src='some-photo.jpg'>
다른 attribute의 하나로 alt가 있는데, 이는 이미지를 보기 어려운 사용자들에게 이미지를 대체할 이름을 지정해준다.
<img src='image.png' alt='그림을 대체하는 텍스트'>이렇게 이미지를 넣어주고 마우스를 올리거나, 이미지가 표시되지 않는 환경에서 보면 alt의 value 텍스트를 볼 수 있디.
2.6 Image format
마지막으로 웹에서 사용되는 이미지의 포맷에 대해 잠시 알아보자.
웹에서 사용되는 이미지의 포맷에는 4가지가 있고, 각각의 용도가 조금씩 다르다.
2.5.1. JPG
JPG는 파일 크기를 너무 키우지 않고도 큰 팔레트를 다루기 위해 디자인되었다.
그래서 gradients를 정밀하게 조정 가능하지만, 투명한 픽셀을 표현할 수 없다는 단점이 있다.
2.5.2. GIF
간단한 애니메이션을 볼 수 있지만 팔레트가 제한적이다. 투명 픽셀은 키거나 끄는 두 가지 선택밖에 없으므로
애니메이션이 없다면 png를 사용하는게 좋다.
2.5.3. PNG
주로 사진에 사용되는 형식이다. JPG보다 용량이 크지만 팔레트 제한없이 더 고화질의 이미지를 볼 수 있다.
2.5.4. SVG
앞의 3가지 타입과는 다르게 벡터 형식을 가진다. 따라서 퀄리티의 변화가 없이 이미지의 크기를 바꾸는 것이 가능하다.
그렇기 때문에 반응형 디자인에 적합한 형식이다.
'CSS' 카테고리의 다른 글
| Ch 05. CSS 선택자 (0) | 2022.04.14 |
|---|---|
| Ch 04. CSS Box Model (0) | 2022.04.12 |
| Ch 03. CSS (Cascading Style Sheets) (0) | 2022.01.25 |
| Ch 01. Introduction (0) | 2022.01.16 |