728x90
1. 용어, 개념
- element: html 시작 태그와
- tag: element를 기반으로 작동
- html layout
- layout은 결국 div
- div만 사용하면 너무 헷갈리니깐 이름을 넣어준 div라고 생각하면 된다.
- 이 중 head와 body는 의미 있는 div이다.
- 의미 없는 body 내부 div는 자신이 구성하고 싶은 layout에 맞춰서 div를 사용하면 된다.
html layout 이미지를 보면 이해가 쉽다.- head : meta 정보 담기
- body : 실제 ui 꾸미는 전체 창
- header
- main
- footer
- aside
- nav
- attribute: 속성으로 어떤 기능을 나타낸다.
- argument: attrubute에 들어가는 값으로 변경되는 값
- html dom : html file 기준 attribute-argument 묶어서 property라고 명함
- html file : 위에 분류한대로 attribute-argument 나뉘어 져있다.
참고 블로그 : https://valuefactory.tistory.com/122
심화 참고 블로그 : https://medium.com/hexlant/attribute-property
attribute 와 property 의 차이
웹 퍼블리싱을 하면서 접했던 혼돈되는 용어 중에
medium.com
2. 목록
- ol , ul , 내부에 li를 넣기
- ol : order list
- ul : unorder list
- li를 ol, ul에 적용하지 않으면 ul 형식으로 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<body>
<h1>order list</h1>
<ol>
<li>beer</li>
<li>김치</li>
<li>meat</li>
<li>milk</li>
</ol>
<h1>unorder list</h1>
<ul>
<li>asdfdsa</li>
<li>dsfljl</li>
<li>cvkjkl</li>
</ul>
<h1>아무것도 적용 안할 때</h1>
<li>asdfdsa</li>
<li>dsfljl</li>
<li>cvkjkl</li>
</body>
</html>
2. a
- a: anchor (닻)-집게사장 집 = link를 의미. 다른 사이트로 들어가는 거임
- <a href="http://google.com"> Go to google.com </a>
- a 자체로만 링크로 들어갈 수 없다. a를 기본으로 깔고 다른 정보를 추가해야 함
- attributes(속성): tag에 추가하는 부가적인 정보
- href : HTTP reference or hyperlink reference
<a href="http://google.com"> Go to google.com </a>
# 현재창에서 변경
<a href="http://google.com" target="_self">Go to google.com</a>
# 새창 띄움
<a href="http://google.com" target="_blank">Go to google.com</a>
3. img
- img: tag 사이에 글이 들어가는 것이 아니라 걍 img이기 때문에 마침 tag가 없다
- src 경로
- 외부 img 주소
- 내부 이미지 상대경로
- 내부 이미지 절대경로
# 인터넷에 있는 이미지 경로 사용시
<img src="https://xx.cdn.net/cfile/blog/24578240563AA73A18" />
# 현 html file과 동일한 위치에 존재
<img src="tw&je.jpg" />
# 절대경로
<img src="/img/twje.jpg" />
4. favicon
- 탭 상단에 위치하는 작은 이미지
- head 안에 link tag에 작성
- link attribute : rel, sizes, href
- rel: "shortcut icon"
favicon 지정하기 - href: "favicon 주소"
- size: "favicon 사이즈"
- rel: "shortcut icon"
- link attribute : rel, sizes, href
- favicon tip - 코딩 연습용으로 사용해야지 실제 배포하면 소송걸림 주의
- 원하는 파비콘 있는 웹사이트 들어간다.
- 개발자 도구 연다
- command + f : favicon 검색
- 해당 주소 복사 붙이기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="tw&je.jpg" />
<link
rel="shortcut icon"
href="https://love2dev.com/img/2000px-instagram_logo_2016svg-2000x2000.png"
/>
<title>Hello</title>
</head>
5. 추가 메타 정보
# 주된 언어가 한국어인지 영어인지 검색엔진에게 알려주는 것
<html lang="ko">
# 영어 외의 언어나 기호를 입력할 때 브라우저에서 언어의 깨짐을 방지하기 위한
<meta charset="utf-8" />
# 가장 중요. 부가적인 정보 알려주기.1)content 2)name
<meta name="description" content="this is my website" />