직접 실습! (구조적 설계)
구조적으로 문서 설계하기
ex) 전공책이 800p인데 이걸 다 읽어야 한다면 우선 목차를 살핀다.
1. 몇 개의 챕터로 구성되어있는지
2. 각 단원의 제목
3. 소단원의 제목과 내용
- 이렇게 흐름을 파악한다. 그래서 어떨 때 이런 태그를 사용하는지 알아볼 것이다.
Sectioning Elements (단원을 표현하는 태그들)
- section, article, nav, aside
- 단원이다. 따라서 단원에는 단원의 제목이 들어가야 하기 때문에 heading 태그가 들어가야 한다.
<!--section태그-->
<section>
<h1></h1>
<p></p>
</section>
<!--nav 태그-->
<nav>
<h1></h1>
<ul>
<li></li>
<li></li>
</ul>
</nav>트위터 마크업 챌린지
1. header 작성하기
- 맨 왼쪽에 있다고해서 aside가 아니다. 트위터 로고를 가지고 있고 밑에 menu도 가지고 있어서 header 영역이다.
- 로고를 클릭하면 메인 페이지로 오기 때문에 a 태그로 묶어준다.
실습 파일: Twitter/01-heading.html
2. nav 작성하기
- 로고 밑에는 menu가 있으므로 이것은 nav 태그로 묶어준다. (문서 간의 이동이 있을 때 사용한다.)
- 각 menu는 li로 만드는데 nav에는 무조건 heading 태그가 들어가야 하므로 화면에 보이지 않게 나중에 CSS 처리하고,
<h1>Global Navigation Menu</h1> 라고 씁니다. (ul 밖에서)
- 완성본을 보면 Home이 활성화되어있기에 <span>Current page</span>으로 나중에 CSS로 눈에 보이지 않게 한다.
- more에는 dropdown menu가 나오기에 a태그가 아닌, button으로 바꿔준다 나중에 직접 해보라고 하셨다.
실습 파일: Twitter/02-global-navigation.html
3. main 만들기
- 한 개만 사용할 수 있다. 또 Sectioning Elements가 아니라서 안에 heading 태그는 필요없다.
- main은 section, aside, nav, header 을 감싸는 태그라서 이 안에 들어올 수 없다.
- 지금 main 안에는 header, section이 있다.
- header에는 텍스트, 버튼, 이미지가 있다. 이때 버튼에는 (텍스트, 설정을 변경하는 버튼, 문서 이동하는 a 태그가 있다)
실습 파일: Twitter/03-main.html
4. section 태그(1)
- tweet을 쓰는 역할을 하는 폼을 가졌다. (그 이상, 그 이하의 역할도 하지 않는다)
- tweet은 최대 280자만 쓸 수 있다.
- 파일을 올릴 수 있는 input에 multiple을 쓰면 여러 가지 파일을 업로드 할 수 있다.
- 파일 확장자는 accept="image/*" (image의 모든 확장자 가능)
- input은 스타일이 전혀 먹히지 않는 태그라서 따로 button을 만들어서 사용한다.
- strong으로 표시한 것은 tweet은 최대 280자를 보여주는 아이템이기 때문에 중요하다고 생각이 되어 이렇게 썼다.
실습 파일: Twitter/04-tweet-form.html
5. section 태그와 article 태그
- tweet이 올라오는 부분이다.
- tweet 리스트이고, 순서가 중요하다고 생각되어 ol 태그를 사용한다.
- section은 특정한 의미를 지니거나 article을 묶는 태그이고,
- article은 뉴스 기사 또는 블로그처럼 정보로서 의미가 완결할 때 사용한다. article에도 heading tag가 필수적이다.
- user의 아이디와 언제 tweet을 썼는지는 dl을 사용해서 한다.
- 내용은 p로 감싸준다.
- 밑의 icon은 div로 묶어줘도 되지만 의미있게 footer로 묶는 것도 좋다.
- 이때 footer에는 아이콘 뿐이니, 이것을 설명해주는 span으로 이 아이콘이 무엇인지 알려준다(screen read기로 읽어주기 위해서)
실습 파일: Twitter/05-timeline.html
실습 파일: Twitter/06-tweet.html
6. aside 태그
- 본문(main)과 동떨어져있는 것을 aside로 묶는다. (Worldwide trends가 aside이다.)
- 베너나 양 사이트에 있는 것을 section보다 aside로 묶습니다.
- 환경설정 아이콘을 누르니 모달창이 뜬다 -> button을 사용한다.
- 밑에 실시간으로 나온 것들을 클릭하면 다른 문서로 이동한다. -> a를 사용한다.
실습 파일: Twitter/07-worldwide.html
7. footer 태그
- 하단 부분에 작성자, 주소 등을 쓸 때 묶는 용도이다.
- term부터 Ads into는 누르면 다른 문서로 이동한다. -> a를 사용한다. (이때 새 창으로 이동하므로 target="_blank")
- more을 누르면 dropdown 메뉴가 보인다. -> button을 사용한다.
- 그때 그 메뉴를 누르면 다른 문서로(다른 창으로) 이동한다. -> a를 사용한다. (이때 새 창으로 이동하므로 target="_blank")
실습 파일: Twitter/08-footer.html
전체 파일: Twitter/index.html