게시판〃(2-1) 게시판 목록 [Board_List] 살펴보기

저번 글에서 단순 HTML과 자바스크립트로 뼈대를 잡아놓은 스케치 단계까지 했고, 출력되는 화면에 대해서만 포스팅했는데요. 이번 글 부터는 각각 나눠서 정리할 생각이고 먼저 메인이라고 부를만한 게시판 목록부터 살펴보도록 하겠습니다.

혹시 텍스트 파일과 jsp파일이 필요하신분은 제일 아래 (2)번 화면설계 글에서 다운받으시면 되겠습니다.

■ 게시판 목록(Board_List.jsp)

먼저 출력되는 화면이고요. HTML로 위와 같이 표를 만들기 위해 <colgroup> 태그로 번호 / 제목 / 작성자 / 작성일 / 조회 이렇게 5칸 나누고 <thead>,<tbody>,<tfoot> 태그를 사용하여 구성했습니다.

이상하게 칼라 스크립터로 복사 붙여넣기하면 태그의 위치가 중앙으로 몰려서 사진형식으로 올리게 됬습니다. 바로 붙여넣기 할 수 없는 점이 정말 아쉽네요.

---

● CSS에 적용되는 부분으로 <style>을 선언 해주고 그 안에 명령어를 넣습니다. 여기서는 나눔고딕체를 사용하기 위해 @import를 선언하여 나눔고딕체를 불러오고 body영역 전체에 적용 시켰습니다.

● 자바스크립트 명령어로 function 변수(url){ location.href=url; } 이렇게 선언하면 아래 onclick="변수(url)"에 해당되는 부분은 url로 이동합니다.

● <marquee>는 글자를 움직이게 하며 심심하지 않게 그냥 넣었습니다. behavior는 행동으로 "alternative / slide / scroll " 3가지가 있으며, scorlldelay는 화면끝까지 도달하는 시간, direction은 글자가 움직이는 방향입니다.

지훈이의 홈페이지입니다.

● <table>을 가로폭은 800, 각 세로폭은 200, 테두리 굵기는 2, 칼라는 그레이로 만들고 <col group>태그로 가로 [ 50 / 500 / 100 / 50 / 나머지 800-(50+500+100+50) ] 칸의 크기를 지정해 주었습니다.

● <thead> <tbody> <tfoot>에 해당하는 부분

■ 관련글

● 게시판〃(1) Dynamic Web Project 폴더 생성

● 게시판〃(2) HTML/자바스크립트로 화면 설계