문제 우리가 div를 중앙 정렬을 하고 싶을 때, 첫 번째로 생각나는 건 바로 margin: 0 auto이다. 생각해보면 우리가 컴퓨터에 코딩하는 것처럼, 우리도 처음 배울 때 누군가로부터 코딩된 내용이 아닐까 싶다. margin을 사용할 때는 서로 간격을 주거나, margin: 0 auto처럼 중앙 정렬하고 싶을 때가 거의 99%일 것이다. 사실 margin에는 margin: 0 auto의 중앙 정렬 외에도 다양한 정렬들이 존재한다. 전부는 아니겠지만, 알고 있는 몇 가지 margin 활용법을 소개해보겠다. 유형 margin-left(right): auto 첫 번째는 margin-left(right): auto이다. 이것은 어떤 엘리먼트를 왼쪽 혹은 오른쪽으로 바짝 붙이고 싶을 때 사용한다. 예를 들어..

문제 내가 원하는 것 만큼 늘리고 줄일 때마다 그에 맞춰서 사이트가 변화하는 것이 바로 반응형의 묘미라고 생각한다. 하지만, CSS를 갓 배운 초보 입장에서는 반응형만큼 앞이 캄캄한 것이 없을 것이다. 나 또한 그랬고 특히 '이럴 경우에는 어떻게 이해해야 하지?' 싶은 문제가 하나 있어서 가지고 와보았다. 아직 미디어쿼리는 없다고 치고, 한 사이트 전체를 줄였을 때 가로 스크롤이 생기지 않는 너비 100%의 반응형 웹사이트를 만든다고 가정해보자. 플러스로 100%안에 중앙 정렬이 된 너비 1200px의 div가 있고, 그 div안에 여러 개의 section이 있는 웹사이트를 만들고자 한다면 어떻게 해야할까? (대략 위의 이미지처럼 늘리고 줄였을 때 가로 스크롤이 생기지 않고 안에 요소들이 줄어드는 반응형..

문제 웹사이트를 보다 보면, 위와 같은 레이아웃의 형태를 본 적이 많이 있을 것이다. 나도 처음에는 '각각 item에 width와 height 값을 적당하게 주고 display: flex나 float 값을 주면 간단한 거 아닌가?' 싶었지만, 생각보다 웹은 순순히 내 생각의 결과를 따라주지 않았다. 그렇다면 어떻게 해야 할까? 여기저기 공부해본 결과, 간단한 2가지 방법을 찾아냈다. 해결 display: flex 사용하기 1 2 3 4 5 6 html은 위와 같다. 부모 태그 container로 그 안에 각각 6개의 div 아이템들을 감쌌다. #container { display: flex; flex-direction: column; flex-wrap: wrap; height: 500px; /* 줄바꿈되..

정의 그동안 display 속성하면 inline, inline-block, block 이 3가지만 알고 있었다. 하지만 반응형 웹을 만들기 위해서 필수로 알아야하는 게 바로 display: flex 이다. 이 속성은 화면이 줄어들고 늘어남에 따라 변화하는 반응형 웹을 조금 더 쉽고 효율적으로 만들기 위해서 필요한 준비물이라고 보면 되겠다. display: flex를 주게 되면, block 속성을 가진 엘리먼트들도 마치 float를 먹인 것처럼 flex 안으로 들어온다. 개인적으로 flex를 줄 때, 엘리먼트를 젤리화한다고 생각한다. 뭔가 젤리를 만졌을 때 유연하고 말랑해서 모양 변화가 쉽기 때문에 이런 식으로 자연스럽게 연상하게 되는 것 같다. (이해를 위한 나만의 방식이다) flex의 속성인 flex-..

정의 position: relative 요소의 위치를 상대적인 위치 및 기준점으로 설정한다는 속성으로, 대개 absolute 속성을 가진 자식의 부모 태그에 많이 쓰여진다. absolute의 경우 부모 태그의 relative가 없이 쓰게 되면 전체 인터페이스를 기준으로 엘리먼트의 위치를 잡기 때문에 최상단이나 최하단의 위치한 경우가 아니고서야 엘리먼트의 위치를 제대로 지정하기 어렵게 된다. 이것을 방지하기 위해서는 그 엘리먼트가 속한 부모 태그에 position: relative를 줌으로써 너무 자유분방한 absolute에게"너는 내 안에서만 놀아!"라고 공간을 제어해줄 수 있다. position: absolute 요소의 위치를 절대적 값으로 설정한다는 속성으로, 이미 다 짜놓은 태그 위에 특정 엘리먼트..