이번의 목표 01. border-spacing 을 사용해보자 지난 시간에는 태그의 셀 사이의 간격을 없애는 방법을 알아 보았습니다. 이번에는 테두리와 셀 사이의 간격을 조절하는 방법을 알아볼 것입니다. 이를 위해서는 border-spacing 을 이용합니다. border-spacing 을 사용하여 간격의 값을 설정할 수 있습니다. 예시) border-spacing: 10px; 이때에 0px을 설정하는 것으로 border-collapse:collapse 와 같은 기능을 할 수도 있습니다. 하지만 collapse와 다른점은 테두리(border)가 겹치는 곳은 두꺼워 진다는 것입니다. 그렇기 때문에 간격을 없애고자 할 때에는 border-collapse를 사용하는 것이 더 낫습니다. 01. jsp 코드 02...

이번의 목표 01. border-collapse를 사용해보자 태그를 사용하며 자세히 본 사람들은 이미 눈치챘겠지만, table 안의 각 셀 사이에는 공백이 있습니다. 이 공백을 없애기 위해서는 border-collapse 를 사용할 수 있습니다. border-collapse:collapse; 는 셀사이의 공백을 없앱니다. border-collapse:separate; 는 디폴트 값이므로 별도로 입력하지 않아도 됩니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 표(table)의 테두리 사이의 간격 제거 예제 table border-collapse collapse table border-collapse collapse table border-collapse collapse 표(table)의 ..

이번의 목표 01. table-layout을 사용해보자 은 내용의 분량에 따라 사이즈가 자동으로 조절됩니다. 하지만 사이즈를 고정적으로 분배하고 싶을 때에는 table-layout을 사용하여 이를 고정시킬 수 있습니다. table-layout: auto; 는 디폴트 값이며 자동으로 사이즈가 바뀌는 상태입니다. table-layout: fixed; 는 내용 분량과 상관없이 사이즈는 고정입니다. 01. jsp 코드 02. 실행 화면 01. jsp 코드 table layout auto 예제 table-layout auto auto: 내용 분량에 따라서 자동으로 조절 table layout fixed 예제 table-layout fixed fixed: 내용 분량에 따라 자동으로 저절되지 않고 고정됨 02. 실행..

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