hy6

출처 : https://wikidocs.net/161523 0. 들어가며 지금까지 작성한 html의 모양은 표준 html 작성 규격을 따르지 않은 문서이다. 웹 페이지가 다른 컴퓨터 에서도 동일하게 보이게 하려면 웹 표준 html문서를 작성해야 한다. 1. 표준 html 구조 표준 html의 구조는 다음과 같다. (... 생략 ...) 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. 2. layout.html 작성 표준 html 구조의 기본이 되는 layout파일을 다음과 같이 작성한다. layout.html layout.html 템플릿은 모든 ..

출처 : https://wikidocs.net/161459 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 간단한 설정을 통하여 게시판 화면을 보다 깔끔하게 구성해보자. 해당 출처에 접속하면 부트스트랩의 다운로드 링크와 적용법이 적혀있다. 여기서는 그것을 했다는 가정 하에 코드만 간략히 작성하겠다. 1. 부트스트랩의 적용 question_list.html 번호 제목 작성일시 테이블 항목에 번호를 추가하였다. 게시글의 번호는 loop.count를 이용하여 표기하였다. 날짜를 보기 좋게 출력하기 위해 타임리프의 #temporals.format 유틸리티를 사용했다. #temporals.format(날짜객체, 날짜포맷)..

rel rel은 relationship의 약자이다. html 내에서 link에 쓰이는 요소이다. 어떤 파일을 연결 할 경우, 이 파일과의 관계를 설명할 때 쓰인다. href href는 hyper-reference이다. 하이퍼 참조를 의미한다. 참조 할 하이퍼를 나타낼 때 쓰인다. 그래서 "href = "이 다음에는 참조 할 파일 명을 쓴다.

출처 : https://wikidocs.net/161396 1. 스태틱(static) 디렉터리 스타일 시트들은 스태틱 디렉터리에 저장해야 한다. 스타일 시트를 작성하자. style.css textarea { width:100%; } input[type=submit] { margin-top:10px; } 2. 템플릿에 스타일 적용 스타일 시트 파일을 질문 상세 템플릿에 적용한다. question_detail.html static 파일에 style.css파일이 존재하지만, /static/style.css 대신 /style.css로 사용해야 한다. static 디렉터리가 스태틱 파일들의 루트 디렉터리이기 때문이다. 잘 작동된다. 답글란이 가로로 더 넓어졌으며, 답변등록 버튼도 좀 더 띄워져 있다.