안녕하세요.이번엔 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 설정값의 작동방식을 이해해보세요.
감사합니다. 😄