728x90 Web 개발/HTML.CSS27 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 - float 안녕하세요, 오늘은 float에 대해 정리해보겠습니다. float이란 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. (MDM 검색 결과) 즉, float는 요소를 좌우 방향으로 띄우는 속성으로 수평 정렬에 사용을 할 수 있습니다. 비록 최근에는 flex 속성이 나와서 float의 사용 빈도는 줄었지만 정리해보겠습니다. 이해하기 쉽게 하기 위해 실제 코드로 정리하겠습니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'.. 2021. 6. 5. 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. 이전 1 2 3 4 5 ··· 7 다음
