Browsing Tag

CSS 샘플

[CSS] div를 이미지 크기에 맞게 둘러싸기

이미지를 둘러싸는 Div가 이미지에 맞게 크기가 조정되도록 하고자 하는 경우에 사용할 수 있습니다.  이처럼 외부의 div가 안쪽의 이미지에 맞게 둘러싸도록 하려면 display: inline-block을 text-align: center를 함께 사용해야 합니다. 다음과 같은 코드를 사용할 수 있습니다. HTML 코드:…

[CSS] 요소의 너비를 컨텐츠 너비에 맞추는 방법

예를 들어 div 태그로 둘러싸인 코드가 있다면 보통 width를 사용하여 너비(폭)를 지정해줄 수 있습니다(예: width: 30%;). 하지만 경우에 따라 div(꼭 div가 아니더라도 상관 없음)로 둘러싸인 컨텐츠의 길이에 맞게 너비를 지정하고 싶은 경우가 발생할 수 있습니다. 예를 들어, 다음과 같은 HTML의 …

[CSS] DIV 경계 밖으로 배경색을 확장하는 방법

현재 DIV 요소의 좌우로 확장하여 배경색을 추가해야 하는 경우가 간혹 있습니다. 이런 경우 CSS로 해결이 가능합니다. 우선 다음과 같은 CSS 코드를 시도해보시기 바랍니다.::before { background: #facf04; // 또는 background-color: #facf04; } 이 코드가 잘 작동하지