기초 다시하기 html-header부터

HTML

coco030030 2025. 3. 23. 23:39

메뉴 짤 때

nav 태그 안에서 이런 식으로 메뉴를 짜면

ul>li*5>a[herf="#"]

<ul>

</ul>

이렇게 나온다.

탭을 누르면 아웃라인이 표시돼서 링크된 부분 테두리박스를 확인할 수 있다.

위아래로 마진을 0으로 주고 양쪽으로 5픽셀 정도 줄 때

m0=5px

메뉴 정렬할 때 flex 값 주느라 애먹었는데 메뉴 li에서(메뉴 자체를 가리키는 ul 아님) 디스플레이를 inline으로 처리하면 가로로 정렬이 된다.

.header_menu li {

display: inline;

}

스크롤바 안생기게 CSS 적용하기 box-sizing: border-box;

과제할 때 진짜 곤란한 일 : 사진 옆에 여백이 왜 생겼는지 이해 못했는데 padding 값을 주니까 여백이 배로 늘어난거.

그래서 박스 사이징으로 100% 안에 포함이 되도록 해준다.

box-sizing: border-box;

width 값과 height 일일이 쳤는데 단축키가 있음

w1200

엔터 기본 px단위로 보인다.

h100

그 결과

#header {

background: #f44f4f;

width: 1200px;

height: 100px;

}