이번의 목표 01. CSS 박스 모델의 크기를 설정해보자 박스 모델의 크기를 조절하는 방법에는 크게 픽셀(px), 퍼센트(%), 센티미터(cm)가 있습니다. 종류는 좀더 다양하게 있지만 주로 사용되는 것은 위의 세가지 입니다. 일반적으로 가장 많이 사용되는 것은 픽셀(px)이며 퍼센트는 주로 반응형 웹페이지에서 사용됩니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 박스 모델의 내용 영역 크기 지정 (1) : c1 : 박스 모델의 크기를 픽셀(px) 단위로 지정 (2) : c2 : 박스 모델의 크기를 퍼센트(%) 단위로 지정 (3) : c3 : 박스 모델의 크기를 센티미터(cm) 단위로 지정 (2) : c2 : 박스 모델의 크기를 퍼센트(%) 단위로 지정 02. 실행 화면

이번의 목표 01. 박스 모델에 여백을 넣어보자 지난 시간에는 CSS 박스 모델에 대해 알아보았습니다. 이번에는 박스 모델의 padding, margin 을 통해 여백을 넣는 방법을 알아보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 박스 모델의 네 방향 여백 지정 mp1 mp2 mp3 기본 값(4개일 경우) : top, right, bottom, left 기본 값(3개일 경우) : top, right&left, bottom 기본 값(2개일 경우) : top&bottom, right&left 기본 값(1개일 경우) : top&right&left&bottom 개별 위치 지정 : margin-top, bottom, right, left 02. 실행 화면

이번의 목표 01. CSS3 박스 모델에 대해 알아보자. 01. jsp 코드 02. 실행 화면 01. jsp코드 CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다. 박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있다. 02. 실행 화면

이번의 목표 01.스타일을 그룹으로 한번에 지정해보자. 다수의 구역에 같은 스타일을 한꺼번에 적용할 때에는 번거롭게 각각의 구역에 스타일을 지정할 필요가 없습니다. 한번에 손쉽게 여러 구역을 그룹으로 적용할 수 있기 때문입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Group Selector_1 스타일 지정을 그룹으로 적용 Group Selector_2 02. 실행 화면

이번의 목표 01. overflow를 사용해보자 하위의 구역이 상위의 구역보다 클때 구역을 넘기는 경우가 종종 있습니다. 이럴 때에 해결하기 위해서 overflow 속성을 사용할 수 있습니다. overflow 속성에는 크게 hidden, scroll, visible 세가지가 있습니다. 설명은 코드에 적어 두었습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 hello css 다음 내용 02. 실행 화면

이번의 목표 01. class를 이용하여 가상 클래스를 사용해보자. 지난 시간에는 가상 클래스를 만들고 사용해보았습니다. 이번에는 class를 이용하여 가상 클래스를 사용해보겠습니다. 하면서 border 의 종류에 대해서도 몇가지 간단히 알아보겠습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 Pseudo Class 속성 값 : solid, double, dotted, dashed 가상 클래스 1 영역 마우스 위치에 따른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 가상 클래스 2 영역 마우스 위치에 다른 박스의 스타일 변화. 02. 실행 화면 border의 종류에는 이외에도 다양하게 있..