div 하단에 색 입히기 ( 라인 추가하기 )

div 하단에 색 입히기 ( 라인 추가하기 )

publish date
Jun 30, 2020
Tags
css
안녕하세요.이번엔 div 하단에 색을 입히는 방법에 대해 알아보겠습니다.

최종 결과

notion image
위와같이 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 설정값의 작동방식을 이해해보세요.
 
감사합니다. 😄