Project.log

패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_HTML/CSS과제 본문

ETC/패스트캠퍼스X야놀자

패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_HTML/CSS과제

jinuk_ 2023. 8. 7. 11:06
728x90
반응형

[클론코딩할 사이트를 정해서 클론코딩해보기]

첫번째 개인프로젝트로 HTML5 / CSS3만을 이용하여 클론코딩을 해보는 과제가 나왔습니다.

예전에 이디야사이트를 만들다가 어려워서 포기한적이 있었는데 이번기회에 제대로 메인페이지를 구축하고싶어서

이디야사이트를 클론코딩하기로 하였습니다.

https://www.ediya.com/

 

이디야커피

Always Beside you. 이디야커피 공식홈페이지입니다.

www.ediya.com

 

 

[구성 살펴보기]

HTML 큰틀로 보자면 

<!DOCTYPE html>
<html lang="ko">
<head>

</head>
<body>
<header></header>
<section></section>
    	.
        .
        .
<section></section>
<footer></footer>
</body>
</html>

이렇게 짜면 될것같았고

 

CSS는 Reset.css로 초기화를 시켜준뒤에 ui.css로 짜면 될것 같았습니다.

https://projectlog.tistory.com/61

 

Reset CSS (리셋 CSS)

개요 Reset CSS란? 간혹 html로 코드를 작성하고 실행해보면 내가 적용하지 않아도 자동으로 margin이 들어가 있는 경우를 봤을 것이다. 이는 웹 브라우저 마다 default 값으로 스타일이 적용되어 있기

projectlog.tistory.com

[내가 구현한 전체적인 구성]

<header>

header에는 이번에 배워서 더정확히 알게된 display: flex;를 활용하려고 하였고 justify-content: space-between;를 사용하여 구간별로 배치를 벌려놓았습니다.

 

<nav>

nav에는 navbar를 dropdown으로 구현하였습니다. 각 요소들위에 hover하면 서브메뉴들이 튀어나오게 구현하였습니다.

position: absolute;와 z-index:100; 그리고 transition속성을 주었습니다.

 

<section>

첫번째 섹션에는 슬라이드쇼를 구현하였습니다. 이부분에서 약간에 JavaScript문법이 들어가긴 했지만 다음에는 CSS만으로도 구현을

해보고 싶습니다. 5초마다 슬라이드가 바뀌며 수동으로 이를 제어할 수도 있습니다.

 

<section>

두번째 섹션에도 첫번째 섹션과 마찬가지로 슬라이드쇼를 구현하였고 간단한 텍스트들을 넣어주었습니다.

각 요소마다 사진이 따로따로 있었는데 따로 구현하기가 힘들어 다같이 묶어서 슬라이드쇼로 만들었습니다.

차후에 기회가 된다면 더 배워서 각각 넣어서 슬라이드쇼를 구현하고 싶습니다.

 

<section>

세번째 섹션에는 사진2개를 넣는데에 힘을 쏟았던것 같습니다.

DREAM FACTORY라는 문구와 건물사진을 배치하는 일이였는데 아직 그라데이션이 낯설어 문구를 제대로 처리하지 못한점이 아쉬웠습니다. 그래도 건물은 position: absolute;속성과 overflow: hidden;속성으로 잘배치하였습니다.

 

<section>

네번째 섹션에는 backgroud에 사진을 넣고 배치하는것이 관건이였습니다. 하지만 어렵지않게 넣을 수 있었고 

배치도 간단했습니다.

 

<section>

다섯번째 섹션도 네번째 섹션과 비슷하게 구현을 하였습니다.

 

<section>

마지막 섹션은 이제까지 짜둔 섹션에 종합같은 느낌이였습니다. 마찬가지로 가맹점 개설 안내, 매장찾기에 background에 이미지를 삽입해주었고 우측부분은 div로 나누어 구성했습니다.

 

<footer>

푸터는 비교적 간단하게 구현하였습니다.

[멘토님의 코드리뷰 중 인상깊었던 부분]

  <body>
    <!--상단바-->
    <header class="header">
      <div class="left-section">

멘토님: "header__left-section 처럼 BEM 스타일을 사용해보시면, element들을 조금 더 구조적으로 설계하시는 데 도움될 것 같아요."

https://getbem.com/

 

BEM — Block Element Modifier

Flexible Using BEM, methodologies and tools can be recomposed and configured the way you like.

getbem.com

 

	<span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
        <span class="dot" onclick="currentSlide(5)"></span>
        <span class="dot" onclick="currentSlide(6)"></span>
        <span class="dot" onclick="currentSlide(7)"></span>
        <span class="dot" onclick="currentSlide(8)"></span>
        <span class="dot" onclick="currentSlide(9)"></span>
        <span class="dot" onclick="currentSlide(10)"></span>

멘토님: "이런 반복되는 작업은 JavaScript로 처리하실 수 있어요. 추가로, onclick같은 속성을 html에 직접 작성하는 건 지양하시는 게 좋을 것 같아요...!"

document.querySelectorAll(".dot-wrap .dot").forEach((_, i) => {
    currentSlide(i);
});

 

.slide_wrap {
  margin-top: 26px;
  border-top: 1px solid lightgray;
}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

멘토님: "여기 세 element에 각각 다른 방식으로 class 명을 부여하셨네요. 가급적 통일해주시면 좋을 것 같아요.

일반적으로 class name은 camel case보다는 hypen으로 구분해 이름을 짓는 편이에요. mySlides -> my-slides"

참고: https://findawayer.tistory.com/entry/CSS%EC%97%90%EC%84%9C-%EC%BA%90%EB%A9%80%EC%BC%80%EC%9D%B4%EC%8A%A4camelCase%EB%8A%94-%EC%A2%8B%EC%A7%80-%EC%95%8A%EB%8B%A4

 

CSS에서 캐멀케이스(camelCase)는 좋지 않다.

다음은 웹 개발자 Harry Roberts가 설명한 CSS에서 캐멀케이스(camelCase: 소문자 단어 사이의 접점을 대문자로 구분함)를 사용하는 것이 왜 나쁜가에 대해 설명한 글의 한국어 번역입니다. 공감하는 부

findawayer.tistory.com

 

 

.always_beside {
  height: 470px;
  background-image: url(../img/etc/always.png);
  background-size: cover;
  position: relative;
}

멘토님: "멘토링 때 Dream Factory 영역 수정하면서 말씀드렸던 것처럼, 여기도 height 값 제거하고 동적으로 높이 설정하실 수 있어요~"

깃허브링크와 이디야클론코딩사이트 배포링크

깃허브링크: https://github.com/jinuk0316/Ediya

 

GitHub - jinuk0316/Ediya: 이디야클론코딩

이디야클론코딩. Contribute to jinuk0316/Ediya development by creating an account on GitHub.

github.com

이디야클론코딩사이트링크: https://poetic-pudding-e89335.netlify.app/

 

EDIYA Clone Coding

EDIYA COFFEE 최첨단 시설에서 탄생하는 고품질의 원두로 최고의 커피맛을 고객들에게 제공합니다. 드림 팩토리 드림 물류센터

poetic-pudding-e89335.netlify.app

배운점

  1. CSS에서 Flex의 개념을 잘 이해하고 프로젝트에서도 잘쓰게 된것같습니다.
  2. README.md를 어떻게 써야하는지 잘배운것 같습니다.
  3. html 구조를 짜는 방법과 css 사용에 많이 익숙해졌습니다.
  4. 드롭다운을 구현하는 2가지 방법을 배웠습니다. (밀리는방식과 section위에 뜨는 방식)
  5. 클론코딩할때 이미지를 가져오는 크롬익스텐션을 배웠습니다.

아쉬운점

  1. 반응형을 제대로 구현하지 못해 아쉽습니다.
  2. Grid활용을 잘 못한것 같습니다.
  3. html 구조를 이쁘게 짜지 못한것 같습니다.

앞으로 해야할 것

  1. 반응형 CSS 공부하기 
  2. Grid 더 공부하기
  3. 동적인 웹사이트를 만들기 위해 JavaScript열심히배우기

 

 

728x90
반응형
저작자표시 비영리 변경금지

'ETC > 패스트캠퍼스X야놀자' 카테고리의 다른 글

ETC/패스트캠퍼스X야놀자패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_MiniProject  (1) 2023.12.22
패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_JAVASCRIPT_PICTURE과제  (0) 2023.08.28
'ETC/패스트캠퍼스X야놀자' Related Articles more