728x90 전체 글104 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. 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 ··· 13 14 15 16 17 18 19 ··· 26 다음
