<head>안에 배치할 수 있는 요소
<title><base><link><style><meta><script><noscript><templete>
가 존재합니다.
1. <title>은 페이지 탭에 보이는 제목을 의미합니다.
예를 들어,
지금부터 노란색 형광펜 줄을 주의깊게 봐 주십시오.
평범하게 <body>에 내용을 적은 문서의 일반적인 <title>값은 Documents입니다.
그러면 웹페이지에서도
tap에 제목의 Documents로 나타납니다.
반면에 <title>에 Documents 대신에 다른 값을 입력한다면
당연히 tap의 제목도 변화합니다.
vs코드의 배경색 바꾸기
원래 제 vs코드도 배경색이 검은 색인데요, 일단 형광펜으로 나타내고자 vs코드의 배경색을 바꾸게 되었습니다. 혹시 vs코드의 배경색을 바꾸길 원하시는 분이 계시다면 참고해주세요.
- 파일 -> 기본 설정 -> 색 테마 로 들어갑니다.
2. 배경색을 지정해줍니다. 현재 제 vs코드의 배경색은 '고요한 밝은'입니다. 기본 설정은 '내일 밤 파란색'입니다.
2. <base>는 기준이 되는 URL을 지정합니다.
기준이 되는 URL을 지정한다는 것이 무슨 말인지 처음에는 참 알기 어렵습니다. 차근차근 알아가봅시다.
URL이라고 하면 기본적으로 저는 <a>태그가 떠오릅니다. 아시다시피, 하이퍼링크 태그죠.
naver
--><a href="naver.com">naver</a>
근데, base를 설정한다? 잘 이해가 되지 않습니다. 왜 사용해야할지도 모르겠고요.
이렇게 생각해봅시다. naver에는 naver 메인만 존재하는 것이 아니라, naver cafe, naver blog, naver mail 등 여러가지의 하이퍼링크들이 합쳐진 결과물을 저희는 통칭해서 naver라고 부릅니다.
그 중에서 naver blog는 각 계정마다 1개씩 존재합니다. 예를 들어
https://blog.naver.com/uiseong-good
https://blog.naver.com/andongcity00
https://blog.naver.com/greatsangju
등이 있습니다. 위의 주소들을 자세히 살펴보면 공통적인 부분이 있을 것입니다. 바로 밑의 형광펜이 줄쳐져 있는 것처럼 https://blog.naver.com/ 이라는 부분이죠.
https://blog.naver.com/uiseong-good
https://blog.naver.com/andongcity00
https://blog.naver.com/greatsangju
이 경우 <base>코드를 사용합니다.
예를 들어보겠습니다.
<head>부분에<base href="https://blog.naver.com/">을 지정합니다.<body>부분에<a href="uiseong-good">의성군 블로그</a>을 지정합니다.<a>태그를 타고 들어가면 https://blog.naver.com/uiseong-good 으로 들어간 것을 확인할 수 있습니다.의성군 블로그
<base>태그는 <a>태그와 유사하기 때문에 속성도 비슷합니다.
<base>태그의 속성은 크게 2가지로 나뉩니다.
- href
ㄴ모두 아시다시피 하이퍼링크 주소를 지정해주는 속성입니다.- target
ㄴtarget속성은 하이퍼링크가 어느 탭에서 열릴 지 지정해주는 속성입니다.
target속성도 크게 4가지로 나뉩니다.
1) target=_self (기본값)
_self 값은 현재 탭에 링크를 열어줍니다.
<base href="https://blog.naver.com/" target=_self>
<a href="uiseong-good">의성군 블로그</a>의성군 블로그
2) target=_blank
_blank 값은 새로운 탭을 만들어서 그 곳에 링크를 열어줍니다.
<base href="https://blog.naver.com/" target=_blank>
<a href="uiseong-good">의성군 블로그</a>의성군 블로그
3) target=_parent & target=_top
_parent와 _top은 쉽게 이해가지 않을 수 있습니다. 밑에 쉽게 설명하는 그림이 있으니 함께 보시기 바랍니다.
<head>안에 배치할 수 있는 요소
<title><base><link><style><meta><script><noscript><templete>
