• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

.feature>office+service 플롯줄때 질문있습니다

21.06.14 23:10 작성 조회수 120

1

안녕하세요, 쌤 플롯이 헷갈려서 문의드립니다.

.feature>office와 service가 있는데 초기 가로 배치할때

float:left를 하나에게만 주는게 아니였나요? office{float:left}이렇게 않주고 .feature>div 로 오피스와 서비스에게 둘다 주는게 맞는건가요?

그리고 이렇게 플롯을 자식에게 주면 부모에 반드시 clearfix등을 다 넣주던데 이부모 feature에 안넣어도 되는건가요?

현재 피시상세 contact부분을 하고 있는데 브라우저 줄여보니 이 location섹 션의 글자들이 위로 우르르 올라오더라구요. 나중에 내려주는건지요?

하다보니 몇가지 막히는게 있어서 힘들지만 수업은 너무 좋습니다!

감사합니다!!

PC 레이아웃 섹션 상세 퍼블리싱(Location Section)

.feature{
width: 70%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ddd;
}
.feature>div{
float: left;
}
.office{
width: 60%;
padding-right: 100px;
}
.service{
width: 40%;
}

course-thumbnail

반응형 웹사이트 포트폴리오(Architecture Agency)

PC 레이아웃 섹션 상세 퍼블리싱(Location Section) - #02

강의실 바로가기

답변 1

답변을 작성해보세요.

1

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.06.16

office { float: left } 줘도 되지만 .feature > div  에 플로트를 주는건 .office와 .service에 공통적으로 들어가는 css 속성이 있으면 .feature > div에 줘서 일괄 관리하는게 좋습니다.

플로트를 주면 따라오는 html 요소가 플로트 속성을 상속받아서 말씀하신 것처럼 땡겨져 올라옵니다.

이런걸 방지하는게 .feathure에 overflow: hidden을 주면 됩니다.

보통 .clearfix { clear: both }라고 다음 요소에 플로트 속성을 상속해제 하는 방식으로 하는 경우가 많은데 이경우는 플로트 속성 해제하는 역할은 하지만 플로트속성 때문에 부모요소가 높이값을 잃은 것을 찾아주지는 못합니다.

곧, 플로트 속성도 아래 요소에 상속해서 영향을 주지 않으면서 부모요소의 높이값을 찾아주는 overflow: hidden으로 주시는 것을 권장드립니다.

이 글과 비슷한 Q&A