Front-End/CSS3 [CSS] html/css 프로젝트 실습 중 놓쳐 막혔던 부분 + 몰랐던 부분 1. position : absolute 막힌 부분 : absolute 후에 top : 10px; 을 했으나 어디갔는지 안보이는 현상 상위 엘리먼트 중 relative를 가진 가장 가까운 엘리먼트의 내부를 기분으로 배치가 이루어진다. 나의 경우엔 부모 중 relative를 가진 엘리먼트가 없어, 부모를 벗어나 가장 바깥 부모(브라우저 화면 제일 위)로 이동하여 안보였던 것이다. absolute를 이용해 부모를 기준으로 배치하고 싶다면 부모 속성으로 relative 사용 한줄요약 : absolute 사용 시 부모에 relative 사용하자 2. box-sizing : border-box 막힌부분 : margin, padding 등으로 원하는 크기와는 달라지는 현상 이 같은 경우는 margin, paddin.. 2022. 10. 22. [CSS] CSS 클래스 작명 / BEM BEM Block-Element-Modifier / BEM을 이용해 작명한다. 이점 목적, 기능을 명확히 전달 클래스 이름만으로 구조 파악의 용이성 단점 잘못하면 클래스네임이 엄청 길어질 수 있다. Block 문단 전체에 적용된 element나 element를 담고있는 컨테이너 Element block을 구성하는 단위 block은 독립적, element는 의존적 block 내에서만 의미를 가진다. Midifier block이나 element의 속성을 담당 다르게 동작하거나 다른 외형을 가져야 할 때 추가하여 사용 주의사항 클래스에만 사용, id는 유일한 것이기 때문에 이 방법을 따르지 않는다. 블록과 요소는 목적을 기반으로 작명 구조의 깊이 표현 x , .card__ul__li ( x ) 이런식으로 깊이.. 2022. 10. 19. [CSS] float 속성 레이아웃 문제 / 부모 요소 크기 미반영 자식요소에서 float 사용 시 부모 요소가 자식 요소의 크기 미반영 파랑 초록 float를 사용하게 되면 문서의 흐름에서 제외되어 붕 떠있는 상태가 되기 때문에 부모가 자식요소 크기 인식 불가 해결법 1. 뒤에 요소를 추가하여 clear:both 처리 한다. 파랑 초록 필요없는 div를 만들어야 해서 불편할 수 있음 2. ::after + clear:both .gray::after { content: ''; display: block; clear: both; } 자동으로 추가되어 제거해주니 깔끔 3. overflow:hidden .gray { overflow: hidden; } 자식요소 크기는 인식하는데 hidden이라 다양한 제약사항이 생겨서 2번을 추천함 해결 완료 2022. 10. 18. 이전 1 다음
