웹페이지 기초구조 제작

위 그림처럼 홈페이지 기본 구조를 만들거다. 처음에는 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

메뉴바 수평만들기

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