목록CSS (11)

계발하는 개발자

[CSS] Float 그리고 Clear

1. float 속성 이해하기 float은 요소를 왼쪽 or 오른쪽 방향으로 띄워서 정렬시키는 속성으로 float요소는 block요소를 inline-block요소로 바꿔주는 것을 뜻한다. 요소에 float을 줄 경우 해당 요소는 최소 크기로 변경되며 띄워지고 크기가 줄면서 생긴 빈공간을 그 뒤에 있는 요소가 올라오며 채우게 된다. 다음의 예를 보면 이해가 쉬울거다 ! 예제에서는 이미지 대신 div박스로 표현했다 (_ _ ) 초록색 div요소를 float:left 하고 margin: 10px을 준 모습. 보면 텍스트 박스가 div요소를 피해서 위치된다는 것을 알 수 있다. 만약, div요소를 피해가지 않았으면 하는 요소가 특별히 있는 경우라면 해당 요소에 clear 속성을 적용하면 된다. [ clear 속..
📌 Language/CSS 2022. 12. 27. 00:59
[CSS] 박스 크기를 결정하는 box-sizing : border-box, content-box

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. [ Box-sizing 속성 ] 1) border-box: - 테두리를 기준으로 크기를 정함 - border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음 2) content-box: - 콘텐트 영역을 기준으로 크기를 정함 - border, padding, margin을 모두 합산하여 콘텐트 영역이 설정값보다 작을 수 있음 [ 문제 인식 ] box1 box2 위 코드로 짜여진 블록요소들(box1, box2) 의 크기는 같을까? 테두리를 제외한 알맹이(=콘텐트)만 본다면 같다 할 것이다.box1은 border: 10px을 줘서 약간 커진 데 반해, box2는 border: 30px을 준..
📌 Language/CSS 2022. 12. 20. 23:06
[CSS] 요소를 효과적으로 정렬하는 Flex-box: Justify-Content 속성

📂Flexbox란? CSS의 display 속성 중 하나로, 요소들의 레이아웃 , 정렬 , 그리고 간격을 설정 하는 데 사용할 수 있다. Flexbox 구성요소 - container, item Flexbox를 구성하는 요소들에는 container와 item 두 개념을 들 수 있다. 먼저 위 코드블럭에서처럼 각각의 input들을 감싸는 container가 있다. 여기서 container는 "button" 클래스명의 태그다. container는 flexbox를 사용하기 위해 필수적이며, 지금부터 소개할 여러 속성값을 통해 요소 배치 및 배열 등 적절한 효과를 줄 수 있다. *참고로 flexbox를 사용하기 위해선 container에 반드시 display:flex 속성을 넣어주어야 한다! item은 flexb..
📌 Language/CSS 2022. 12. 4. 00:32
이전 Prev 1 2 3 Next 다음