div, article, section의 차이점과 사용할 때

article: 서로 관계있는 문서들을 독립적으로 구분 할 수 있는 것들의 영역을 설정 display: block ex) 신문기사, 블로그 글 등등 주식 XXX회사 주가... 주식부자 그 비결은 ... .. . section: 서로 관련되 있는 것들의 영역을 설정. 제목을 포함해서 의미를 가지고 있음. display: block ex) 위키에서의 목차 뱀 종류 사육방법 ... .. . div: 서로 의미적으로 관계가 없다면 사용. 그저 한 영역에 묶는 역할. display: block ex) 베스트 검색어 베스트검색어 고양이 오늘의 맛집 ... .. .

• format_list_bulleted Web/HTML
• · 2020. 8. 4.
• textsms

Header 메뉴바 구조

위 메뉴바를 살펴보자. 메뉴바를 보면 로고, 검색창, 로그인 등 여러가지 영역으로 나뉘어져 있다. 메뉴바를 제작할때 div로 영역을 나눠서 제작을 하는데 이때 영역을 나눠보면 이런 식으로 나눌수 있다. (동일한 색은 서로 대등한 관계) 처음에는 메뉴가 들어갈 헤더.(빨간색) 두번째로는 메뉴바가 가운데에 있으므로 메뉴를 가운데에다가 정렬할 수 있게 container를 만들고,(갈색) 세번째로는 메뉴가 왼쪽과 오른쪽으로 나누어져 있는 것을 볼 수 있다. (초록색) 네번째로는 로고와 메뉴로 나뉜다.(하늘색) 마지막으로 각각의 메뉴 요소로 나뉜다.(보라색) 왼쪽 메뉴만 코드로 구현하면 WhyGitHub? Team Enterprise Explore Marketplace Pricina 위와 같이 구현 할 수 있다...

• format_list_bulleted Web/HTML
• · 2020. 7. 31.
• textsms