반응형
웹 브라우저 : 인터넷 화면을 보여주는 프로그램 (크롬, 파이어폭스, 사파리, 오페라, 엣지 등)
개발 후 마지막에 다른 사용자 웹브라우저로 확인해보자
ㄴ> '크로스 브라우징' (문제가 생겼을때 해결하는 과정)
HTML : 웹 페이지를 작성하는 언어 (Hyper Text Markup Language)
웹문서 / html 문서 / html 페이지
웹페이지생성1 : 저장할때 확장자는 반드시 .html 또는 .htm
웹페이지생성2 : 가장 먼저 보여질 화면(메인페이지)의 이름은 반드시 "index.html"
주요 컨텐츠 -> 메인페이지, 눌러서 나오는 나머지 페이지 -> 서브페이지, 요즘 랜딩페이지가 많이쓰임(이벤트 페이지로 사이트 유도)
sub page -> notice.html event.html login.html sitemap.html 등
Navigation Bar (INDEX에서(메인페이지) 꼭 담아두어야함)
주메뉴(1depth) 서브메뉴(2depth)
GLOBAL NAVIGATION BAR(메인탭) - 홈페이지에서 모든 페이지에 보이는 탭
LOCAL NAVIGATION BAR(하단탭) - 특정페이지에서 보이는 탭
SIDE NAVIGATION BAR(마지막탭)
표준화 페이지 기본 형식
<!DOCTYPE.html> 문서형식 (이 안에 들어있는 문서를 어떻게 조립해라 라는 설명서와 같은 형식, 강제성은 없음, 선언의 목적)
<html.lang="ko"> 기본 언어 설정 (lang -> 웹 접근성에서 명시하고 있는 내용 중 하나)
<head> 사람들에게 보이진 않지만 보여져야 할것들을 담아두는곳
<meta charset="uft-8> 문자셋 (charset -> character set) (문자 인코딩을 지정하는 곳) (글자가 깨져보인다면 여기에 문제가 있는것, charset 속성의 가장 일반적인 값은 UTF-8만 사용) (한글 -> EUC-KR로 해놓고 저장시 하단에 인코딩 방법 ANSI로 저장해주기) ☆선언한방식 = 저장방식 ☆
<title>문서제목</title> 페이지 제목 (웹페이지를 사용하고 읽어주는걸 사용자에게 먼저 읽어주는 부분)
</head>
<body> 사람들에게 보여지는 페이지의 항목을 담아두는곳
</body>
</html>
Screen Reader(화면 낭독기) - 대표적인 리더기 종류 NVDA, JAWS, Sense
웹 접근성 연구소 (네이버에서 검색하는게 좋음) -> 한국정보화진흥원에서 운영하는 곳으로 여기서 품질인증을 받으면 된다.
이미지 속성 -> <img src=""alt=""> ,
alt 들어가는 ""안에 광고, 배너 등의 내용은 들어가면 x,
이미지의 텍스트를 써주자 그래야 보는 사람들과 장애를 가진 사람들이 얻는 정보가 일치한다.
페이지타이틀<title>, 프레임은 <iframe title="", 콘텐츠 블록에는 <h1>~<h6>
vscode에서 html 문서로 저장한뒤 ! 입력 후 tab키 누르면 페이지 기본 세팅이 입력됨(다른에디터에선 안될 수 있음 그럴땐 emmet이라는 프로그램을 추가하면 됨)
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
단축기 사용방법 여기서 확인하면 된다
728x90
반응형
'Information' 카테고리의 다른 글
| [수업 네번째 시간] 웹린이의 네번째 html 수업 시간 (0) | 2023.08.30 |
|---|---|
| [수업 세번째 시간] 웹린이의 두번째 html 수업 시간 (0) | 2023.08.25 |
| [수업내용 정리] html 입문자의 첫 수업 시간 (뭔지 하나도 모르겠다는 함정 ㅎ) (0) | 2023.08.24 |
| [연예] 배우 심은우 학폭논란 억울해, 황영웅 학폭논란으로 불타는 트롯맨 하차, 생활기록부 확인해보는 법 (0) | 2023.03.31 |
| "어디서 놀아야 할지 모르겠다면 여기로" 지금 제일 핫한 서울 디제잉 바, 술집, 클럽 다 드루와 ver. 2 (feat. 압구정로데오, 이태원, 합정, 을지로) (0) | 2023.03.21 |
