🐣 주니어 개발일지 - 덴마크 쇼핑몰 연습 #1

📘 오늘 배운 것

---

반응형 웹사이트 레이아웃 카피캣 연습

📌 일반적으로는 미디어쿼리 안쪽에 모바일작업이 이루어지지만,
덴마크 쇼핑몰에서는 미디어쿼리 바깥쪽에서 모바일작업이 이루어진다.

모바일버전 설계

• 확장명 SVG 이미지 파일의 경우, SVG 태그로 구성되어 있다.

  • 

• 초기화 작업 (디폴트 값)

  • * = 모든 html태그를 뜻함
  • box-sizing: border-box; = padding 값에 의해 공간 크기 달라지는 것 방지
  • font-weigh = 폰트 굵기 / 100단위로 올라가고, 숫자가 높을수록 굵음 (100~900)
  • vertical-align: middle; 이미지 하단 공백 없애기
  • span태그는 inline요소를 가지고 있지만, 덴마크사이트 한정 block으로 지정

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; }
  body { overflow: hidden; font-family: sans-serif; color: #585858; }
  h1, h2, h3, h4, h5, h6, p { font-weight: 400; }
  li { list-style: none; }
  a { text-decoration: none; }
  img { vertical-align: middle; }
  span { display: block; }

header 부분 설계

• header의 높이값에 li태그 높이값을 포함시키고자 할 때 !
  (= 자식의 높이값을 부모가 인식하게 하는 법 )

  • li태그의 부모인 ul태그에 overflow: hidden; 입력

    #header .buttons ul { overflow: hidden; }

• 클릭하는 a태그의 범위가 li태그를 채우는 법

  • display를 block요소로 바꿔주기

  #header .buttons .menu-button { display: block; width: 100%; height: 100%; text-align: center; }

PC버전 설계 feat.미디어쿼리

• px을 em으로도 표기 가능
  • 1em = 16px;
• 원래의 절반값을 넣어주어 비율 유지 할 수 있도록 하기!

모바일 버전 👇

.main-content .product-group-link {
    position: relative;
    display: block;

    width: 100%;
    height: 56.25%;
    border: solid 10px red;

    overflow: hidden;
}

PC 버전 👇

@media (min-width: 60em) {
    .main-content .product-group-link {
        width: 50%;
        height: 28.125%;
    }

• position: absolute; 사용시 width 값을 정확하게 인지 못함.
  • width값을 주어야 함!

제품 영역 설계

• article 사용시

  • 이 영역을 대표하는 타이틀이 필요

• 공간의 크기는 이미지크기와 근사치값으로 넣어주면된다.

• main태그와 header태그의 겹쳐짐 현상

  • header의 3차원을 먼저 작성한 후 main의 2차원태그를 작성할 경우 레이아웃 겹침 현상 일어남.
    1. overflow: hidden;을 통해 높이값이 나올 수 있게 도와주어야 한다.
    2. 겹쳐진 만큼 main태그와 ul태그 사이에 높이값만큼의 공백값을 주어야 한다.
    
    👇 변경 후 👇
    

하단 영역 설계

• 영역 나누기
• 왼쪽, 중앙, 오른쪽으로 나누면 된다.
  
• nav태그 안에 글자도 입력 가능하다.

	<nav class="right-methods">
   		<h3>Payment Methods</h3>
   		<ul>
                <li><span class="payment-icon one"></span></li>
                <li><span class="payment-icon tow"></span></li>
                <li><span class="payment-icon three"></span></li>
                <li><span class="payment-icon four"></span></li>
                <li><span class="payment-icon five"></span></li>
            </ul>
        </nav>

• 클래스를 연달아 기입하는 경우
  • .payment-icon .one : payment-icon 안에 있는 .one이라는 것을 선택하는 것
  • .payment-icon.one : 여러개의 payment-icon중에서 one이라는 클래스를 갖고있는 것을 선택하는 것
• footer에서 padding값의 정체

  #footer { position: relative; background-color: yellowgreen; padding-bottom: 66px; }

  • .to-top-button 부분에서 레이어 겹침 현상을 없애기 위해서 !
    
    👇 해결 👇
    

추가 실무 관련 내용

1. id 속성값의 특징

• id 속성값은 중복되면 안된다.
  • href 속성값 3가지
    • url 주소
    • 전혀 다른 html 파일 문서
    • id 속성값
  • id 속성값을 href로 사용하게되면 혼란을 줄 수 있기 때문에 중복되면 안된다.
  • class 속성값은 a태그와 결합이 안된다.

2. 말줄임표 사용방법

• 줄바꿈 현상 제거하기
  • white-space: nowrap;
    
    👇 줄바꿈 현상 제거 👇
    
• 벗어나는 영역 자르기
  • overflow: hidden;
    👇 벗어나는 영역 자르기 👇
    
• 말줄임표 사용하기
  • text-overflow: ellipsis;
    👇 말줄임표 👇
    
• 이 3가지 합쳐서 간단하게 사용 ~,~
  • 말줄임표를 담당하는 css class를 미리 만들어두고 사용하기
  • html에서 class에 추가해서 사용하면 간단!
  • 코드 분량 줄이기에 최고!

  .ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }

📌 오늘의 Tip

---

• ✨ 실무에서 유용!!) y축 중앙정렬 공식

    #header .buttons li .menu-button img { position: relative; height: 20px;
  		                         top: 50%; transform: translateY(-50%); }

• 실제 공간 연습할 때는 공간의 크기를 다 만들고서 배치하는게 가장 쉽다 !

❔ 어려웠던 것 OR 힘들었던 것

---

1) 스크롤이 작동하지 않았다.
2) main-content 부분이 작동하지 않았다.

💡 해결 방법!

---

1) 해결방법

• 스크롤과 관련된 태그는 overflow인데, css에서 작성한 overflow는 총 2개였다.
  그중 body부분 초기화과정에서 overflow: hidden;으로 되어있었다.
  이 태그로 인해 스크롤이 작동하지 않았던 것!
  강의를 다시보니 overflow-x: hidden;으로 작성해야했다.

• overflow에 대해서

  • https://offbyone.tistory.com/296 사이트 참고

2) 해결방법
선택자를 어떤것을 했는지 꼼꼼히 살펴보기 !
class = . / id = #

🌱 공부를 마무리하며,

---

가장 답답했던건 모르고 이해가 되지 않는 부분이 생기면 구글링하면 대부분 해결되거나, 멘토님의 도움을 받으면 된다. 하지만, 잘못 입력한 부분을 찾아내기위해서는 개념을 정확하게 알아야지만 발견할 수 있다는 것을 알게되었다. 아직은 주니어라 학습시간이 어쩔 수 없이 길어지지만, 이것만 참아내면 나도 개발자가 될 수 있겠지...!