전체 글 34

[CSS] position 속성 이해하기

▶ 오늘은 position 속성에 대해서 알아보겠습니다. 먼저 position을 이해하기 위해서 position의 4가지 속성에는 ◎ position 속성 4가지staticrelativeabsolutefitxed이렇게 4가지가 존재하는데요.  position을 쓰는 이유는 대표적으로 임의로 offset 값을 주기 위함입니다.* offset : 페이지 전체를 기준으로 위치값을 반환한다. = 즉 ,절대좌표 어떤 범위가 지정된 것의 위치를 바꾸게 되면 자동적으로 같이묶여있는다른 개체들 한테도 영향을 미치게 됩니다.그렇기때문에 어디에도 영향을 받지않는 독립적인 개체로 만들어 주고 위치값을 자유롭게 주어 배치하면 편리하므로position 속성은 아주 유용하고 자주 쓰이게 됩니다. ● 하지만 4가지 속성도 사용하는..

02. HTML , CSS , JS 2020.04.01

[CSS] float 속성정리

* float 속성: display block 요소는 float 요소를 무시한다!* display:inline-block 글자화 이기 때문에글자로서의 특징인 애매한 여백이 생긴다애매한 여백을 해결해주는게 display:block; 과 float:left;의 조합이다 하지만 float은 block에게 무시당하기때문에block요소인 section에게div자식은 버림을 받는다. (아래 코드펜참고)See the Pen JjjNPQz by 박지연 (@qwer273) on CodePen.section은 현재 div자식취급을 하고있지않으므로 div자식들 밑에막내를 데려와서 div도 자식 취급을 하도록 도와준다. 막내투입하는 공식 ::after 이용하기section::after{content:””;display:bl..

02. HTML , CSS , JS 2020.01.07