웹페이지 (결과) / html 언어 코드, 소스 (원인)
내가 만들고 싶은 페이지 생각하면서 수업 따라가기 !
<meta charset="utf-8">
utf-8로 구성된 문서이니
utf-8로 문서를 읽으라는 문자규칙.
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
가장 많이 쓰이는 태그들.
p vs br
h => heading
html new line tag => br (줄바꿈 태그) <br>
html paragraph tag => p (어디서부터 어디까지 한 단락인지 표현하는 태그) <p></p>
p 태그는 웹페이지를 정보로서 보다 가치있게 해준다. 단락의 구분을 의미론적으로 표현해준다.
br은 단순 줄바꿈일 뿐.
br은 여러번 쓸 수 있지만, p는 정해진 여백만 드러나기 때문에 시각적 자유도가 떨어진다. => CSS 활용 가능.
<p style="margin-top:40px;"> 태그와 태그 사이의 여백 (margin)
그러므로 의미에 맞는 태그를 쓰는 게 더 중요하다.
검색엔진에 제대로 된 의미를 제시해야 검색이 되고, 자료의 접근성을 확보할 수 있기 때문!
그래서 이미지로만 떼운 자료는 쉽게 검색이 안 되는 경우가 있다.
속성(Attribute)
태그를 만든 사람들은
태그 이름만으로는 정보가 부족하다는 것을 알고 속성(attribute)이라는 새로운 문법 도입.
img 태그에
source의 줄임말인 src를 붙여준다.
<img src="bieber.jpg" width="100%">
속성으로 더 많은 의미를 부과할 수 있다.
<title></title>
=> 검색엔진이 책 표지와 같은 정보로 활용함. 웹페이지 만들 때는 꼭!
<!doctype html>
<html>
<head>본문을 설명하는 코드(ex. meta charset / title 등)</head>
<body>본문 코드</body>
</html>
<a> 태그 : anchor(닻), 링크 기능.
html specification (검색할 때 사용하기)
<a href="">
href => a 태그의 속성
hyper text + ref(참조)
target="blank" 새창에서 띄우기
title="~" 툴팁으로 커서 올리면 정보가 보인다.
따듯한 교훈까지 남겨주는 생활코딩 최고..
'오늘은 공부 중 > 강의 공부' 카테고리의 다른 글
| [생활코딩] WEB2 CSS. 선택자와 속성 (0) | 2021.06.17 |
|---|---|
| [생활코딩] WEB1 마무리 + 코드의 힘 + 웹사이트 파비콘 추가하기 (0) | 2021.06.12 |
| [생활코딩] web. 웹서버 운영하기 (0) | 2021.06.08 |
| [생활코딩] 서버와 클라이언트, 웹호스팅 (0) | 2021.06.03 |
| [생활코딩] 웹. 코딩과 HTML - Atom 에디터 환경설정까지 (0) | 2021.06.02 |