이번의 목표 01. box-sizing 을 사용해보자 코드를 작성하다보면 padding이나 margin 때문에 박스의 크기가 바뀌는 경우가 많습니다. 그럴 때에는 box-sizing을 사용하면 해결할 수 있습니다. box-sizing:border-box 은 박스 사이즈를 고정시켜줍니다. box-sizing:content-box 는 디폴트 값이기 때문에 입력하지 않아도 괜찮습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 box-sizing: content-box; 예제 box-sizing: content-box; 예제 02. 실행 화면 ① box-sizing: border-box 에서는 padding 값이 들어가도 박스의 크기가 변하지 않는 것을 확인할 수 있습니다. ② box-sizin..

이번의 목표 01. 제 목 목차(nav) Google Apple W3C section 1float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다. section 2float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다. 마지막 글 02. 실행 화면

이번의 목표 01. overflow를 사용해보자. 지정된 영역에서 이미지가 벗어날때에는 overflow를 사용하여 영역의 크기를 조절할 수 있습니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 이미지가 박스 영역을 벗어남 이미지가 오른쪽 정렬로 되어 있는데, 박스 영역을 벗어났습니다. 이미지가 박스 영역을 벗어날 경우에는 overflow 속성을 설정하여 해결합니다. 02. 실행 화면

이번의 목표 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 정적 위치 설정 적용 상대 위치 설정 적용 상대 위치 설정 적용 정적 위치 : 순서에 따라 나열되는 방식. 위치 조정을 해도 적용되지 않는다 상대 위치 :..