박스모델 CSS_2편 : margin , padding 아래의 그림과 같이 margin은 (border기준)바깥쪽 여백이고 padding은 (border기준) 안쪽 여백입니다. 스타일시트에서 사용하는 형식은 {margin:30px;} (상/하/좌/우 모두동일) {margin:20px 40px;} (상하 / 좌우) {margin:0px 20px 30px;} (상 / 좌우 / 하) {margin: 20px 30px 40px 50px;} (상 / 하 / 좌 / 우) * (margin-top, margin-right, margin-bottom, margin-left의 형식으로 특정값 지정 가능) {padding:30px;} (상/하/좌/우 모두동일) {padding:20px 40px;} (상하 / 좌우) {pa..

박스모델 CSS속성 -1편 width / height / border 간단하게 width / height / border 에 대해서 알아볼게요! (width와 height는 잘 아실걸로 생각하고 PASS하겠습니다.) border는 테두리와 관련된 속성입니다. 이렇게 사용하시면 되는데요, 사용할 수 있는 모양의 값은 solid, dashed, dotted, groove, outset , hidden, ridge, inset, putset 등이 있습니다. 결과부터 보도록 하겠습니다! 박스 모양을 다양하게 활용할 수 있겠네요!! box1-박스의 테두리가 none으로 지정된 경우 box2-박스의 테두리가 hidden으로 지정된 경우 box3-박스의 테두리가 dotted로 지정된 경우 box4-박스의 테두리가 d..

CSS 선택자 1) 전체 선택자 (모든 태그에 적용) *{ 속성: 값; } 2) 요소명 선택자 (ex:p태그에 적용시) p{ 속성: 값; } 3) id 선택자 #id명{ 속성: 값; } 4) class 선택자 .class명{ 속성: 값; } 1) 전체선택자 >> * CSS선택자를 알아봅시다! 나는 전체선택자입니다. * 나는 그냥 p태그 입니다! 나는 id가 있는 p태그 입니다. 나는 class가 있는 p태그 입니다. 전체 선택자 결과 >> 모든 글자에 적용됩니다! 2) 요소명 선택자 CSS선택자를 알아봅시다! 나는 전체선택자입니다. * 나는 그냥 p태그 입니다! 나는 id가 있는 p태그 입니다. 나는 class가 있는 p태그 입니다. 요소명 선택자 결과 >> P태그 (P태그 요소)에 적용됩니다. 3) i..