안녕하세요.

이번엔 div 하단에 색을 입히는 방법에 대해 알아보겠습니다.

최종 결과

위와같이 div 박스 하단에 검은 줄이 생기게 만들어주는거죠.

소스코드

방법은 단순합니다.

box div 하나를 만들어주고 position: relative; overflow:hidden;

box div 안에 div 를 만들어주고 class 를 지정(bottomline)해준다음 position: absolute; bottom, top 등으로 조절. 끝!


각 설정을 세부적으로 살펴보면..

position style 은 요소들을 어떤 방식으로 위치를 지정할지 설정해주는 속성입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/position )

relative 는 자기자신의 현재 위치를 기준으로 설정하는 방식이며 absolsute 는 부모요소의 위치를 기준으로 설정하는 방식입니다.

여기서 부모요소에 relative 를 지정해준 이유는 relative를 지정해주지 않는 경우 자식요소의 absolute가 정상적으로 적용되지 않는 경우가 있기 때문입니다.
( 즉 부모요소의 위치때문이아닌 자식요소의 위치때문에 지정 )


이제 relative 로 position이 설정된 부모요소에 자식요소를 추가한 후 absolute 로 position을 설정해주면
부모요소의 위치를 기준으로 좌/우/상/하를 지정해 줄 수 있게 되는거죠.

사실 백번의 설명보다 코드만 보셔도 충분히 이해하실 수 있으니 코드를 요리조리 테스트해보시면서 position 설정값의 작동방식을 이해해보세요.

감사합니다. 😄