Wednesday, July 19, 2006
HTML-CSS ] div 태그 안의 바탕색과 글자 색깔 변경 / 여백 주기
div 태그에 이렇게 스타일을 정의하면, 글자색과 바탕색과 여백을 조정할 수 있습니다:
코드:
결과:
color 는 글자색
background-color 는 바탕색
padding 은 안쪽 여백입니다. 만약 div 박스 바깥쪽에 여백을 주려면 padding 대신에, margin:20px; 등으로 지정하면 됩니다.
그런데 이런 스타일들은 태그에 일일이 적어주는 것보다, 클래스로 만들어서 일괄적으로 지정하는 것이 효율적입니다. ▶▶ [HTML-CSS] 클래스(class) 정의하기; class 사용법 기초
코드:
<div style="color:yellow; background-color:red; padding:20px;">
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
</div>
결과:
차창 밖 멀리에서 교량의 조명들이 보이고 있었다. 그리고 어둠 속에 강변이 있었다. 단순한 강변이 아니라 그 강변에는 그곳을 지났던 무수한 타인들의 추억 같은 것이 매연과 함께 짙게 배어 있었다. 도로가 여러 갈래로 아득히 갈라지고 있었다. 나는 거기에 강이 흐르고 있다는 사실조차 몰랐었다. 그 강이 나를 초대한 것은 아닌가 하는 느낌까지도 들었었다. 그러나 나를 이끌고 있는 것은 더 멀리에 있는 듯했었다.
color 는 글자색
background-color 는 바탕색
padding 은 안쪽 여백입니다. 만약 div 박스 바깥쪽에 여백을 주려면 padding 대신에, margin:20px; 등으로 지정하면 됩니다.
그런데 이런 스타일들은 태그에 일일이 적어주는 것보다, 클래스로 만들어서 일괄적으로 지정하는 것이 효율적입니다. ▶▶ [HTML-CSS] 클래스(class) 정의하기; class 사용법 기초
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home