Today I Learned

임찬우·2021년 6월 7일
0

supanu TIL

목록 보기
5/7
post-thumbnail

오늘의 팩트

  • 같은 속성 입력이므로 같은 방향도 적용 가능하다. 단 , width 설정은 꼭 필요하다.
  • float시 100%가 되는것끼리는 자동으로 합쳐지고 나머지는 밑으로 떨어진다.
  • 두개가 100%가 안될시에 다음 형제요소 들도 올라가는데 그걸 막기 위해선 clear:both를 써준다.
  • cf 를 적용 시키거나 overflow:hidden을 주는경우도 있다.
  • overflow로 대부분 해결하다가 내용이 감춰지는 경우가 있으면 cf를 쓴다.
  • float를 쓰면 높이가 사라지므로 높이가 없으면 형태가 무너지기 때문에 높이를 세우기 위해 적용시키는것
  • position

    1. fixed: 모니터를 기준으로 해서 배치
    2. relative: 자기자신의 원래 위치가 기준
    3. absolute: 상위요소(주로 부모)
        • absolute가 자식요소에 있을때 부모요소에 있는 relative는 부모요소로 기준 시켜주는것
        • 기본 포지션 값은 static(기준점이 없다) 이다
        • 정중앙에 포지션시키려면 중앙으로 보낸 후 요소 크기의 절반 만큼 -(넓이,높이의 절반값)px를 넣으면 된다 (왠만 하면 쓰지 말것)
        • 자식요소가 모두 다 absolute속성을 가지고 있으면 부모의 높이요소가 무너짐 (해결책: 높이를 적용시켜줘야한다.)
       <style>
            *{padding:0;margin:0;box-sizing: border-box;}
            .cf::after {content: ""; display:block; clear: both;}
            #parent{ width: 800px; background:orangered; margin:0 auto; position:relative;}
            .child{width: 100px;  height:100px;  opacity: 0.5;}
            .child1{background:lime; position:relative; left:200px;top:100px;}
            .child2{background:orchid; position:absolute; left:50%; margin-left:-400px; top:100%; width: 100%;}
            .child3{background:palegoldenrod; 
                position:absolute; left:50%; top:50%;
                margin-left:-50px; margin-top:-50px;
            }
        </style>
        .child1{background:lime; position:relative; left:200px;top:100px;}


    .child2{background:orchid; position:absolute; left:50%; margin-left:-400px; top:100%; width: 100%;}

    .child3{background:palegoldenrod; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}

    profile
    하자! 개발자

    0개의 댓글