프론트엔드 개발자 프로젝트 패캠 수강 후기 - 정보를 의미하는 태그

이번에는 프론트엔드 개발자가 꼭 알아야 할 정보를 의미하는 태그들에 대해 알아보자.

 

<title>

title 태그는 웹브라우저의 tab 부분에 출력할 값을 설정

title 태그는 웹브라우저의 tab부분에 출력할 값을 설정할 때 사용된다. 주로 회사명, 서비스명, 슬로건 등을 조합해서 사용한다.

 

<link>

파일을 연결할 때 사용

주로 css 파일(문서)을 가져와서 사용할 때 쓰인다. 하지만 css 파일이 아닌 다른 파일을 가져올 경우도 있다.

웹브라우저는 파일의 확장자까지 체크하지 않기 때문에, 가져오려는 파일이 html 파일과 어떤 관계를 가지는지 명시해줘야 한다. 이 때 사용되는 html 속성이 'rel'이다.

 

rel은 'Relationship'단어의 약어이며 가져올 외부문서가 현재의 HTML과 어떤 관계인지를 명시하는 HTML속성(Attribute)이다. rel에 명시된 값을 이용하여 웹브라우저는 해당 파일이 어떤 파일인지 알게 된다. rel이 어떤 단어의 약어였는지, 어떤 역할을 하는지는 사실 사용할때마다 그냥 모르고 지나갔는데, 이번 강의를 보면서 알게 됐다.ㅎㅎ

 

rel속성에 icon값을 명시하면, 웹브라우저 탭 왼쪽에 보이는 아이콘을 표시할 수있다. 흔히 파비콘이라고 불리는 아이콘이며, HTML favicon 적용 시에는 favicon으로 지정하는 것을 권장한다.

예쁜 파비콘을 등록하여 사용해봅시다!

href는 가져오려는 파일이 현재의 html 파일을 기준으로 어떤 경로에 위치하는지 주소를 명시할 때 사용된다.

여기에서 절대경로, 상대경로 개념이 등장하게 된다. 

 

[절대경로]

찾는 파일이 어떤 경로에 있는지 root 경로부터 해당 파일의 위치까지 전체를 명시하는 방법

- index.html 파일에서 heropy.png 절대경로 : http://localhost:5500/images/heropy.png 또는 /images/heropy.png

 

[상대경로] : 현재 파일을 기준으로 찾는 파일이 어떤 경로에 있는지 상대적인 경로를 명시하는 방법

index.html 파일에서 heropy.png 상대경로 : ./images/heropy.png  또는 images/heropy.png

( ./ 는 생략 가능 )

 

<script>

자바스크립트 파일을 가져오거나 자바스크립트를 사용할 수 있도록 해준다.

외부에 있는 자바스크립트 파일을 가져오거나 html 파일 안에서 자바스크립트를 사용할 수 있도록 할 때 사용한다.

css 파일을 가져올때는 파일의 경로를 href 속성을 사용하는데, 자바스크립트는 src 속성을 사용한다,

 

<meta>

검색엔진 or 웹브라우저에 제공할 각종 정보를 설정

검색엔진이나 웹브라우저에게 제공할 각종 정보를 설정할 때 사용한다. http-equiv, name, content 속성으로 이루어져 있으며, meta태그로 설정할 수 있는 값은 엄청나게 많다. 

예를 들어, 검색엔진 결과값이나, 검색엔진의 검색 대상에서 제외시키거나, 사이트 제작자 표시, 문자셋 설정 등..

charset은 문자 인코딩 방식을 정의할 때 사용한다. 한글을 사용하는 우리나라에서는 euc-kr, utf-8 등을 많이 사용했는데, 요새는 거의 utf-8로 사용하고 있다.

 

오늘은 간단하게 정보를 나타내는 태그들에 대해 알아보았다. 웹사이트나 or 웹서비스를 이용할 때는 검색엔진최적화(SEO)가 중요한데, meta 태그에 대해 좀 더 공부를 해야 할 필요성을 느꼈다.

 

이제 슬슬 기본 강의가 끝나가고 스타벅스 클론 코딩 프론트엔드 프로젝트가 시작되려는 시점이 다가온다. 아직 남아 있는 기본 강의를 열심히 듣고, 스타벅스 클론 코딩 프론트엔드 프로젝트를 잘 따라가면 많은 도움이 될 것 같다.

 

http://abit.ly/5lc7dz9

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스

※ 추천 한마디

패스트캠퍼스 프론트엔드 개발자 초격차 패키지는 완전 기초가 되는 HTML, CSS 부터 각종 프론트엔드에서 사용되는 언어 등을 이용하여 실제로 웹사이트를 만드는 프로젝트까지 포함돼 있어 강의 구성이 정말 알찬 것 같다. 따라서 프론트엔드 프로젝트에 투입되었거나 스터디를 통해 프론트엔드 프로젝트를 진행 중인 분들 중에서 기초부터 실전 프로젝트까지 해보고 싶은 분들이 들으면 좋을 것 같다.