Front-End Developer/CSS

니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법

CSS에서의 가운데정렬이란 초심자에게 가장 헷갈리는 컨셉 중 하나이다. 인라인요소/블럭라인 요소에 따라 다르고, 또 같은 속성이라 하더라도 상황에 따라 되는게 있고 안되는게 있다(?) 오늘은 딱, 깔끔하게, 거의 모든 상황에서 먹히는 4가지 중앙정렬 방법을 정리해보려 한다. 이 중에 상황에 따라+선호에 따라 맞춰 사용하면 되겠다. 전제조건 부모 div class="container" 안에 자식 div="box-1"을 만들었다. 정확한 결과를 위해, 적용된 마진 패딩값을 0으로 설정하고, box-sizing: border-box;를 준다. 뷰포트 안 어디라도 이동이 가능하기 위해 부모 cotainer div의 height를 100vh로 설정했다. * { margin: 0; padding: 0; box-si..

Flex 별 거 아냐 - 부모요소 편

들어가기 이전에 부모 div안에 자식div 세 개를 만들어 보자. 시각적 힌트를 위해 색깔과 높이/너비를 주고, 부모 div에 border값을 주겠다. 박스들은 오른쪽 옆 공간을 끝까지 다 자치하기때문에, 우리가 보는 눈으로는 오른쪽 빈 공간이 충분해보임에도 불구하고 다음 행으로 넘어가게 된다. 자 이제 우리가 flex를 사용해서 무엇을 할 수 있는 지 알아보자. 부모에 display:flex를 주자 .parents { display: flex; } 기본값인 가로 메인축을 기준으로 item들이 정렬된 것을 볼 수 있다. Main axis(가로축)와 Cross axis(세로축)는 상대적인 개념이다. justify-content 속성을 통해 *main 축의 item 정렬을 어떻게 해줄 지 정할 수 있다. 속..

Let's Conquer CSS Margin Collapse

마진 병합현상 (Margin Collapsing) 인접하는 블록요소의 상 하단의 마진이 한쪽으로 병합되는 현상이다.(상쇄,겹침 등등 다양하게 불린다.) 때문에 마진 10+10이 =10이 되거나, 15+10은 15가 되는(더 큰 쪽의 마진값으로 병합) 원치 않는 상황이 발생된다. 하지만 알고보면 마진병합현상은 CSS가 의도적으로 만든 기능이다. 상하단 마진이 병합되지 않고 둘 다 적용이 된다면 상대적으로 다른곳들에 비해 그 부분만 마진이 너무 두꺼워지기 때문에, 디자인이 더 안정적으로 보일 수 있도록 설계된 것이다. 일단은, 마진 병합은 우리를 도와주는 이로운 현상이다라고 이해하자. 마진병합현상이 일어날 수 있는 조건 인접해있는 block 요소끼리만 일어난다. 상하단만 해당사항이다. 일단 아래와 인접해있는..

How to move bullet points in css?

부딪친 문제 li tag를 사용하여 Bullet이 적용되었는데, 왼쪽으로 치우져져 있었다. 이를 해결하려 css에서 li tag에 padding값을 주었으나, 결과는 Bullet들은 그대로 있고 글만 패딩값이 적용되었다. li { padding-left: 20px; } 해결방법 모든 li tag에 list-style-position Property를 inside로 지정해주었다. 아래는 검색했던 링크. https://stackoverflow.com/questions/49906604/how-to-move-bullet-points-in-css

이종찬님 특강 - 행복한 CSS냐 망한 CSS냐.

css는 복잡하다. 진입장벽이 쉬울 뿐, 간단한 홈페지이 하나를 만들 때에도 이걸 건들면 저게 삐걱, 저걸 건들면 이게 삐걱.. #망한다 하지만 기초를 탄탄하게, 또 꾸준히 수련을 통해서 #행복한 CSS를 만들어 줄 수 있다. css 순서 가이드 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지말자. 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 줌으로서 이 요소가 어떤 공간을 차지하고 있는지 쉽게 확인가능하거나, 이미지가 들어갈 곳에는 가상의 이미지를 미리 넣어줄 수도 있다. 기본 레이아웃 관련 스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding / width을 설정해주고, height 는 왠만하면 오토로 두는게 행복한 상황이다..