우선 저번과 마찬가지로 HTML과 CSS를 연습하기 위해 카피해 볼 웹페이지를 찾는다.
오늘 따라해볼 문서는 테마웨건에 있는 Feane – Free Bootstrap 4 HTML5 Restaurant Template 으로 이 페이지의 네비게이션 레이아웃만 카피해볼 생각이다.
첫째로 상단의 네비게이션 영역을 파악하기 위해 페이지를 캡쳐하여 pdf화 시킨다. 이런 과정을 박싱이라고 한다더라... 대략 눈으로만 보고 가늠을 하자면 이런식으로 영역을 나눌 수 있는데 사실 아래 햄버거 사진이 있는 부분은 네비게이션 영역은 아니므로 구현하지 않아도 되지만 사실 심심해서 구현하긴 해버렸다...
박싱 과정이 끝났다면 draw.io 등의 웹사이트를 통해 웹구조를 시각화하는 과정을 거쳐야 한다. 이번에는 네비게이션 영역만 구현하기에 한 페이지 안에 DOM트리가 표현되는 모습이다!! DOM트리 구성은 네비게이션 부분을 navtop으로 구분하고 아래 section을 별도로 navbottom이라고 네비게이션 영역으로 모두 묶어보았다. (즉 일만 더 늘려왔다는 얘기)
navtop에는 웹페이지의 로고, 메뉴바 그리고 카트, 버튼 등으로 구성되어있는데 로고의 경우 사실 <span>으로 만들었어야 했는데 처음 만들때는 해당 로고를 직접 만들기는 어려울거라 생각해 그냥 그대로 캡쳐해 이미지 파일로 구현을 했다. 네비게이션의 menu의 경우 리스트 태그로 만들어 구현했고 <div navcart> 구역을 별도로 만들어 해당 구역에 아이콘들을 나열해봤다. 마지막으로, 햄버거가 대문짝만하게 표시되는 navbottom 구역은 viewarea와 indicator 영역을 나누어 각각 요소들을 집어넣어 구현해보기로 했다.
HTML 코드 작성하기
<div id="navtop">
<div class="navigator">
<a href="#"><img src="feane logo.png" alt="Feane"> </a>
<span id="navmenu">
<ul>
<li id="list1"><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BOOK TABLE</a></li>
</ul>
</span>
<div id="navcart">
<a href="#"><i class="fa-solid fa-user"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="https://google.com" target="_blank"><button>Order Online</button></a>
</div>
</div>
</div>
우선 하고자하는 활동의 주목인 nav 영역 구현하기를 위해 <div navtop>부분을 작성한 코드 내용이다. 일일이 작성하다보니 깨닳은 점이 하나 있다면 나는 영역 나누기를 정말이지 못한다는 것이다. 선택자는 죄다 class로 지정하고 (id 선택자도 활용해 보고 싶었으나 오히려 더 혼란만 가중한 것 같다...) 인라인 요소 블록요소 구분 없이 기능만 하면 되겠지 하는 마음으로 적어 낸 태그들... 앞으로는 잘 구분해가며 코드를 쓰는 습관을 들여야 할 것이다...
<div id="navbottom">
<div class="viewarea">
<div class="layout">
<h1>Fast Food Restaurant</h1>
<br>
<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad
mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,
sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.
</p>
<br>
<a href="https://google.com" target="_blank"><button>Order Now</button></a>
</div>
<div class="indicator">
<a href="#">
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</a>
</div>
</div>
</div>
그리고 나머지 HTML 코드 부분이다. 여기서도 마찬가지로 <a> 태그가 인라인 요소라는 것을 모른채 스타일 적용이 다 끝난 후 a태그로 i태그를 묶는 바람에 레이아웃이 아주 그냥 박살이 났었다. 이렇게 깨져가며 만들어 본 덕분에 a태그가 인라인 요소라는 것 하나 만큼은 확실하게 알고 가는 것 같다...
CSS 코드 작성하기
body{
background-image: url("hero-bg.jpg");
background-size: cover;
}
우선 첫번째로 body 부분에 바로 배경 이미지를 (그 햄버거 사진이다) 넣고 background-size를 cover로 설정해 배경 이미지의 사이즈의 너비를 화면에 맞추었다.
#navtop, #navbottom{
display: flex;
justify-content: center;
padding: 15px;
color: white;
}
사실 원래는 이전에는 navtop, navbottom을 둘 다 따로 적어놨었는데 전지전능한 ChatGPT에게 중복된 코드가 있느냐 물어본 결과 이렇게 합쳐놓았길래 나도 한 번 따라해 보았다. 윗 영역과 아랫 영역을 모두 포함하고 있는 div인 navtop 과 navbottom을 중앙 정렬했고 padding 을 줘 조금의 공간을 마련했으며 문서 내 텍스트들의 컬러를 흰색으로 맞추었다.
.navigator{
display: flex;
width: 60%;
justify-content: space-between;
align-items: center;
margin-bottom: 200px;
}
네비게이션의 요소들을 묶고있는 박스인 navigator에 flex 선언을 하고 가로를 60%로 설정해 원본과 유사하게 위치를 맞추었으며 양쪽 끝으로 로고와 버튼을 몰고 메뉴 버튼들은 가운데로 정렬이 되도록 justify-content를 space-between으로 설정했다. margin은 왜 200px이나 설정이 되었는지는 사실 그냥 하다보니 마음대로 간격이 설정안되어서 임시방편으로 이렇게 해놓은 것이다...
a img{
width : 67px;
margin: 5px;
}
최상단 좌측에 위치한 웹페이지의 로고에 적용한 코드로 적당히 원본과 유사하게 설정해두었다.
#navmenu ul{
display: flex;
align-items: center;
justify-content: space-around;
margin-left: 150px;
}
li a{
padding: 19px;
color: white;
}
li a:hover{
color: orange;
}
#list1 a{
color: orange;
}
네비게이션 바에 클릭가능한 메뉴들을 flex를 이용해 정렬했고 리스트 내 a 태그 속성에 컬러를 흰색으로 맞추어 링크화 된 li 태그가 색이 변하는 것을 방지했다. 또한 :hover 선택자를 이용해 호버링시 색이 주황색으로 나타나도록 했고, <ul> 내 첫 <li>를 별도로 class 선택자로 지정해 항상 주황색으로 빛나도록 설정해주었다.
#navcart{
display: flex;
align-items: center;
gap: 15px;
}
#navcart button{
background-color: #F3A71B;
font-size: 12pt;
color: white;
padding: 10px 20px;
border-radius: 30px;
border: none;
cursor: pointer;
}
페이지 상단 우측에 위치한 아이콘들과 버튼에 대한 CSS 코드다. 해당 요소들을 묶는 박스인 navcart를 정렬 해주고 여기서 요소들의 레이아웃 맞추는 법을 도무지 모르겠어서 <gap> 태그를 이용해 임의로 아이콘들과 버튼 사이의 간격을 벌려주었다.
아래의 코드는 버튼의 스타일에 대한 코드로 배경 색 설정, 폰트 사이즈, 텍스트 색 설정, 테두리 곡률 등을 설정했으며 <cursor> 태그를 이용해 위에 가져다 대었을 때 마우스 커서 모양이 변하도록 설정해주었다. (hover를 이용하려 했으나 뜻 대로 되지않아 대신 사용했다)
.viewarea{
display: flex;
width: 60%;
flex-direction: column;
}
navbottom 부분의 요소들을 하나로 묶은 박스요소로 크기를 마찬가지로 60%로 설정했고 flex-direction을 통해 indicator 요소들을 아래로 정렬시켰다.
.layout{
display: flex;
flex-direction: column;
width: 50%;
padding: 5px;
}
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
.layout h1{
font-size: 40pt;
font-family: 'Dancing Script', sans-serif;
}
.layout p{
line-height: 24px;
word-spacing: -2.9px;
}
.layout button{
background-color: #F3A71B;
width: 30%;
height: 20px;
font-size: 12pt;
color: white;
padding: 20px;
border-radius: 30px;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
버거 근처의 텍스트에 해당하는 부분으로 h1,p 그리고 button 을 묶고 있는 박스요소다. 우선 정렬을 하기위해 layout에 flex 선언을 하고 방향을 column으로 설정해 내부 요소들이 차례차례로 표시되도록 설정했다. 그후 width를 설정해 원본과 비슷하게끔 텍스트가 표시되도록 설정했다.
다음으로 가장 큰 텍스트를 표현하기 위해 폰트의 사이즈를 40pt로 설정했고 원본과 같은 폰트로 설정하기 위해 Google Font에서 가져온 코드를 집어넣어 import 해놨다.
layout p 부분에서 word-spacing을 넣은 이유는, 원본에서는 해당 텍스트가 3줄로 표현되는 반면 내가 만든 텍스트는 자꾸 4줄로 표현되서 억지로 단어 간 거리를 줄여 3줄로 만들어 놓았다.
마지막으로
.indicator{
padding-top: 200px;
}
.indicator :hover{
color: #F3A71B;
transform: scale(1.3);
transition: 0.2s;
}
i{
color: white;
}
'웹프로그래밍' 카테고리의 다른 글
| CSS/HTML - 클론코딩 (0) | 2024.08.09 |
|---|