float 속성을 주지 않았는데 붕뜨는 이유

10 글 보임 - 1 에서 10 까지 (총 16 중에서)

1 2 →

글쓴이

글
2021년 8월 25일 22:42 #14059

frysweet
참가자

선생님 상단바 아래에 컨텐츠 넣는 화면을 만들었는데요./

상단바 역할을 하는 div 는 header 에 넣고,

<header>

<div></div>

</header>

<header> 에

-->

display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 10;
width: 100%;

속성을 주었구요.

그아래에 <div> 를 배치했는데,

<header>

<div></div>

</header>

<div>

<ul></ul>

</div>

header 아래에 있는 div 가 float를 준것처럼 붕떠서 위에 가 있어요..

저는 <header>아래에 새로 넣은 div가 배치되는 걸 의도한건데,

header 아래 <div> 에는

display: block;
width: 100%;

속성 넣어주었구요

그안에 <ul>, <li> 만들어서 아이콘 넣고 width="20" height="20" viewBox="0 0 20 20" 속성 넣어줬습니다.

<header> 빼면 제대로 보이긴 하거든요

<header>랑 같은 높이에 위치하면서 <header> 뒤에 가 있어요

<header> 밑에 배치가 안되는 이유가 뭘까요 ??

2021년 8월 25일 22:55 #14061

frysweet
참가자

\

아래 div 강제로 height 줘서 테스트 해봤는데 height이 무시되어 있어요

2021년 8월 25일 23:38 #14065

codingapple
키 마스터

header가 position: fixed; 되어서 떠있고 그래서 밑에 있는 div도 자리를 못찾는것이 아닐까요

div에 height줄 때 px 단위도 넣어봅시다

2021년 8월 26일 00:02 #14066

frysweet
참가자

position : fixed 속성 준 <header> 뒤에 clear : both 속성 넣은 <div> 넣고 그 아래에 <div> 배치했는데

그래도 header 아래로 안가고 맨 위쪽부터 시작합니다 ㅜㅡㅠ

2021년 8월 26일 00:34 #14068

frysweet
참가자

body에 padding-top 주는 방법으로 해결은 해봤는데.. 다른 방법 없을까요?

2021년 8월 26일 06:02 #14073

frysweet
참가자

선생님 다른 방법 시도 해봤는데 이런방법이 좋은가요?

처음에 fixed 로 주고 시작한 이유가 뷰포트 768px 이상일때 상단바가 최상위에 하나 더 있는 것때문이었는데요.

768px이상 뷰포트일때에도 스크롤하면 최상위 [상단바1]이 사라지게 하는 효과를 주고 싶어서,

<header> 안에 [상단바 1]은 positon 아무 설정도 안주고,

[상단바 2]는 <header> 밖으로 꺼내주어 부모가 <body>일 수 있게 하고, 기본적으로는 positon과 좌표 속성을 안주었구요.

positon: sticky; top :0px; 속성인 클래스가 스크롤 하면 추가되는 자바스크립트 연결해주었어요.

<body>

<header>

<div> 상단바 1 </div>

</header>

<div> 상단바 2 </div>

<div style="height: 1000px;"></div>

</body>

테스트해보니 정상적으로 작동은 하는데

뭔가 더 지저분한 코드 같네요 ^^:;

2021년 8월 26일 10:00 #14083

codingapple
키 마스터

해결책은 전체 코드를 올려주는게 빠를듯요

스크린 사이즈에 따라서 다르게 동작하고 싶으면 분리하는게 자바스크립트 넣기에도 편리합니다

2021년 9월 13일 01:59 #14985

frysweet
참가자

이렇게 최상단 nav (초록색) 두번째nav( 옐로우) -> 두번째 nav 는 스크롤로 내리면 sticky로 맨 위에 고정되게 만들었습니다.
쭉 스크롤하면 옐로우바가 맨위쪽에 붙기는 하는데,
내리다보면 어느순간 올라가 사라지더라구요.
부모를 body 로 설정했구요./

<body> 끝까지 안내렸는데도, 스크롤을 일정부분 내리면 왜 사라지나 봤더니,
<body> 크기가 <header>+<nav>+<div>+<div>+<div> 를 다 합친것으로 나와야 하는데,
콘솔창에 <body>에 커서를 대면, 원래 길이어야 하는것보다 짧게 나와있어요. (이부분이 캡처가 안됩니다 ㅠㅠ)

<body> 의 height 이 666.4 로 나오구요.
제일 하단에 <div style ="height : 1000px> 인 <div> 두개가 <body> 에 포함 안되어 있는것처럼 나와요.
그렇다고 해서 <header> + <nav> + <div class="component"> 를 합친 세로 길이보다는 길게 나오구요.
왜이렇게 나올까요? ..ㅠㅠ

2021년 9월 13일 10:03 #14988

codingapple
키 마스터

html css 코드를 올려주십시오

2021년 9월 14일 01:39 #15040

frysweet
참가자

css 파일을 8개로 쪼개놔서 요소마다 캡처해서 올려요
글쓴이

글