주요 태그에 대한 마지막 정리입니다.
HTML은 정보를 표현하고 정보를 담아내는 것에 집중하도록 만들어져 있기에 정보에 중점을 두어 조치들이 취해집니다.
정보로서의 언어라 보는 것으로 HTML을 정보답게 하기 위해 어떠한 역할이 수행되는지 알아보겠습니다.
글꼴 : font
<font></font> 태그는 지금은 퇴출되어 사용되지 않습니다. 이 태그는 문자를 꾸며줄 수 있는데 font태그에 size속성 값이나 color 속성 값을 지정하여 문자의 크기를 1부터 7까지의 사이즈로 변화시키거나 색상을 변경할 수 있습니다.
그러나, 이러한 정보는 시각적으로만 나타나기에 문자의 정보를 보여줄 수 없는 태그입니다. 그렇기에 font태그의 문제점은 문자에 아무런 의미가 부여되지 않는다는 것입니다.
HTML은 정보에 집중한 언어이기에 CSS언어를 새로이 만들어 디자인 측면의 문제를 해결하도록 할 수 있기에 font태그는 현재 사용되지 않는 것이 좋습니다.
meta 태그
meta태그는 charset속성 값을 이용하는 데 사용을 했었는데, 이는 어떠한 데이터가 존재할 때 이것을 설명하는 데이터라고 생각하시면 됩니다.
웹 페이지의 정보 요약, 검색 키워드 정보들을 설명할 때 사용이 됩니다. 웹 페이지에 출력되어 표현되지는 않지만 부가적인 설명을 추가하기 위해 meta태그를 사용합니다. 그렇기에 meta태그는 head태그 안에 존재하여 입력됩니다.
meta태그의 name속성 값을 description을 지정하고, content속성 값을 소제목 형식의 값으로 지정하여 주면 웹 페이지 상에 표시가 되지 않는 웹 페이지의 요약정보로 사용할 수 있습니다.
다른 meta태그를 이용하여 name 속성 값을 keywords로 지정하여 문서를 정의하는 content 속성 값들을 지정하면 중요한 단어들을 키워드로 사용할 수 있습니다.
author의 값을 name속성에 지정하면 content의 값을 보고 content의 값을 저자라는 정보로 저장할 수 있습니다. 또는, meta 태그에 http-equiv속성을 지정하여 refresh로 값을 설정하면 content의 값만큼 해당 웹페이지를 reload 하는 기능을 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="소제목">
<meta name="keywords" content="키워드1,키워드2,키워드3">
<meta name="author" content="저자">
<meta name="refresh" content="60">
<!--
refresh를 통해 60초 마다 새로고침이 실행됨
-->
</head>
<body>
안녕하세요! 웹 페이지입니다.
</body>
</html>semantic태그
의미론적인 뜻을 html5부터 정의하여 제공하고 있습니다.
웹 페이지에서 제목(header)에 포함되는 부분에 <header></header>라는 태그로 감싸줍니다. header태그는 header에 포함되는 정보가 사이트 전체의 정보가 표현되는 부분이라는 것을 의미합니다. 사용을 하지 않아도 실제 웹 페이지에 영향이 가지 않습니다.
header태그가 존재하면 <footer></footer> 태그가 존재하는데 footer태그는 아래 고정되어 있는 정보들을 표현할 때 사용됩니다. 다른 시맨틱 태그들이 더 존재하는데 2개의 태그만 더 예시로 들고 이미지로 첨부하겠습니다.
내비게이션 역할을 하는 내용을 묶는 태그인 <nav></nav> 태그가 존재합니다. 콘텐츠를 탐색할 때 사용되는 내비게이션 정보가 어떤 데이터인지 알려주는 역할을 합니다.
본문의 내용에 사용되는 시맨틱 태그는 <article></article> 태그입니다. 여러 본문이 존재할 때는 <section></section> 태그로 article태그를 감싸주면 됩니다.
opentutorials.org/course/2039/10954
검색엔진을 최적화를 하여야 되는데 검색엔진의 최적화는 검색엔진들이 콘텐츠를 잘 해석될 수 있도록 도움을 줍니다.
검색엔진에 최적화되기 위해 의미론적으로 타당한 태그를 잘 사용하여 문법의 설명이 정확히 되어있어야 되는 것이 기본입니다. 구글에서 제공한 검색엔진 최적화에 대한 해설집은 다음과 같습니다.
1. 적합한 태그를 사용해야 합니다.
2. title 태그를 이용하여 제목을 나타내어야 합니다.
3. meta 태그를 description의 name을 지정하여 요약정보를 표현해야 합니다.
4. URL의 주소를 알기 쉽게 만들어야 합니다.
5. 링크로 조직화가 잘 되어있어야 합니다.
6. URL을 제거해도 상황에 맞는 출력을 해주어야 합니다.
7. 사용자를 위한 콘텐츠를 작성해야 합니다.
8. a태그를 기본적인 정보를 포함하도록 생성해야 합니다.
9. 이미지 관련 정보는 alt속성을 이용해 대안 텍스트를 제공해야 합니다.
10. 이미지 파일은 디렉터리를 따로 만들어 저장해야 합니다.
11. 제목 태그를 적절히 사용합니다.
12. robots.txt를 보안도구로 사용하지 말아야 합니다.
13. pagerank를 이용하여 링크의 개수로 페이지마다 순위를 매겨 검색 상위에 노출됩니다.
웹 개발자 도구
웹 개발을 하는데 필요한 분석 작업, 테스팅 작업을 도와주는 도구입니다.
많은 개발자 도구가 파이어 버그라는 개발자 도구의 영향을 받아 만들어졌기에 기본적인 기능은 비슷합니다. 크롬에서는 f12를 누르면 개발자 도구를 볼 수 있으며 코드의 오른쪽 부분인 styles를 통해 어떤 css를 이용하여 디자인했는지 알 수 있고, 왼쪽 상단에 Toggle device toolbar를 통해 어떤 디바이스일 때 나타나는 화면을 볼 수 있습니다.
Network탭을 통해 웹 브라우저와 웹 서버가 서로 주고받는 정보를 체크할 수 있기도 합니다.
모바일 지원 (viewport)
모바일 웹을 작성할 때 뷰포트를 고려해야 하는데 Toggle device toolbar을 통해 모바일 때의 화면을 볼 수 있습니다. html에서는 화면의 크기에 따라 브라우저가 맞춰지도록 가능한데 meta태그에 name속성 값을 viewport값으로 지정하고, content속성 값에 width=device-width로 지정하여 설정하면 화면의 폭을 디바이스 폭만큼 지정하여 나타나게 할 수 있습니다.
줌 기능을 확대하지 않고 축소하지도 않은 채 웹 페이지를 실행하기 위해 initial-scale=1.0을 content속성에 지정하기도 합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
안녕하세요! 웹 페이지입니다.
</body>
</html>외부 문서 삽입 : iframe
iframe은 어떤 문서 안에 다른 문서 내용을 가져오는 기법입니다. iframe은 <iframe></iframe> 태그를 사용하면 되고, src속성을 통해 불러오고자 하는 주소를 입력하면 외부 사이트가 loading 됩니다.
폭이나 높이를 조정하기 위해 width속성이나 height속성의 값을 픽셀로 지정하여 설정하면 폭과 높이를 지정할 수 있습니다.
출처가 불분명한 사이트를 iframe을 통해 가져오면 보안에 취약하기에 출처가 명확한 것만 가져오는 것이 좋습니다.
iframe 보안 적용
가져온 페이지에서 자바스크립트와 같은 언어로 악의적인 행위를 하는 코드가 있을 경우 현재 페이지로 가져오면서 실행되기 때문에 공격에 무방비합니다.
이를 방어하기 위해 iframe태그에 값이 없는 sandbox속성을 지정하면 iframe안쪽에 있는 콘텐츠에서 실행되는 코드를 원천적으로 차단하여 가져오는 코드는 실행되지 않을 것입니다. 대신 sandbox속성은 오래된 브라우저에서 작동하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="https://www.youtube.com/embed/6Y8PpdMb6BI" width="600" height="350" frameborder="0" allowfullscreen></iframe>
<!-- frameborder은 테두리 유무입니다. -->
<iframe src="https://www.youtube.com/embed/6Y8PpdMb6BI" width="600" height="350" frameborder="0" allowfullscreen sandbox></iframe>
<!-- sandbox가 있어 스크립트가 실행되지 않아 동영상이 재생이 되지 않습니다. -->
</body>
</html>
감사합니다. 이상으로 생활코딩의 HTML정리를 마치겠습니다!🙋♂️
'TeamH4C_ProjectH4C > 프로그래밍 언어' 카테고리의 다른 글
| [TeamH4C_C언어] 기본 문법 (0) | 2021.02.21 |
|---|---|
| [TeamH4C_C언어] C의 시작 (0) | 2021.02.21 |
| [TeamH4C_HTML] 주요 태그-2 (0) | 2021.02.13 |
| [TeamH4C_HTML] 주요 태그-1 (0) | 2021.02.13 |
| [TeamH4C_HTML] 간단한 웹 페이지 만들기 (0) | 2021.02.13 |