float2 [CSS] Float (레이아웃 구성) 플롯(float, 매우 중요) 웹 페이지 레이아웃을 구성할 때 반드시 사용하는 속성이다. 키워드 left right none 플롯을 사용할 때 주의해야 할 점이 있다. 부모의 높이 값이 지정 안 되는 현상이 일어나는 것이다. 부모 요소에 1. 가상 요소:after { content: ""; display: block; clear: both;} 2. overflow: hidden 중 택 1을 적용해주면 된다. 기존 div 하나에 div 4개 박스를 넣고 border 값을 줘보았다. 자식 박스를 float left 했더니 이렇게 이상하게 돼있다. 지금이야 border를 적용시켜 눈으로 확인이 쉽지만 나중에 오류가 나면 찾기 힘들다. 첫 번째 방법을 적용하여 부모 박스에 .box:after {content: .. 2022. 9. 26. [CSS] float를 활용한 쇼핑몰 물건 판매 예제 float을 활용한 물건 판매 예제 div 큰 블럭 한 개 하위 width 부모 영역의 50%씩 두 개 블럭 생성 왼쪽은 사진 영역, 오른쪽 영역은 내용 영역. 오른쪽 내용 영역은 다시 세 개의 블럭으로 나눠 정보와 버튼 등을 기입한다. 다양한 박스를 어떻게 선언하고 배치시키는지 이해하는 것이 중요하다. 마치 안드로이드 스튜디오를 할 때 다중 linear layout을 수직(vertical), 수평(horizon) 배치하는 것과 비슷하다. 태그의 열고 닫힘과 들여쓰기 정도를 잘 확인하며 하도록 한다. 아래 코드를 확인하여 위 그림의 1, 2, 3, 4, 5가 어떤 클래스와 아이디에 매치되는지 이해한다. 과제2 제목 : 돌고래 급처분 합니다 내용 : 안녕하세요, 돌고래입니다. 저는 새로운 주인을 찾고있어요.. 2022. 9. 19. 이전 1 다음
