📐 마크업 2
- 코리아스타트업포럼 웹 페이지 부분 섹션별 마크업 완성해보기
[과제 시안]
🎈미션 : 코리아스타트업포럼 웹 페이지를 부분별로 구역을 나누고, 위 과제 시안의 이미지를 보고 마크업 언어로 작성하여 그대로 구현하는 것
📝과제 : https://bighuni.github.io/front-end-school/Assignment/211102_markup/
CSS 어려워..😥
[회고]
-
<img>태그를 닫을 때, HTML에서는/>로 닫을 필요가 없지만, XHTML에서는<img>를 포함한 모든 태그가 닫혀 있어야 한다. -
모든 사진에
<img>태그에서alt에 스크린 리더가 읽을 수 있도록 캡션을 달고,width와height값을 조정하여 가시화를 높임
<nav>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Ministries</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
-
<nav>태그는 같은 페이지 혹은 다른 페이지의 영역으로 연결해주는 네비게이션 태그인데, 위 코드 구성이<nav>태그로 메뉴를 만드는 기본 탬플릿 구성이다. -
반면에, 내가 코드를 구성한 코드는
<li>태그를 사용하지 않았다. 리스트를 작성할 때 리스트 형식을 이용하지 않는다면, 순서를 변경하거나 새로운 항목을 삽입할 때 모든 것을 변경할 필요가 있고, CSS의 번거로운 작업이 추가된다.
- 하지만, 위 UI는 원래 사이트로
<li>태그를 사용하지 않은 것이고, 아래 UI는<ul>과<li>태그를 사용한 것이다.
- 따라서 목록화된 메뉴를 구성할 때에는
<li>를 사용하지만 가로 축으로 나열된 메뉴 구성시<li>태그를 사용하지 않아야 된다는 것을 알았다.
-
매
<section>으로 구역을 나누고, 그 안에<h>태그로 제목,<p>태그로 내용,<strong>태그로 폰트를 굵게 강조,<b>태그로 부분 강조 -
기사는
<section>이 아니라<article>로 구역을 나눔 -
기사 사진은
<img>앞에<figure>로 묶고,<figcaption>으로 설명 기재 -
<footer>에 주소는<address>, 내용은<p>,<ul>와<li>,<a>로 메뉴 목록을 리스트화 한 뒤 링크 연결 구성 -
처음 제주코딩베이스캠프 웹 페이지 마크업 할 때보다, 시간적으로나 효율적으로 코드 구성을 하는 방법에 대해 약간 익숙해진 것 같다. 태그 하나하나 왜 사용했고, 무엇을 표현하려고 했는지 심도있게 파고 들기로 했고, 태그를 설정하고, 해제하기를 반복하며 불필요한 코드구성을 최대한 배제해서 컴팩트한 코드를 구성하는게 내 목표이다. 다음 과제도 위 내용을 상기하며 수행해야겠다...!
