728x90 CSS19 HTML/CSS - flex(1) 안녕하세요, 드디어! flex를 정리하려 합니다. 이때까지 수평 정렬을 하기 위해 display: inline-block;이나 float: left;를 사용하는 법에 대해 공부했었는데요, 이번에 정리할 flex를 배우게 되면 아주 손쉽게 수평/수직 정렬이 가능합니다! 간단히 block 속성 값을 갖는 div태그들을 flex를 이용하여 수평 정렬하는 것을 확인해보겠습니다. 아래 코드와 같이 container에 flex속성 값을 주는 것만으로 수평 정렬이 일어났습니다! (여기서 container의 자식 클래스인 item에 display: flex;를 적용하면 수평 정렬이 일어나지 않습니다! 이것은 container에 flex속성 값을 부여해야지 item개념이 생기기 때문인데요, 아래에서 추가 설명드리겠습니다.. 2021. 6. 8. HTML/CSS - position(2) 안녕하세요, 이전에 position에 관하여 정리를 했었는데요, 추가로 간략히 정리할 겸 sticky 속성 값까지 추가하여 정리해보려 합니다. position은 요소의 위치 지정 방법의 유형(기준)을 설정하는 속성입니다. ◆ position의 속성 값 -. static : 요소의 기준이 없음/ 배치 불가능 (기본값) -. relative : 요소 자신을 기준으로 배치 -. absolute : 위치 상 부모 요소를 기준으로 배치 (위치 상 부모요소 : position 속성이 부여되어 있는 요소!) -. fixed : 브라우저(뷰포트)를 기준으로 배치 -. sticky : 스크롤 영역 기준으로 배치 position 속성을 사용하면 실질적으로 이동은 top, bottom, left, right 속성에 의해 정.. 2021. 6. 6. HTML/CSS - box-sizing 안녕하세요, 오늘은 간단히 box-sizing에 대해 정리해보겠습니다. box-sizing은 요소의 크기 계산 기준을 지정하는 속성입니다. ◆ box-sizing속성의 값 -. content-box : 너비(width, height)만으로 요소의 크기 계산 (기본값) -. border-box : 너비(width, height)와 안쪽 여백(padding)과 테두리 선(border)을 포함하여 요소의 크기 계산 아래 그림으로 설명드리겠습니다. 위의 box가 border-box 개념이고 아래 box2가 실제 content box입니다. box2에서 padding과 border을 추가함으로써 영역이 커진 것을 확인할 수 있습니다. 여기서 padding/border 추가를 하지만 전체 width와 height를.. 2021. 6. 4. HTML/CSS - margin 중복 안녕하세요, 오늘은 margin 중복에 대해 정리해보겠습니다. margin은 CSS 속성으로 많이 쓰는데요, margin 속성끼리 중복되었을 때 어떻게 행동하는지 정리해두려 합니다. ◆ margin 중복이 발생하는 상황 1. 형제 요소끼리 margin-top과 margin-bottom이 만났을 경우 2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 경우 3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 경우 조금이라도 쉽게 이해하기 위해 예를 보며 정리해보겠습니다. 형제 요소(child)끼리의 좌우로 margin이 중첩이되면 위 그림과 같이 형제들 사이는 40px(20+20px)의 거리가 되는것을 확인할 수 있습니다. (여기서 div.. 2021. 6. 3. 이전 1 2 3 4 5 다음
