웹 레이아웃 1개, 스마트폰 레이아웃 2개, 태블릿 레이아웃 1개, 반응형 1개를
- BEM naming 적용
- height는 내용에 종속적으로 - 안의 내용물이 다 달라서 높이가 달라질 수 있는데, 일괄적으로 보여야하는 요소에는 줬다.
- width는 줄 수 있는 큰 요소에 지정
+. a hover 될 때 밑줄 효과 ...
하는 방식으로 리팩토링 했다.
1. 웹 실전
1122~1123
#6.5 에서 진행했었다. 15강 리팩토링 코드, 16강 리팩토링 코드
14강은 야후라서.. 복습하기도 벅찬 지금은 무리고,,, 지식을 체화한 후에 다음달 쯤... 각잡고 제대로 클론을 해보기로 했다.
15. Web 리팩토링 예시
15, 16강은 거의 태그 이름으로 되어있던 것을 BEM naming으로 바꾸고, height를 자식 요소에 종속되게 하는 등의 작은 수정만 했다.
내용이 있는 사이트는 아니고 레이아웃만 있는 사이트라 거의 태그 이름으로 거의 css를 지정을 해줬던터라... BEM을 적용하니까 html도 css도 더 길어진 느낌도 있었지만, 부모를 명시하지 않고 class 이름 하나로 줄 수 있는 점은 좋았다.
hover 같은 작은 부분들도 추가했다.
2. 스마트폰 레이아웃
1123~1124
#6.5 에서 진행했었다. 17강 리팩토링 코드, 18~19강 리팩토링 코드
17강은 역시 내용이 별로 없어서 큰 변화 없이 진행했다.
18. Smartphone Layout 2
<!-- 리팩토링 전 코드 -->
<section class="introduce">
<ul>
<li class="first">
<img class="left" src="./IMG_0966.JPG" alt="">
<img class="right" src="./IMG_0966.JPG" alt="">
</li>
<li>
<img class="left" src="./IMG_0966.JPG" alt="">
<img class="right" src="./IMG_0966.JPG" alt="">
</li>
<li class="last">
<img class="left" src="./IMG_0966.JPG" alt="">
<img class="right" src="./IMG_0966.JPG" alt="">
</li>
</ul>
</section>18~19강 코드는 위처럼 메인에 이미지 6장이 가로 3줄 세로 2줄로 배치되게 하기 위해 아래처럼 ul 안에 li 안에 img를 2개씩 넣고 양쪽으로 float를 줘서 가르고, margin을 주기 위해서 first last 를 따로 또 class를 줬었다.
그런데 그냥 (li>img)*6 으로 사용하고 display: grid; 때려버렸다. 너무 아름답게 딱 잡혀서 좋았다...
그리고 오른쪽 페이지의 광고칸 같은 경우는, float로 줬더니 화면 크기에 딱맞게 만들면 광고 문구가 가로 크기를 다 차지하면서 아래로 떨어져버리는 문제가 있어서, 글귀 부분에 width를 지정해버리는.. 아주 이상한 방법으로 해결을 했었는데,
/* html */
/* ad - ad__image-wrap
|-ad__text-wrap */
.ad {
display: flex;
margin: 8px;
}
.ad__image-wrap {
background-color: lightgray;
width: 80px;
min-width: 80px;
height: 80px;
}
.ad__text-wrap {
margin: 0 10px 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}위 코드처럼 flex로 잡고 no-wrap(default) 를 주는 방식으로 화면 크기가 바뀌어도 아주 아름답게 말줄임이 되도록 바꾸었다.
+ BEM에 충분히 익숙해졌고, 내용이 없는 사이트라 naming을 그냥 너무 틀에 박힌듯이 쉽게 하고 있어서 #7.5 에서 진행했던 태블릿, 미디어쿼리는 리팩토링을 하지 않기로 결정했다.
