패스트 캠퍼스에서 진행하는 네카라쿠배 프로젝트?에 신청을 했더니 1차 테스트 전에 HTML, CSS의 기초 강의를 들을 수 있게 무료로 제공해주었다
사실 자바스크립트나 다른 프레임워크를 배운다고 html나 css를 소흘히 배우고 넘어가서 항상 시멘틱 태그를 짜는 일이나 flex, grid등의 css 조작에 미숙함을 항상 느꼈기 때문에
좋은 기회라고 생각해서 강의를 들으며 정리하려고 한다
html, css, js
html은 구조를 결정하는 뼈대, css는 뼈에 살을 붙이고, js는 뼈를 움직이게 해주는 역할을 한다
이 셋은 모두 웹표준 기술로 웹을 사용하는데 있어서 공식적으로 사용할 수 있는, 안전한, 검증을 거친 기술들이다
cross browsing - 크로스 브라우징
웹을 사용하는데는 브라우저가 필요하며 크롬, 파폭, 오페라, 익스플로러 등과 같이 다양한 브라우저들이 존재한다
이 브라우저들은 각기 다른 회사에서 만들었기 때문에 위에서 언급한 웹 표준 기술들을 각기 다르게 해석해서 브라우저에 출력한다
그래서 같은 페이지일지라도 익스플로러에서만 작동하는 사이트, 크롬에서는 잘 작동하는데 파이어폭스에선 잘 안되는 사이트가 발생하게 되는것
이미지
jpg
손실 압축, 높은 압축 효율
24비트 컬러 지원, 고해상도 표현 가능
가장 널리 쓰임
png
비손실 압축
8비트/24비트 컬러 지원, 고해상도 표현 가능
알파 채널 (투명도) 지원
gif
비손실 압축
8비트 컬러 지원
여러 장의 이미지를 하나의 파일에 담을 수 있음
webp
비손실 손실 압축 지원
8비트/24비트 컬러 지원
알파 채널 (투명도) 지원
여러 장의 이미지를 하나의 파일에 담을 수 있음
지원하는 브라우저가 제한적
svg
마크업 언어 기반의 벡터 그래픽 표현 포멧 (픽셀이 아닌 점이나 선으로 표현)
해상도 영향에서 자유로움
CSS 스타일링 가능
자바스크립트로 이벤트 핸들링 가능
코드 혹은 파일로 사용 가능
HTML 태그
TITLE
문서의 제목 브라우저의 탭에 제목으로 나타난다
META
문서에 관한 정보를 검색 엔진이나 브라우저에 제공한다
<meta charset="UFT-8">
<meta name="author" content="홍길동">
<meta name="description" content="홍길동">charset : 문자 인코딩 방식
name : 정보 종류, content : 정보 내용
inline / block
block
<div>, <p> 등의 태그
사용 가능한 최대 가로 너비를 사용한다
크기를 지정할 수 있다
설정하지 않으면
margin과 padding 사용 가능
수직으로 쌓임
레이아웃
inline
<span>, <img> 태그
필요한 만큼의 너비만 사용한다
크기를 지정할 수 없다
margin과 padding으로 위, 아래 여백을 정상적으로 사용할 수 없다
수평으로 쌓임
텍스트
콘텐츠 구분
html 문서를 작성할 때는 div태그만으로 레이아웃을 정해서 작성해도 되지만 시멘틱 태그, 의미를 가지는 태그들로 작성할 수도 있다
이렇게 시멘틱 태그로 html을 작성하면 남들이 보기에 해당 영역에 어떠한 데이터가 들어가있는지 알아보기 쉽고 유지보수측면에서도 원할한 작업이 가능해진다
이러한 시멘틱 태그는 검색 엔진이 자료를 수집할 때도 도움을 주어서 SEO측면에서도 유리하다
header
상단 정보 영역
footer
하단 정보 영역
h1~h6
제목을 나타내는 태그, 이를 단순히 폰트를 줄이기 위해서 사용하지 말 것, 중간 단계를 건너뛰지 말 것
main
메인은 <body> 내부의 주요 컨텐츠를 나타내는 영역
문서에 하나만 존재해야한다
article
재사용이 가능한 형태의 구역, 독립적으로도 사용이 가능해야한다
h1~h6를 포함하여 식별
section
문서의 일반적인 영역을 설정
h1~h6를 포함하여 식별
aside
문서의 별도 콘텐츠를 설정
광고나 사이드바
nav
다른 페이지 링크를 제공하는 영역
'HTML' 카테고리의 다른 글
| input type="submit" (0) | 2020.11.09 |
|---|---|
| form (0) | 2020.10.13 |
