1 min to read

[스프링부트 시리즈16] 웹페이지 디자인하기

Featured image

웹페이지 디자인하기

웹 개발에서는 색상이나 크기 등의 디자인을 적용할 때 스타일시트(style sheet), CSS를 사용한다. 이번 절에서는 SBB에 스타일시트를 적용해 보자.

스태틱 디렉터리와 스타일시트 이해하기

스타일시트 파일, 즉 CSS 파일은 HTML 파일과 달리 스태틱(static) 디렉터리에 저장해야 한다. 스프링 부트의 스태틱 디렉터리는 다음과 같이 src/main/resources 디렉터리 안에 있다. static

스태틱 디렉터리를 확인했으니 앞으로 CSS 파일은 스태틱 디렉터리에 저장한다.

화면을 본격적으로 디자인하기에 앞서 먼저 스타일시트 파일(style.css)을 만들어 보자. static 디렉터리를 선택한 후, 마우스 오른쪽 버튼을 누르고 [New → File]을 클릭한다. 파일 이름으로 style.css를 입력하여 스타일시트 파일을 만든다. 그리고 다음 내용을 입력해 보자.

[파일명:/static/style.css]

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

이와 같이 question_detail.html 파일 상단에 style.css를 사용할 수 있는 링크를 추가하여 스타일시트 파일을 상세 페이지 템플릿에 적용했다.

static 디렉터리에 style.css 파일이 위치하지만 /static/style.css 대신 /style.css로 작성해야 함에 주의하자. 왜냐하면 static 디렉터리가 스태틱 파일들의 루트 디렉터리이므로 적을 필요가 없기 때문이다.

2) 브라우저에 http://localhost:8080/question/detail/2를 입력해 질문 상세 화면이 어떻게 변경되었는지 확인해 보자. 다음처럼 스타일이 적용된 화면을 볼 수 있다. 변경