- 웹 표준
브라우저 상관없이 웹페이지 정상적으로 기능, 보여져야 함 => 웹 표준 기술이나 규칙 준수하여 제작
- 웹 접근성
신체, 환경적 조건에 관계없이 웹 접근하여 이용하도록 보장 (시각장애인)
<!DOCTYPE html>
<html lang="ko">
<head>
// charset(빨간 표시) : 속성, "" (파란표시) : 속성값
<meta charset="UTF-8"> //한글 인코딩
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //인터넷익스플로러 관련 설정 (X 중요)
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //☆화면 크기 맞춤 설정
<link rel="shortcut icon" href="images/15.ico"> //파비콘 생성 //rel: relationship
<title>홈페이지입니다</title> //홈페이지 이름
<style>
p{
color:red;
}
</style>
</head>
<body>
<h1>오늘의 명언</h1>
<h2>시간이란..</h2>
<img src="images/watch.jpg" alt="watch"/>
<p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라</p>
<ul>
<li>피자</li>
<li>햄버거</li>
<li>타코</li>
</ul>
</body>
</html>
- Block 레벨 요소 / Inline 레벨 요소
Block : 가로 한줄 차지 (내용 길이 상관 X), div 그룹핑, 안에 Inline 포함 가능
Inline : 내용만큼 영역 차지 (줄바꿈 X), span 그룹핑, 안에 Block 포함 불가
convertico.com => 이미지파일 ico로 변환 (최근엔 jpg도 파비콘 가능)
href="../" => 상위폴더로 돌아감
<> 안 문자 => 소문자 권장
시작 태그 - 끝 태그 필수 ex. <h1> ~ </h1>
cf. <meta> , <link> 등은 끝 태그 X
주석 => ctrl+ / ex. <!-- -->
<h1~6> => heading (제목태그)
<p></p> => 단락
<p>제목태그는 <h1>부터</p> => 웹표준 오류, 태그로 인식함 -> 특수문자 처리
- 웹문서 특수문자 및 특수기호
<p>제목태그는 <h1>부터</p> => 웹표준 오류
->
<p>제목태그는 <h1>부터</p> => lt(less than)
=>
제목태그는 <h1>부터
&
=> &
공백 하나만 인식
->
=>
" "
©
=>
©
- 시멘틱 마크업
<p>내일 죽을 것처럼 <strong>오늘</strong>을 살고 영원히 살 것처럼 내일을 꿈꾸어라</p>
=> 시각장애인 위해 중요 문구임을 음성 안내
cf. <p>내일 죽을 것처럼 <b>오늘</b>을 살고 영원히 살 것처럼 내일을 꿈꾸어라</p>
=> <b>는 시멘틱 마크업 X => 의미보단 스타일O
- 논리적 순서 마크업
tab으로 읽을 때 태그들이 순차, 논리적으로 읽히도록 작성
'Programming > 국비학원' 카테고리의 다른 글
| 220608 - html (form) (0) | 2022.06.09 |
|---|---|
| 220607 - html (0) | 2022.06.08 |
| 220531 - 안드로이드 구현 실습 (AlertDialog) (0) | 2022.06.01 |
| 220530 - 안드로이드 구현 실습 (Scroll, Spinner, 구글맵 불러오기) (0) | 2022.05.31 |
| 220526 - 안드로이드 구현 실습 (투표, 다이어리) (0) | 2022.05.30 |
