웹페이지 기초구조 제작

위 그림처럼 홈페이지 기본 구조를 만들거다. 처음에는 header를 만들어보자. 헤더에는 메뉴를 추가 할 건데 div를 써도 되지만 메뉴같이 웹사이트의 주요한 페이지로 이동할 수 있는 건 nav(navigation)으로 만든다고 한다. 메뉴1 메뉴2 메뉴3 CSS없이 위 코드를 그냥 출력했을 경우 메뉴1 메뉴2 메뉴3 이렇게 되어 있을 거다. 수평으로 만들기 위해 header의 nav안에 있는 ul의 선택자에 flex를 추가해 주자. 수평으로 만드는 방법에는 float, inline-block등 여러가지 방법이 있지만 가장 쉬운 방법이 display: flex를 추가하는 방법이다. header nav ul{ display: flex; } 그리고 보다 깔끔하게 보이게 하기 위해 margin과 padding..

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

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

메뉴바 수평만들기

2020/07/31 - [Web/HTML] - Header 메뉴바 구조 Header 메뉴바 구조 위 메뉴바를 살펴보자. 메뉴바를 보면 로고, 검색창, 로그인 등 여러가지 영역으로 나뉘어져 있다. 메뉴바를 제작할때 div로 영역을 나눠서 제작을 하는데 이때 영역을 나눠보면 이런 식으로 나�� sandclock-itblog.tistory.com 저번 시간에 만들어 놨던 메뉴를 이제는 수평으로 만들어 보자. CSS에서 float을 사용하는데 float을 쉽게 말하면 정렬해 주는 것이다. 세로로 되어있는 메뉴를 왼쪽으로 정렬을 시켜주어야 하기에 요렇게 정렬시켜 주면 요렇게 나오게 된다.(배경색은 컨테이너의 영역을 눈으로 표시하기 위함) 이렇게 된 이유는 float에 기본적인 설정이 되어 있기 때문인데 이를 해제..

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

header 공백 제거

body header를 만들때 특별한 선언을 안해줄 경우 위와 같이 페이지 좌측과 상단에 공백기 생긴다. 해결방법은 CSS 에서 body태그에 margin과 padding을 0으로 설정해 주면 된다. 결과

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

Header 메뉴바 구조

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

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