HTML 정리 1

정리

역할

html - 기획자의 역할, 전체 구조 담당
css - 디자이너의 역할, 전체적인 색감이나 디자인 담당
js - 개발자의 역할, 페이지 이동등 기능 담당

viewPort - 주소창 아래의 홈페이지 부분
rendering - 뷰포트를 출력하는 것

웹 이미지

비트맵 - jpg, png 인물이나 풍경사진

• 픽셀, 정교하고 다양한 색상 자연스럽게 가능
• 확대 축소시 품질 저하

1. jpg - 압축할때마다 손실되므로 최대한 압축을 자제, 용량 적은 장점, 배경 투명 안됨
2. png - 비손실 압축, 용량이 큼, 배경 투명도 가능
3. gif - 비손실 압축, 움짤, 애니메이션 다양한 색상 안됨
4. webp - 구글이 개발 이미지 포맷, 완벽 손실 비손실 지원, 움짤 지원, 투명도 지원, 하위호환성 체크

벡터 - svg 이외의 아이콘 등

• 점,선, 면 수학으로 이뤄짐, 정교한 이미지는 표현하기 어려움
• 확대 축소시 자유로움, 용량 변화없음
  svg - 해상도에서 자유로움, 코드이기 때문에 css와 js로 제어 가능, 파일 및 코드 삽입 가능

브라우저는 index를 우선적으로 찾음

HTML

head

• 보이지않는 정보를 작성
• 웹 페이지 제목, 설명, 파일 위치, css

body

• 보이는 구조를 작성
• 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지

div에 작성

<div>hello</div>

css

• 외부

<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./abc.png">

• 내부

<style>
    div {
      text-decoration: underline;
    }
  </style>

js

• 외부

<script src="./main.js"></script>

• 내부

<script> 
	console.log('hello') 
</script>

meta

페이지 제작자, 내용, 키워드등 이외의 정보

html파일들은 폴더에 넣지말고 항상 루트에 놔둬야함

이미지 alt 속성은 필수 대체 태그임

localhost - 내 환경, 또 각 포트번호로 실행됨

상대경로

• ./는 주변 파일이나 폴더 - 생략가능, ../는 상위 경로로 올라감

절대경로

• /는 내 최상위 루트 경로에서 시작, 현재 포트번호가 생략됨
• http나 https 경로도 절대경로임
• 따라서 상황에 맞게 절대, 상대경로를 사용하면 됨

codepen - 간편하게 단일코드로 확인해볼 수 있음

html - body 작성

브라우저 속성 초기화

• 각 브라우저마다 속성이 다를 수 있기때문

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">