padding-toppadding-rightpadding-bottompadding-left안쪽 여백을 정할 수 있습니다. margin처럼 세부적으로 한 개씩 정할 수 있습니다. 예제) padding-top:10px; padding-right:2em; padding-bottom:100% padding-left:0 padding간단하죠. padding-top, padding-right 등을 모두 정할 수 있습니다. padding에 적는 갯수에 따라... padding:10px => 모든 안쪽 여백을 10px으로 padding:10px 5px => 상하 10px, 좌우 5px으로 padding:10px 5px 2px => 상 10px, 좌우 5px, 하 2px padding:1px 2px 3px 4px => ..

margin은 안쪽 여백이 아니라 바깥 여백입니다.margin-topmargin-rightmargin-bottommargin-left바깥 여백을 정할 수 있습니다. 세부적으로 한개 씩 정할 수 있습니다. 예제) margin-top:10px; margin-right:2em; margin-bottom:100% margin-left:0 marginmargin-top, margin-right 등을 모두 정할 수 있습니다. margin에 적는 갯수에 따라... margin:10px => 모든 바깥 여백을 10px으로 margin:10px 5px => 상하 10px, 좌우 5px으로 margin:10px 5px 2px => 상 10px, 좌우 5px, 하 2px margin:1px 2px 3px 4px => 상 1..

출처 : http://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스로 생각하면 됩니다. CSS에서디자인과 레이아웃 얘기를 할 때, 용어 '박스 모델"이 사용됩니다. 박스 모델은 우리가 다른 요소와 관련 요소와 공간 요소 주위에 테두리를 삽입하실 수 있습니다.아래의 이미지는 상자 모델을 보여줍니다 Width(너비)와 Height(높이)는 어떻게 정해질까? width:250px; padding:10px; border:5px solid gray; margin:10px; 이렇게 CSS가 되어있다고 생각해보면, 너비는 아래와 같이 됩니다. 250px (너비) + 20px (왼쪽, 오른쪽 패딩) + 10px (왼쪽, 오른쪽 테두리) + 20px (왼쪽, 오른쪽 여백..

background-color : 배경색 지정 배경색을 지정하는 속성입니다. 색상 이름이나 코드 값을 넣을 수 있습니다. 예제) body {background-color:#eeeeee;} #wincomi {background-color:skyblue} background-image : 배경 이미지 지정 배경 이미지를 지정하는 속성입니다. 이미지 경로를 입력하시면 됩니다. 이미지 경로는 url(“~~”)로 입력합니다. 예제) body {background-image:url(“./images/wincomi_bg.jpg”);} background-repeat : 배경 이미지가 반복되는 방법 배경이 반복되는 방법을 지정하는 속성입니다. 아래 중 하나를 입력하시면 됩니다. 패턴일 경우에는 repeat을 쓰시면 됩..

혹시 예전에는 폰트를 설정하려면 이렇게 쓰시지 않으셨나요? Font 속성 물론 이렇게 쓰셔도 되지만, 웹 표준에 맞지 않습니다. CSS 기초 강좌 5강 - Font 속성 : 글자 제어 1. 글자 크기를 설정하는 속성 font-size:x x에는... pt - 글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위 em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정 % - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정 px - 글꼴의 크기를 픽셀 단위로 표시 2. 글자 두께를 설정하는 속성 font-weight:x x에는... normal - 아무것도 주지 않습니다. : 미리보기 bold, bolder - 굵게 : 미리보기 3. 글꼴을 설정하는 속성 font-f..