오랜만에 다시 돌아온 코드잇 학습일기! 지난 주에도 한 개 쓰고 일주일만인데 엄청 오랜만인 것처럼 느껴진다. (왜지?)
오늘은 링크에 대해서 공부했다. 링크는 <a> 태그로 만들 수 있는데, 퍼블리싱을 공부해 본 적이 있다면 정말 필수적으로 공부해야 하는 기초 태그라고 할 수 있다. 링크를 사용하지 않고서는 웹사이트를 만드는 것이 거의 불가능하니까... 그래서 오늘 들은 강의들은 익숙한 내용들이 많았고, 다시 한 번 아는 내용들을 복습할 수 있었던 좋은 기회였다.
어제는 회사 업무가 바빠서 코드잇 강의를 듣지 못했다. 적어도 하루에 강의 한 개 정도는 듣자는 것이 목표이지만, 지키지 못했다고 해서 동기부여에 부정적인 영향을 끼치는 건 더 좋지 않을테니까... 정 못하겠으면 '바빠서 어쩔 수 없었어' 하고 주말에는 '오늘은 쉬어야지' 하고... 올해에는 이렇게 포기하지 않고 꾸준히 공부를 하려고 한다.
<a> 태그로 링크 만드는 방법과 상대 주소
페이지와 페이지를 이어주는 링크를 만들 때에는 <a> 태그를 사용한다. href의 속성 값으로는 사이트 전체 주소를 쓰거나 혹은 경로를 써주면 된다.
사이트로 이동하는 경우
<a href="사이트 전체 주소">
내용
</a>
상대 주소를 사용하는 경우
현재 폴더는 점 한 개(./)로 표시하고 상위 폴더는 점 두 개(../)로 표시한다. 최상위 폴더라면 경로 맨 앞에 '/'로 시작하면 되며, index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있다.
<a href="example.html">
링크
</a>
<!-- 현재 보고있는 파일과 동일한 수준의 화면으로 이동 -->
<a href="test/index.html">
링크
</a>
<!-- 현재 보고있는 파일과 동일한 수준에 test라는 폴더가 있고
그 폴더 안에 있는 index.html 화면으로 이동한다는 의미,
index.html을 생략하고 "text/" 라고만 써도 동일한 화면이 보이는데
index 파일이 폴더의 경로로 접속했을 때 기본으로 보여주는 파일이기 때문 -->
<a href="./text/index.html">
링크
</a>
<!-- ./ 표시는 현재 폴더에서 example 폴더를 찾으라는 의미,
생략 가능하므로 바로 위의 링크 예제와 동일한 결과를 가짐 -->
<a href="../main.html">
링크
</a>
<!-- ../ 표시는 한단계 상위 폴더로 가서 main.html 파일을 찾으라는 의미 -->
<a href="/category/menu.html">
링크
</a>
<!-- 최상위 폴더 기준으로 현재 사이트 주소 바로 뒤에 경로를 붙여서 이동 -->
URL 프래그먼트 (URL Fragment)
화면이 바뀌지 않고, 화면 안에서 해당하는 부분으로 이동하는 링크도 있다. 아래와 같이 위키피디아 사이트에서 html을 검색하면 좌측에 목차가 보여진다. 이 목차 카테고리를 클릭하면 화면이 바뀌지는 않고, 스크롤만 이동하여 화면 내 해당하는 목차의 내용을 보여준다.
그리고 주소창에는 선택한 목차가 샾(#)과 함께 표시된다.
위의 '#마크업' 표시는 주소 맨 마지막에 붙어서 해당 주소의 일부분을 가리키는 용도인데, 이것을 'URL 프래그먼트'라고 부른다.
위의 사진처럼 컨텐츠 부분에 아이디 속성으로 이름을 지정해놓으면, 주소 맨 마지막에 프래그먼트로 사용이 가능하다. 코드 예시를 통해 더 자세히 알아보자.
<body>
<h3>목차</h3>
<a href="#아침메뉴">아침식사 메뉴</a>
<a href="#점심메뉴">점심식사 메뉴</a>
<a href="#저녁메뉴">저녁식사 메뉴</a>
<h2 id="아침메뉴">아침식사 메뉴</h2>
<p>
아침으로는 사과 1조각을 먹습니다.
주스도 마십니다.
</p>
<h2 id="점심메뉴">점심식사 메뉴</h2>
<p>
점심 메뉴는 샐러드입니다.
저녁 때 고기를 먹을 예정이므로 가볍게 먹어요.
</p>
<h2 id="저녁메뉴">저녁식사 메뉴</h2>
<p>
저녁에는 삼겹살을 구워 먹습니다.
동네 맛집에 가서 먹어요.
</p>
</body>
목차 부분의 아침식사 메뉴, 점심식사 메뉴, 저녁식사 메뉴를 누르면 각각의 타이틀이 있는 곳으로 이동한다. 예제의 경우는 텍스트가 짧아서 한 화면에 모든 내용이 보인다. 그래서 필요성을 거의 느끼지 못할 수 있는데, 만약 본문 길이가 길다면 이런 기능들이 유용하게 쓰일 것이다.
새 탭(창) 열기
링크를 클릭했을 때에 현재 페이지가 아닌 새 탭에서 열리게 하는 방법을 알아보았다.
<a href="https://movie.naver.com" target="_blank">
네이버 영화 바로가기
</a>
<!-- 새 창(탭)으로 열기 -->
<a href="https://movie.naver.com" target="_self">
네이버 영화 바로가기
</a>
<!-- 현재 창으로 열기,
타겟을 정해주지 않았을 때의 기본값 -->
target에 _blank, _self 대신에 창 이름을 지정해줄 수 도 있다.
<a href="https://movie.naver.com" target="movie">
네이버 영화 바로가기
</a>
<!-- movie 라는 탭이 열려있지 않다면 새 탭이 열리며 해당 링크로 이동,
이 탭의 이름은 movie임 -->
<a href="https://movie.daum.net" target="movie">
다음 영화 바로가기
</a>
<!-- 위의 네이버 영화 링크가 열려 있다면 이미 movie 라는 이름의 탭이 열려 있는 상태임,
새 탭이 생기지 않고 기존 movie 라는 이름의 탭에서 해당 페이지가 열림 -->
URI 스킴(URI Scheme)
링크에 페이지 연결 외에 URI 스킴을 연결할 수도 있다. 그 대표적인 것으로 이메일 보내기와 전화 걸기가 있는데 함께 기억해두면 좋을 것 같다.
<a href="mailto:test@example.com">
이메일 보내기
</a>
<!-- test@example.com 으로 이메일 보내기 -->
<a href="tel:+821012345678">
전화 걸기
</a>
<!-- 한국의 010-1234-5678로 전화 걸기 -->오랜만에 학습일기를 다시 쓰니까 재밌다. 내일은 텍스트에 대해 공부를 하고 블로그에 내용을 정리해보도록 하겠다. 코딩을 잘 하게 되는 그날까지, 포기하지 말고 화이팅!
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| 코드잇 학습일기 day12. 리스트 태그와 스타일링 (0) | 2023.04.10 |
|---|---|
| 코드잇 학습일기 Day11. 텍스트 문서를 작성하는 데 필요한 태그들 (0) | 2023.04.05 |
| 코드잇 학습일기 Day9. HTML 개념과 구조, 코멘트(주석) 작성 방법 (0) | 2023.03.27 |
| 내용에 꺽쇠 기호(<>) 텍스트 넣는 방법 (0) | 2023.03.09 |
| 부모 속성을 상속하는 CSS 태그 모음 (0) | 2021.08.17 |
댓글