HTML/CSS 그룹 프로젝트 1일차 - 페이지 윗부분 완성하기

 

 안녕하세요. 진득 코딩입니다.

 

 저번 시간에는 프로젝트할 준비를 하기 위해서 세팅하는 시간을 가졌습니다.

 

 이번 시간에는 본격적으로 HTML/CSS 개발하는 과정에 대해서 살펴보도록 하겠습니다.

 

head 부분

 

 

 기본적으로 html 양식에 들어가 있는 태그들은 제외하고 살펴보도록 하겠습니다.

 

 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"     rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 

 위 코드를 이용해서 bootstrap과 css연결을 하였습니다. 해당 코드가 있어야 bootstrap하고 연결되어 여러 컨텐츠들을 사용할 수 있습니다.

 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"     integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

 위 코드는 bootstrap과 js를 연결하는 코드입니다.

 

 해당 프로젝트는 HTML/CSS만 사용하는 프로젝트이지만 bootstrap에 구현된 기능들은 js가 포함된 기능들이 있기 때문에 해당 코드를 넣어놓는 것이 좋습니다.

 

<link rel="icon" href="assets/noona-kitchen-favicon.png">

 

 위 코드를 사용하여 favicon을 설정해주었습니다.

 

 하이퍼링크 건 부분에 있는 사진은 정적으로 연결하여 assets 폴더에 있는 사진을 사용합니다.

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

 

 위 코드는 예쁜 아이콘을 사용할 수 있게 해주는 코드입니다.

 

 favicon과 달리 fontawesome.com과 동적으로 연결하였습니다.

 

메인 사진

 

 

 세부사항으로 들어왔을 때 보이는 이 큰 사진에 대한 코드를 가장 먼저 구현하였습니다.

 

 위에 있는 nav바는 다른 팀원이 만든 nav바를 사용해야 하기 때문에 임시로 아무 nav바를 두었습니다.

 

 

 위에 보이는 메인 사진에 대한 HTML코드입니다.

 

 정적으로 사진과 연결해 두었고 full-width-main-image 클래스를 지정해 두었습니다.

 

 full-width-main-image 클래스에는 height를 auto로 두어 반응형 웹사이트를 대비하여 설정하였습니다.

 

 또한 사진에 기본적으로 padding이 있어서 0을 설정하여 꽉 찬 사진을 연출해 주었습니다.

 

음식 이름과 설명

 

 

 다음은 음식 이름과 설명 부분을 구현하였습니다.

 

 해당 부분은 이름 부분을 진하고 크게 표현하고 설명과의 거리를 두어 보기 편하게 해 주었습니다.

 

 또한 해당 div 자체의 margin을 두어 답답한 느낌을 없애려고 노력했습니다.

 

 또한 본문의 모든 내용은 가운데로 두고 양 옆에 여백을 주었습니다.

 

 

 위 코드는 음식 이름과 음식 설명에 대한 코드를 적어두었습니다.

 

 일단 메인 사진 밑으로 content라는 이름으로 클래스를 주어 div로 크게 한번 쌌습니다.

 

 그리고 음식 이름과 설명 부분만 포함하는 div를 korea1-detailInfo라는 이름으로 클래스를 지정해 주었습니다.

 

 또한 제목 부분은 food-title이라는 이름의 클래스로 지정해 두었습니다.

 

 위 화면에는 안 보이는 ul 태그에 대해서는 밑에서 설명해 드리겠습니다.

 

 

 일단 food-title 클래스는 제목에 지정된 클래스입니다.

 

 폰트 크기와 색상을 지정해 주었고 상단에 살짝 margin을 주었습니다.

 

 font-weight를 700을 줘서 bold된 느낌을 주었습니다.

 

 korea1-detailInfo 클래스에는 float를 left로 주어 왼쪽 정렬이 되도록 하였고 각 글자들의 세로 간격을 주기 위해 line-height를 주었습니다.

 

 width가 아닌 max-width를 준 이유는 고정해두지 않아야 반응형 웹페이지를 만들 수 있기 때문입니다.

 

 korea1-detailInfo 클래스 중에서만 p 태그에 폰트 설정을 주었습니다.

 

 특히 font-weight를 lighter로 주어 조금 더 연한 글씨의 느낌을 주어 제목을 좀 더 강조해 주었습니다.

 

첫 번째 구분선

 

 

 다음으로 구현한 부분은 구분선입니다.

 

 다른 파트들과 시각적으로 나누어서 각 파트에 집중할 수 있는 효과를 주려고 노력했습니다.

 

 

 HTML 코드는 굉장히 간단합니다.

 

 그냥 div 하나에 class만 지정해 주었습니다.

 

 그런데 클래스 이름을 divider로 짓지 않고 first-divider로 지은 이유는 해당 구분선은 모바일 버전에서는 사라져야 하기 때문입니다.

 

그래서 다른 구분선들과 구분하기 위해 해당 구분선만 특별한 이름의 클래스를 지정해 주었습니다.

 

 

 first-divider 클래스에서 width는 100%로 지정해 주고 max-width는  768px로 지정해 주어 768px보다 클 때는 구분선이 옆에 여백에 침범하지 못하도록 설정해 주었습니다.

 

 또한 height는 2px로 하여 구분선의 두께를 지정해 주었고 background-color를 지정하여 꽉 찬 선으로 표현해 주었습니다.

 

레시피 재료

 

 

 다음은 레시피 재료 파트를 구현하였습니다.

 

 레시피 재료라는 제목이 있고 - 필수 재료라는 부제목을 두었습니다.

 

 부제목은 팀에서 지정한 컬러로 지정해 주었고 설명은 약간 흐리게 표현해 주었습니다.

 

 

 전체적으로 div로 한번 싸주고 ingredientArea라는 클래스를 지정해 주었습니다.

 

 제목은 h2로 설정하고 ingredient-title로 클래스 이름을 지정해 주었습니다.

 

 필수 재료와 재료 목록들은 설명 목록을 만드는 <dl>, <dt>, <dd> 태그를 사용하여 구현하였습니다.

 

 

 위에서 이미 설명한 부분에 대해서는 넘어가고 새로운 것들에 대해서만 살펴보도록 하겠습니다.

 

 ingredientArea dd에 padding-left를 설정한 이유는 설명란의 들여 쓰기가 약간 안 맞아서 padding으로 세부 조정하였습니다.

 

관련 제품

 

 

 다음으로 나오는 부분은 구분선인데 첫 번째 구분선과 일반 구분선은 모바일 버전에서 말고는 차이가 없기 때문에 일단 넘어가도록 하겠습니다.

 

 관련 제품 부분은 '관련 제품'이라는 제목을 표시해 주고 해당 제품 사진이 들어갑니다.

 

 그리고 밑에 중앙 정렬로 상품의 이름을 넣어줍니다.

 

 

 해당 파트는 goods-Area라는 클래스를 지정한 div로 묶어주었습니다.

 

 관련 제품은 hover 이벤트를 위해 image-container이라는 이름을 가진 div로 한번 더 묶어주었습니다.

 

 image는 동적으로 다른 사이트에서 사진을 가져왔고 '비빔밥 그릇'이라는 제품명은 <p> 태그를 사용하였습니다.

 

 그 아래 <a> 태그부터는 hover를 살펴볼 때 살펴보도록 하겠습니다.

 

 

 관련 제품 CSS는 레시피 설명 CSS와 거의 흡사합니다.

 

 다만 goods-content만 text-align을 center로 주어 글자를 가운데 정렬해 주었습니다.

 

 

 관련 제품에 hover(마우스를 올려놓으면) 위와 같이 살짝 사진이 어두워지면서 상단에는 문구가, 중앙에는 아이콘이 나오게 됩니다.

 

 

 이때 등장하는 코드가 <a> 태그에 있는 코드들입니다.

 

 <a> 태그로 클릭했을 때 비빔밥 그릇을 판매하는 사이트로 연결되고 새창으로 뜨게 하기 위해 target="_blank"를 사용해 주었습니다.

 

 흐려지는 범위를 설정하기 위해 overlay 클래스인 div로 한번 묶어주었습니다.

 

 icon은 fontAwesome과 연결해 두었기 때문에 위와 같이 써서 적용해 주었습니다.

 

 

 fontawesome에서 아이콘을 가져와서 사용하는 방법은 간단합니다.

 

 일단 head에 위 사이트와 연결하는 코드를 작성한 후에 fontawesome 사이트로 옵니다.

 

 

 그중 마음에 드는 아이콘이 있다면 무료인지 확인하고 누르면 위와 같이 HTML코드를 가져올 수 있습니다.

 

 해당 코드를 입력하면 자동으로 아이콘을 사용할 수 있게 됩니다.

 

 

 image-container 클래스의 overflow를 hidden으로 설정하고 overlay 클래스의 opacity를 0으로 지정하여 평소에는 안 보이게 설정해 주었습니다.

 

 또한 full-width-image 클래스에서 transition을 1.0s ease로 설정하여 전환 효과를 부드럽게 해 주었습니다.

 

 hover시 너무 검지 않고 살짝만 효과를 주기 위해서 rgba의 alpha 부분을 0.1만 주어서 기본적인 배경색을 연하게 해 주었습니다.

 

 또한 image-container:hover .full-width-image에서 filter를 brightness(1)로 주어 굉장히 연한 효과를 주려고 시도했습니다.

 

 

 첫 번째 클래스는 사진에 마우스를 올려두면 overlay를 표시하는 클래스입니다.

 

 두 번째, 세 번째 클래스는 각각 문구를 위에 나오게 하고 icon을 중앙에 나오게 하는 코드입니다.

 

관련 레시피

 

 

 다음은 1일 차 때 마지막으로 구현한 관련 레시피 파트입니다.

 

 해당 음식에 대한 관련 레시피가 나오게 되고 밑에 여러 태그들이 들어가게 됩니다.

 

 그 밑에는 관련 레시피인 음식의 이름이 출력되게 구현하였습니다.

 

 

 해당 기능은 <a>태그를 눌렀을 때 관련 레시피 세부 사항으로 넘어가게 됩니다.

 

 아직 다른 레시피를 구현하지 못했기 때문에 일단 #으로 두었습니다.

 

 

 해당 사진은 hover 했을 때 이미지의 크기는 달라지지 않고 사진이 약간 확대되는 효과를 주었습니다.

 

 때문에 overflow를 hidden으로 주어 사진이 커져도 사진 자체의 크기는 달라지지 않게 해 주었습니다.

 

다른 부분들은 위에서 이미 설명했기 때문에 넘어가도록 하겠습니다.

 

 

 위 사진에서 hover한 이미지입니다.

 

 거의 다른 게 없어 보이지만 자세히 보시면 약간 확대된 것을 확인하실 수 있습니다.

 

 

 img 자체에는 transition에 transform을 0.3s ease를 주어 부드러운 전환 효과를 주었습니다.

 

 또한 hover 부분에 transform에 scale(1.1)을 주어 이미지를 약간 확대하는 효과를 주었습니다.

 

미디어 쿼리로 반응형 웹사이트 만들기

 

 

 미디어 쿼리를 이용하여 위와 같이 표현하였습니다.

 

 위 이미지를 보시면 PC버전에서는 없던 nav바가 생기게 되었습니다.

 

 또한 nav바 자리에 있던 구분선이 사라져서 지저분한 부분이 없게 되었습니다.

 

 

 다른 부분들도 사이트의 크기에 맞게 사진과 글자들이 적절히 배치되는 것을 확인할 수 있습니다.

 

 

 미디어 쿼리를 사용하여 768px이하의 스크린의 경우를 따로 설정해 주었습니다.

 

 먼저 모든 요소들의 넓이를 100%로 설정해 두었기 때문에 양옆이 답답해서 margin을 주었습니다.

 

 또한 첫 번째 구분선만 display: none으로 설정하여 모바일 버전에서는 nav바와 겹치지 않게 해 주었습니다.

 

 detailInfoNav에 대한 여러 설정들을 해주었고 호버 시 팀 색상으로 바뀌게 해 두었습니다.

 

 해당 nav바는 누르면 해당 부분의 글로 넘어갈 수 있는 기능을 구현할 예정입니다.

 

---

 

 HTML/CSS는 기초 코딩이기 때문에 만만하게 봤다가 삽질을 해서 시간을 생각보다 너무 할애했습니다.

 

 1일 차 때 생각보다 많이 구현하지 못했지만 내일인 2일 차에는 더욱 부지런히 구현해야겠다는 생각을 했습니다.

 

 또한 구현을 하다가 막히거나 잘 안 풀리면 계속 코드를 들여다보기보다는 분위기를 환기시킨 후에 다시 구현하는 것이 좋다는 것을 느끼게 되었습니다.

 

 다른 팀원들이 구현한 부분들을 회의 시간에 봤는데 다들 정말 열심히 잘 구현한 모습을 보고 좀 더 동기부여가 됐습니다.

 

 이번 포스팅은 여기까지입니다.

 

 끝까지 봐주셔서 감사합니다.😊