html: audio, 지도 api, 공간 분할 태그, 시멘틱 태그, markup 실습, 홈페이지 레이아웃 짜기

11월 24일 4일차 원격수업

 

audio

<audio src="#" controls></audio>

 

지도 api 이용하여 삽입하기 

1. 지도 api 검색 후 웹 소스 추출

2. app key 발급 후 입력

3. 지도 위치에서 주소창의 위도,경도 추출

4. 마커 이미지 등록 및 위치 선정

 

공간 분할 태그

div 블럭 요소를 묶을 때

span 인라인 요소를 묶을 때(내용을 텍스트로 묶을 때)

 

태그 구분

id 큰 요소, 반복 불가

class 작은 요소, 반복 사용, 한꺼번에 디자인 가능

 

 

시멘틱semantic 태그(html5)

header

footer

nav >ul>li 메인메뉴

aside 퀵메뉴, 서브메뉴

article 독립된 본문의 한단위, 제목필수(h2~6)

section 글이 많이 들어가는 부분, 제목필수(h2~6)

* article과 section은 부모자식, 형제 모두 가능

실제로 section을 더 많이 사용

 

markup 실습

홈페이지 레이아웃 

1 div#header
	1-1 div.headTop (로고, SNS, 문의)
		1-1-1 div.center <!-- for 반응형, 화면 가운데인지 fully 차는지-->
	1-2 div.headBottom (멤버, 메인메뉴)
		1-2-1 div.center

2 div#container
	2-1 #mainBanner(visualBanner) ul>li
	2-2 contents
		2-2-1 div.newsEventsWrap (뉴스, 이벤트)
			2-2-1-1 div.news
			2-2-1-2 div.events
		2-2-2 div.slogan (슬로건)
		2-2-3 div.menu (메뉴)
		2-2-4 div.store (배달배너)
		2-2-5 div.snsWrap (SNS)

3 div#footer
	3-1 div.center
		3-1-1 div.footLeft
		3-1-2 div.footRight
        		3-1-2-1 div.fMenu
         		3-1-2-2 div.fsubMenu
         		3-1-2-3 div.fSns
          		3-1-2-4 div.ffoot

* # =id / . =class

 

* 주의할 점

로고= h1 (이미지는 alt 필수. 한영 무관)

Gnb global navigation bar

h2.blind 메인메뉴 + ul.nav

넘어가는 메인배너 : 배너 먼저 목록 작업 후 넘어가는 버튼 작업

메인 배너(전체형) : 요소가 큰(1200픽셀 넘어가는) 경우 마크업에 작성하지 않고 css로 작업 (최대 1600) 스크롤 생기지 않도록

[] 꺽쇠 속성으로 들어가는 내용

{} 중괄호 보여지는 내용

class는 여러개를 가질 수 있음

블럭: css에서 너비, 높이 명령어 줄 수 있음, 인라인은 불가

아이콘 등의 경우 한 파일로 작업하여 css로 설정 (각 아이콘 작업하는 것보다 편리)

파이어폭스의 웹디벨로퍼 부가기능을 설치하면 마크업/레이아웃 화면 확인 가능