CSS (Cascading style sheet ) 사용법 및 예제

CSS 는 Cascading style sheet의 약자로 웹페이지를 꾸미기 위한 스타일들을 저장해두는 문서이다. jsp 페이지에서 사용할  css 파일을 등록한 후 div 태그중 "class"를 통해 css 파일에 작성해 둔 클래스를 적용시키는 방식으로 사용한다. 예제를 통해 확인하자.

1. signUp.jsp 파일. 회원가입 페이지를 작성하는 데 css를 적용시킨다. 
1) css 파일을 import 하는 방법. link를 통해 rel, type을 다음과 같이 등록하고 href에는 경로를 작성해준다. 이때 경로는 프로젝트명/ContextRoot 이후의 경로를 작성해주면 된다. Context root를 모른다면 이전 포스팅 참조.

2) div의 class에서 css에서 지정해둔 클래스명을 적는다. 이후 닫는 </div> 태그 전까지 write 클래스에 지정해둔 태그들에 대해 css 파일의 스타일이 적용된다. 중요한 점은 한단계 아래의 자식태그들에 대해서만 적용이 된다는 점이다. 예를 들어 write 클래스 아래에 <form>태그를 작성했다면 그의 자식들인 <input>이나 <submit> 태그에는 .write 클래스의 css가 적용되지 않는다는 점이다. <input>이나 <submit>에도 css를 적용시키기 위해 css에서는 > 기호를 통해 cascading을 사용한다. css파일 보면서 다시 설명하겠다.

3) button이라는 클래스를 작성했다. 이 또한 클래스 write_layout.css 파일에 지정해줘야 한다. 

write_layout.css 파일. 간단히 작성법 설명하자면
1) class명은 ".class명" 의 형태로 적는다. . 이후의 단어를 통해  jsp 파일에서 클래스를 찾는다.
2) 자식 태그 지시자 > 
특정 클래스 하위의 태그들에 각기 다른 스타일을 적용시키고자 하는 경우 > 지시자를 통해 따로 적용을 시킬 수 있다. write 클래스 아래 태그들 중 hr, h1, table 등의 태그에 각기 다른 스타일을 적용시킨다는 말이다.
이때 주의할 점은 > 지시자는 한 단계 바로 아래의 태그밖에 찾아갈 수 없다. 초록 박스와 노란 박스의 경우 write 클래스 내부의 form 태그의 하위자식들에 접근하고 있다. 이때 .write > input이 아니라 .write > form > input 과 같이 >를  두번 사용해야 해당 태그에 css를 적용시킬 수 있다는 말이다. 경로 지정할 때와 같이 중간 경로를 생략할 수 없다는 것으로 생각하면 이해에 도움이 될 수 도 있지 않을까 싶다.

해당 페이지에 css 입힌 결과. 네이버 페이지와 비슷하게 작성하려고 했는데 나름 가깝게 나왔다.