멋쟁이사자처럼 프론트엔드스쿨 3기 회고(특강)

특강에서 배운점

1. 무조건 레이아웃부터 잡아라. 여기서는 하나로 묶는게 좋다.

2. 시멘틱한 요소를 신경써야 하지만 내가 익숙하지 않다면 일단 div로 묶고 레이아웃 설정할것 

3. header는 로고나 주요 nav메뉴가 있거나 하는 부분을 말한다.  위에 있다고 무조건 header 가 아니다. 

4. 재사용성의 관점으로 박스를 하나로 묶는다.

5. 잔디는 fox를 전달하는데 중요하지 않기 때문에 꾸미는 용도로만. 즉 background-image로 주면 된다. 마크업을 깔끔하게 할 수 있고, 유지보수 차원에서도 좋다. 그리고 변경되지 않는 이미지는 background-image로 하는 편이다. 

6. 클래스 명은 겹치기 쉬우므로 적절하게 유니크하게 하는 것이 좋음.

7. image : repeat-x 를 통해서 width가 늘어나는 것을 유연하게 대처할 수 있다.

8. 마크업과 확장성 사이의 적절한 코드를 작성해야 한다. html이 복잡하면 css로 할게 많고  html이 깔끔하면 css이 별로 할게 없다. 그래서 적당하게 두개를 조절해야한다. 

9. p태그 안에 내용이 많아지면 전체를 section으로 잡고 클래스명도 수정을 할수 있다. 또한 박스를 header로 잡을수도 있게 된다.

10. box shadow는 박스모델과 별개의 레이어로 작동하니까 많이 쓴다

11. 초기값 설정으로 margin : 0 주면 마진이 없으니 병합안일어남

 

 

마진겹침현상 완벽 탐구

블록레벨 elements와 블록레벨 elements끼리 인접해있는 상하단 마진의 경우 겹치게 구성된다. 의도적으로 그렇게 작동이 되게 만들어졌다. 만약 한쪽의 마진이 더 크다면 큰쪽으로 선택된다. 

이 조건은 부모자식간에도 일어난다. 

따라서 문제를 해결하려면 부모요소와 자식요소간의 마진시작점을 다르게 해야한다.

 

1, padding이나 border:1px을 주면된다.

부모에 패딩이 있으니까 부모 마진과 자식 마진의 시작점이 달라진다.

2. 부모에게 display: flow-root

깔끔하고 좋지만 단점은 flow-root는 IE에서 호환이 안된다는 것이다.

3. 그래서 여기서 해결할 수 있는 방법은 inline block을 쓰는 것이다. 다만 이것도 단점이 있는데, 부모에 이 속성을 주게 되면 가운데 정렬이 안된다는 것이다. (block level elements에서 inline 으로 바뀌면서) 그리고 디자이너의 의도와도 다르게 될 수 있어서 별로 좋은 방법은 아니다.

4. 이것의 해결방법은 overflow:hidden을 사용하는 것이다. 원래 컨텐츠가 넘치는 것을 보이지 않게 하는 용도로 사용하지만 여기서는 이걸 통해서 마진겹침현상을 해결할 수 있는 것이다. 단점은 만약 자식 요소에서 box-shadow가 들어가면 overflow:hidden 때문에 잘리게 된다. 이것마저 고려하려면 어떻게 해야할까?

5. 부모와 자식 사이에 table elements 

사이에 table 이 끼게 되어서 마진겹침이 일어나지 않고, 자리도 차지하지 않는다. 

단점은 시맨틱한 방법은 아니라는 것이다. 

6. pseudo elements 사용

가상 요소라는 뜻으로, 원래 있는게 아닌데 css를 통해서 있는 것처럼 보이게 만드는 요소이다. css로 컨텐츠를 추가할 수 있는 유일한 태그다. 5번에서 발전된 것으로, 실제로 table요소를 주는 대신에 가상 요소에 display: table 로 주게 되면 깔끔하게 해결할수 있다.

 

결론: IE를 고려하려면 pseudo elements를, 고려하지 않으려면 display: flow-root를 쓰자!

 

 

이미지 밑에 빈공간이 생기는 이유

이미지를 배치하면 이미지 밑에 약간의 공간이 생기는 것을 볼 수가 있다.

이것은 이미지와 텍스트가 같은 inline level 에 있기 때문이다. inline elements들은 기본적으로 baseline을 가지고 있다. 그리고 이 baseline에 맞춰서 vertical align: center로 기본 설정이 되어있고 , baseline밑에는 또 bottom 라인이 존재하는데 이미지는 baseline 위에 위치하기 때문에 빈공간이 생기는 것이다. 

이것을 조정하기 위해서는 baseline을 top으로 조절해야 한다. 이를 위해서 vertical align:top 을 해주면 텍스트의 top 라인에 image의 윗부분이 붙게 된다. 그리고 이동하면서 위에 남는공간은 삭제되면서 자연스럽게 배치가 되고 아랫부분 빈공간은 사라지는 것이다. 

 

---

딥한 내용이어서 몇번 복습해야 할 것 같다. 아무튼 종찬님 강의는 최고였따. 감탄하면서 들었다.