5Day

💡 github page settings 에서 address가 안나올경우, root folder, .html 까지 다 붙여서 만들어줘야 함

---

1만 시간 Page Code Review 마무리

• 가상요소 안 보일때는 background-color 색 바꿔보면 숨어있는 위치를 찾을 수 있다!
  (가상 요소가 사라져서 한참 찾았다..😵‍💫^^;)

1. 100% 로 맞춰진 화면 구현하는 방법
   1) Figma Design 맨 위부터 capture
   2) google web store → perfect Pixel by welldone code application install
   3) open live server → 개발자 도구를 켠다 → app exe → 이미지를 뒷면에 대고(?) 맞춰봄
   (어린시절 따라 그리기 하는 기분으로..? 자,이제 순노동을 시작하지..)
2. background-size를 빼고 background-position으로조정
3. width값이 아닌 height 값을 맞춘다.
   +letter-spacing / vertical-align / margin 값을 조정해 가며 정확히 맞춘다.

---

CCS 설계기법

CSS 설계기법, 방법론은 OOCSS/ SMACSS/ BEM 3가지가 대표적이다.

1. OOCSS (Object Oriented CSS)

의 중요 원칙 데이터+대상: 객체 _

a) Structure , Skin 의 분리

_2 box Structure: width,height,,
-- each Skin: color, fornt-size,,,

        .btn1 {
            font-weight: bold 
            }

        .btn2 {} 

        .btn {
            width: 200px;
            height: 80px;
            font-size: 30px;
            }

        .btn-close {
            background: black;
            color: #fff;
            border: 3px dotted #fff;
            ```

0```
코드를 입력하세요

b) Container , Contents 의 분리

            width: 300px;
            padding: 20px 10px;
            margin: 10px;
            font-size: 18px;
            line-height: 1.5;
        }

        #main .general {
            background-color: aquamarine;
            color: black;
        }

        #main .warning {
            background-color: azure;
            color: blue;
        }
        
        ```

2. SMACSS(Scalable Modular Architecture CSS)

2-1. base : 전체적으로 사용되는 폰트 패밀리, 폰트 사이즈, reset 스타일, img, 공통 스타일

2-2. layout : header, main section, footer, side-bar와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙. 대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 한다.

2-3. module : 고정, 변경 불가능하다.

. mod {
    border: 1px solid; 
    }

2-4. state : 기존 스타일 덮어쓰거나 확장하는데 사용하는 스타일, 자바스크립트에 종속되어서 때에 따라 변경 가능

서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며, 서브클래스가 한번 적용되면 바뀌지 않는 속성임에 비해 스테이트는 자바스크립트로 필요할때 넣었다 뺐다 할 수 있다는 점 입니다. 클래스 이름은 앞에 is 라는 접두사를 사용합니다. (is-hidden, is-active … )

2-5. theme :사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color … ) 등을 의미합니다

3. BEM(Block, Element, Modifier) __Yandex 회사가 만들었다

3-1) 기본 규칙
: ID 선택자, 요소 선택자 권장하지 않음,
class 선택자만 사용하는 이유는 가중치 계산 편하게 하기 위해서 이다. (10점으로 전부 계산하면 되니까^^)

3-2) 방법

a. Block
: naming 에 진심이다 ..

b. Element

: block에 종속되어야 한다.
언더바 2개 사용

ul class="tabnav"
<li class="tabnav__item">
<a href="" class="tabnav__link">```

c. Modifier

        <button type="button" class="chapter-baseball__btn chapter-baseball_active-false"></button>
    </section> ```
    ````````
    

---

2가지 Issue 가 있었다.

1. Responsive web code error

a. problem
a1) max-width: 360; 으로 지정

a2) width: 345가 되어야 @mediaquery가 맞게 나오지만, 밑의 text는 사진과 같이 줄바꿈이 일어남
a3) width: 346 부터는 layout이 일그러짐

b. solution
b1) width 값보다 안에 들어있는 콘텐츠의 너비가 더 크게 되면서 콘텐츠가 넘쳐서 레이아웃이 깨진다고 한다.
➡️ #app에 적용해준 패딩값을 조절/ 깨지는 레이아웃에 따라 콘텐츠의 크기를 조절
b2) viewport를 나눠서 작업
➡️ Viewport 크기별 다른 스타일을 적용

2. live server error

첫 날부터 어지간히 속을 썩였던..
live server의 묵묵부답...
물론 파일을 직접 열어도 되지만 굉장히 불편했는데,

☀︎드디어 해결책을 찾았다. ꯁ

1. settings 에서 live server 검색 후 Use Local IP chek!

2. Use Browser Preview chechk box가 해제되어 있는지 확인!

3. 파일명이 '한글' 일 경우에 열리지 않는다고 함

➡️ 위 두개로도 열리지 않을 경우 파일명이 한글이였기 때문... 한글이었기 때문이라니... 😵‍💫

---

MEMOIR 까진 아니고..

금요일, 어찌나 피곤한지 점심도 안먹고 잤다.
몸이 적응해 가는 시간인 것 같다.

오후에는 회사들의 Hard Skills를 보는 시간이어서
시간이 정말 빠르게 지나갔다.

아무래도 다들 힘들어하니 강사님이 refresh time을 선사해 주신듯 ^^

다시한번, 열의를 다지는 유익한 시간이었다. 😙

그나저나 한 페이지의 코드를 작성할 때도
크고작은 문제가 언제나 발생하고
그것을 해결하는 과정과 해결해 냈을 때의 짜릿함-⭐️ 이
나를 살아있다고 느끼게 한다.

오늘은 두개의 작고 소중한 Issue 를 해결했기에 매우 뿌듯하다.

앞으로도 불편한건 두지 말고 찾아나서자!

끝! 주말이다.