이번의 목표 01. float 을 사용해보자 float 을 사용하면 객체를 정렬 시킬 수 있습니다. top, bottom, left, right 의 네가지 방향을 설정하여 이용이 가능합니다. 그리고 float를 사용하면 다음 줄에서도 계속 정렬이 됩니다. 이때, 줄을 바꿔줘야 하거나 정렬이 되기를 원치 않을 때에는 clear 를 사용하면 됩니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 float 속성 사용 div1 div2 - float 속성을 사용하여 대상 요소를 웹 문서에 배치한다. 다시 한번 div1 clear을 통해서 초기화 한다. 02. 실행 화면

이번의 목표 01. 절대 위치와 고정위치에 대해 알아보자. 지난 시간에는 정적 위치와 상대 위치를 알아봤습니다. position 을 이용하는 두 가지 방법을 더 알아 볼 것입니다. 절대 위치란 사용자의 페이지를 기준으로 고정된 좌표에 위치합니다. 단, 조상이 되는 요소에 position이 사용되었다면 해당 요소를 기준으로 좌표에 위치합니다. 고정 위치는 사용자의 화면을 기준으로 항상 같은 위치에 있습니다. 네이버 홈페이지에서 하단에 위치하는 다크모드 설정과 최상단으로 가는 버튼이 그 예시입니다. position : fixed 는 고정 위치 / position:absoulte 는 절대 위치 입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 positioning style2 정적 위치 설정 ..

이번의 목표 01. 정적 위치와 상대 위치에 대해 알아보자. 객체의 위치를 설정하는 방법에는 정적 위치와 상대 위치가 있습니다. 정적 위치를 사용하게 되면 객체의 순서에 의해 나열이 됩니다. 위치를 조정해도 적용이 되지 않습니다. 반면, 상대 위치는 현재 블록을 기준으로 위치를 이동시킬 수 있습니다. 방법을 정할 때에는 position 을 사용하면 됩니다. position : static 은 정적 위치 / position : relative 는 상대 위치 입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 positioning style 정적 위치 설정 적용 상대 위치 설정 적용 상대 위치 설정 적용 정적 위치 : 순서에 따라 나열되는 방식. 위치 조정을 해도 적용되지 않는다 상대 위치 :..

이번의 목표 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. 실행 화면