웹페이지 헤더부분 만들기

안녕하세요 홍 가입니다.

벌써 2021년도가 끝이 났습니다. 다들 한 해 동안 고생 많으셨습니다. 

2022년도에는 더욱더 행복한 한 해 보내시면 좋겠습니다.

 

오늘은 웹 페이지 헤더를 만들어 보려고 해요

저는 제가 여행 간 곳으로 웹페이지 헤더를 만들려고 해요

 

웹페이지는 항상 기본 작업을 해놔야 해요

여백공간 없애고 리스트 목록 없애고 하이퍼링크 글자 밑줄 없애고 선 안 생기게 하고 검은색 글씨로 한다.

라는 것을 전체로 주고서 디자인을 시작합니다. 

 

요번은 다른 방법으로 하려고 합니다. 

h1> a를 하시면 저런 식으로 바로 나와요

 

ul부분에 li는 5개를 만들고 a태그를 넣어준다 라는 뜻이며

저렇게 하면 코딩할 때 빠르게 만들 수 있습니다.

 

마음에 드는 사진을 배경 이미지로 두고 

 

space-between 아이템들 사이에 간격을 넣어주는 거예요 

flex-start margin-left를 사용해서도 만들 수 있지만 저는 space-between을 사용하려고 합니다.

 

아이템을 사용해서 가운데로 맞추고 

메뉴가 block상태임으로 inline으로 맞춰줘야 하며 잠깐 상식

block은 margin, padding, width, height가 다 먹히지만

inline은 width, padding속성은 먹히지 않고 margin, padding은 좌우 간격만 반영되며, 상하 간격은 반영이 되지 않는다.

inline-block은 inline처럼 줄 바꿈 없이 한 줄로 나타나며 inline태그랑 다른 점은 width, padding, margin, padding 이 먹히며 레이아웃을 꾸밀 때 많이 사용이 된다.

 

hover을 넣어서 메뉴바에 커서를 두면 색을 변하게 끔 만들었습니다.

 

가운데 정렬을 할 때는 absolute를 사용하여 top, left를 지정해주고 transform을 사용하면 항상 가운데에 오게끔 만들어 줍니다. 

버튼이 너무 심심하니까 좀 만들어 볼게요

버튼을 좀 밑으로 내리고 살 좀 채우고 버튼에 커서를 두면 색이 변하게끔 만들어 봤습니다. 

간단하게 헤더 작업을 해보았습니다.