1. 혼자 한 퍼블리싱
반응형 웹페이지 만들기 전에 그냥 틀만 잡는 느낌으로 혼자 슥슥 한 퍼블리싱... 사실 회사에서 오롯이 해낼 자신이 없어서 주말동안 집에서 틀 잡아놓고 출근해서 이미지랑 위치 좀 더 조정했다ㅠ 저번에 쇼핑몰 할떄도 크기 생각 안하고 걍 한 화면에 맞춰서 px로 잡아가지고 화면 크기 바꾸거나 pc환경 바뀌면 바로 꺠지는게 눈에 보였따,,,, 일단 대충 웹페이지 기능 정리해보면 로고 누르면 회사 홈페이지 새창으로 연결, 화면 상단 오른쪽에 랜덤테스트 버튼 있어서 그거 누르면 랜덤으로 링크 연결, 대표 컨텐츠랑 추천, 신규, 인기 컨텐츠로 4개씩 구분해서 테스트 큐레이션 해둠. 그거 누르면 심리테스트들이 새 창으로 연결되게 구현함. 암튼 그래서 다음은 반응형/적응형 정리!
2. 반응형/적응형 웹페이지
1) 반응형 웹사이트
- 하나의 템플릿으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹
- 이는 해상도 별로 보여질 화면을 꼼꼼하게 정의해야돼서 초기 기획 단계에서 많은 시간이 든다
- 마크업 작업시에는 고정된 px값이 아닌 em, rem, %처럼 백분율 값으로 작업해야한다.
- 하나의 템플릿으로 만드는 작업이라 미디어쿼리(@media)를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경한다
2) 적응형 웹사이트
- 모바일용, 데스크탑 등 각각의 디바이스 별로 독립적인 템플릿을 만들고 각각의 디바이스에 맞는 페이지를 별도 제작 후 랜딩되는 웹
- pc 디자인에 맞는 링크, mobile 디자인에 맞는 링크가 따로따로 독립적으로 만들어져 있다.
(ex. pc - naver.com, mobile - m.naver.com)
- 즉 디바이스 유형에 따라 독립적인 템플릿이 요구되는 것으로 네이버, 다음 등에서 사용 중이다
3) 차이점
- 반응형 웹 : 웹사이트에서 쓰이는 모든 콘텐츠를 다운받은 후 현재 해상도에 맞는 화면이 랜딩된다.
모바일로 접속하든 pc로 접속하는 pc, 모바일의 모든 리소스를 다운 받는다 -> 로딩 속도가 느림
- 적응형 웹 : 감지된 디바이스에 맞는 콘텐츠만 다운받은 후 화면이 랜딩된다.(모바일 접속 -> 모바일 리소스만 다운)
필요한 콘텐츠만 다운 -> 로딩 속도가 빠름
- 템플릿
- 반응형 : 모든 기기에서 하나의 템플릿으로 적용된다.
- 적응형 : 모바일, 패드, PC 등 제공하고자 하는 n개의 디바이스에 적합한 n개의 독립적인 템플릿을 사용한다.
3. 웹문서 구성 요소
혼자 퍼블을 하면서 회사 홈페이지의 소스를 참고하였는데 거기서 header랑 footer 태그를 보아서 써보았다. 기능은 div class header 뭐 이렇게 쓰는거랑 보기엔 같아 보이는데 사실 차이를 잘 모르겠다. 그래서 개념 정리 한번 해보려구
- BODY 요소 : <body> 요소는 문서의 본문 영역으로, 본문 영역은 실제 콘텐츠가 표현되는 공간이며 이 공간에서 사용자와의 실질적인 상호작용이 이뤄진다. 또한 <body>는 브라우저가 렌더링할 범위를 알려준다.
(아마 위에 구성 요소가 모두 <body>에 포함되는 듯 싶다)
- HEADER 요소 : HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있다. 웹사이트의 이름, 글로벌 링크 등으로 구성된 영역이다.
(글로벌 링크 : 로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서 이용 가능한 링크)
<header>
<h1>LOGO</h1>
<h2>검색</h2>
<input type="text">
</header>
- 과거에는 <div id="header">로 사용했으며, 문서나 각 section, article의 헤더 부분에 사용 가능하고 이들의 제목이나 간단한 소개 컨텐츠를 담을 수 있다.
- 브라우저가 헤더영역을 인식할 수 있게되면 스크린리더의 네비게이션과 검색엔진의 색인에 도움을 준다.
(스크린 리더 : 컴퓨터의 화면 낭독 소프트웨어를 말한다.)
- NAV 요소 : HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있는 링크를 별도로 모아둔 영역이다.(일종의 네비게이션 같은 느낌?)
<nav>
<h1>메인 내비게이션</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
- 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크와 메뉴(카테고리) 성격의 링크인지 확인할 수 있다.
- <ul>, <li>, <a>요소들과 함께 사용해야 한다.
- 브라우저가 네비게이션 영역을 알 수 있게 되면 스크린리더의 네비게이션과 검색엔진의 색인에도 도움을 준다.
- SECTION 요소 : HTML5에 새롭게 추가된 요소로, 섹션을 표시한다.
<section>
<article>
<h1>제목</h1>
<p>본문</p>
</article>
</section>
- 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도로 사용된다. 같은 성격의 내용(관련 있는 내용)을 section 요소로 묶어 표시한다. (뉴스나 광고처럼 다른 성격을 지닌 것들을 section요소로 표시하면 영역 구분 명확!)
- 탭과 같은 상위 주제 아래에 하위 주제로 엮인 탭 방식의 구성일 때 각각의 탭을 section 요소로 표시할 수 있다.
- 섹션은 독립적인 영역이라 섹션 내에도 header와 footer를 둘 수 있다. 이는 섹션마다 나름의 제목 체계를 가질 수 있다는 것을 의미하며, 섹션마다 h1 요소를 가질 수 있게 되었다!
- 스크린 리더 사용자는 섹션 단위로 이동이 가능하며, 문서 내 네비게이션이 보다 수월해지고, 검색엔진은 특정 섹션 중심으로 색인 활동이 가능하여 검색엔진의 효율성을 높일 수 있다.
- ARTICLE 요소 : HTML5에 새롭게 추가된 요소로서, 독립적으로 구성된 글을 표시한다.
<article>
<header>
<h1>HTML5 구조</h1>
<p>Published On <time datetime="2013-01-22">2013년1월22일</time></p>
</header>
<p>본문 내용</p>
<footer>Posted in unclepapa</footer>
<article> <!-- 코멘트 시작 -->
<header>
작성자:<a href="">나그네</a> at <time datetime="2013-01-22T08:45">2013년1월22일 08:45</time>
</header>
<p>코멘트 내용</p>
</article> <!-- 코멘트 끝 -->
</article>- 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고, 독립적으로 배포되거나 재사용이 가능하다.
- 게시판의 게시물, 블로그 포스트, 위젯에 담긴 콘텐츠 등이 article에 해당한다.
- 일반적인 상황에서는 section 요소가 article 요소를 포함한다. 하지만 독립적으로 구성된 내용이 몇개의 섹션으로 구성된 경우라면, article 요소가 section 요소를 포함할 수도 있다.
- section - 관련 있는 내용 묶기, article : 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할
- article 내에도 header와 footer를 둘 수 있다.
- article 요소 안에 article이 들어갈 경우, 밖의 요소의 내용과 안쪽의 요소의 내용이 관련 있는 내용임을 의미한다.
- MAIN 요소 : <body> 요소의 주 콘텐츠를 정의할 때 사용한다.
<!-- other content -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- other content -->- 문서 내 main 요소가 나오는 것은 1번만 허용!!
- main 요소를 article, aside, footer, header, nav 요소의 하위로 사용하지 않는다
- 섹션 콘텐츠가 아니기 때문에 아웃라인을 생성하지 않는다.
- ASIDE 요소 : HTML5에 새롭게 추가된 요소로서, 페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.
<aside>
<section>
<h3>최근글</h3>
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>
</section>
</aside>- 흔히 사이드바라고 부르는 영역으로 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용으로 구성된다.
- aside 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고, 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 다른 영역으로 이동이 가능하다.
- FOOTER 요소 : HTML5에 새롭게 추가도니 요소로서, 웹 문서 맨 아래쪽에 위치한다. 저작권, 연락처 등으로 구성된 영역이다.
<footer>
<address> 연락처 : <a href="mailto:webmaster@somedomain.com">help@example.com</a>.<br>
모질라 재단, 1981 Landings Drive Building K Mountain View, CA 94043-0801 USA
</address>
<small>Copyright © 2013 Mozila</small>
</footer>- 푸터는 바닥 영역 또는 꼬리말을 지칭하며 저작권, 연락정보 등 본문과의 관련성은 있지만 본문에는 담기 어려운 내용을 포함한다.
- 일반적으로 푸터에는 한 문서 내에 한번만 제공되지만, 가끔 section 요소나 article 요소 내에 있는 footer 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
- '맨위로 가기 링크'나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.
참고 및 출처 : https://webdir.tistory.com/310
본문 : 섹션(Section) 요소 - BODY, HEADER, NAV, SECTION, ARTICLE, MAIN, ASIDE, FOOTER
웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아봅니다. BODY 요소 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서
webdir.tistory.com
덕분에 공부 잘하고 갑니당!🙇♀️🙇♀️
'2021 하계인턴' 카테고리의 다른 글
| 210709 인턴 5일차 (0) | 2021.07.15 |
|---|---|
| 210708 인턴 4일차 (0) | 2021.07.09 |
| 210707 인턴 3일차 (0) | 2021.07.09 |
| 210706 인턴 2일차 (0) | 2021.07.08 |
| 210705 인턴 1일차 (0) | 2021.07.08 |
댓글