이번의 목표 01. document 에 대해 알아보자. 02. document의 write() 메서드를 사용해보자 02. 실행 화면

이번의 목표 01. 동기 통신과 비동기 통신에 대해 알아보자. 02. JS에서 사용하는 자료형에 대해 알아보자. 통신에는 동기 통신과 비동기 통신이 있습니다. 비동기 통신은 AJAX 라고도 부릅니다. 동기 통신은 request와 response가 같이 발생한다는 특징이 있습니다. 비동기 통신은 request 와 reponse가 동시에 일어나지 않습니다. 바로 이 둘의 예시부터 알아보겠습니다. 동기 통신은 페이지상의 링크나 버튼 등을 눌러 새로운 페이지로 전환, 이동등을 하는 것이 그 예시입니다. 비동기 통신은 네이버에서 검색창에서 키워드를 입력시 관련된 키워드가 나오는 것을 그 예시로 볼 수 있습니다. 보다 간단하게 생각해보자면 사용자가 엑션을 취했을때 화면이 깜빡거리며 새로이 로딩되는건 동기 통신, 데..

이번의 목표 01. caption-side를 이용하여 테이블에 제목을 달아보자 02. empty-cell 을 이용하여 빈 셀을 공백으로 만들어보자 태그에는 를 사용하여 제목을 달아줄 수 있습니다. 이때 기본값은 항상 테이블의 상단에 위치하도록 되어있습니다. 위치를 변경하기 위해서는 caption-side 를 사용하면 됩니다. top, bottom, left, right 로 위치 변경이 가능합니다. 그리고 다음으로 알아볼 것은 empty-cells 입니다. 테이블을 만들때에 필요에 의해서 빈칸을 만들어야 하는 경우가 있습니다. 그런 경우에는 보통 또는 를 이용하여 바로 태그를 닫는데 이렇게 되면 에 걸어둔 스타일이 적용되어 빈칸에 적용된 스타일만 덩그러니 나타나게 됩니다. 이를 아예 공백으로 만들기 위해서..

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