[JSP] CSS란? CSS 적용시키기

CSS

• CSS는 HTML을 꾸미기 위해 태그를 이용해서 요소들을 꾸미는 것
• JSP 기반 웹 프로젝트를 개발할 때 CSS 파일을 이용해서 개발을 진행한다
• CSS을 적용 시키는 방식은 Tag 안에 적어주는 방식과, HTML Header 부분에 <style>로 적어주는 방식 또한 CSS 파일로 적용시키는 방식이 있는데 CSS 파일로 적용을 시켜본다

이곳에 css를 작성하면 된다 css의 양식은 w3school에서 css 페이지를 참조하면 된다

http://www.w3schools.com/css/default.asp

class와 id를 지정해주는 양식

클래스는 .을 이용해서 이름을 지정하고 id는 #을 이용한다

# CSS 특징

css는 캐스케이딩 스타일로 * 아스타로써 모든 css를 적용하고 

또한 class나 id로써 스타일을 줘도 두가지가 모두 적용된다

먼저 선언된 스타일이 있다면 적용이 된다

# div, p 

• 여러 개의 element에 대해서 적용을 하고 싶다면 콤마를 이용해서 사용

• 

# div p

• 부모-자식의 관계
• 상위의 div에 그 하위에 p가 존재 (부모로 div를 가지고 있는 p 태그만 적용)

• 

# div > p

• 위의 부모 자식과의 관계와 비슷하다
• 차이점
• • div p 인 경우
  • <div>   <span>  <p>   </span>   </div>
  • 위와 같은 상황에서 p에 스타일 적용 (부모가 div이기 때문에)
  • 
    
  • div > p인 경우
  • 자신의 부모가 정확히 div인 경우만 스타일 적용
• 잘 사용되지 않는다

# attribute

• ex) input[type=text], input [type=date]
• 위와 같이 타입이 다른 경우 타입마다 스타일 적용

• 

# 주로 사용되는 CSS

• 

• 주로 사용 되는 것은 위에 5가지 정도 이다
• 하지만 *값은 잘 사용되지 않는다 (모든 스타일이 적용되기 때문)

# CSS 작성

웹에서는 완전 검은색을 사용하지 않기 때문에 웹 전용으로 자주 사용되는 검은색이 따로 있다

#333333

이미지에 css적용하기 위해 css를 작성했다

div에 #header라는 아이디를 갖는 부모를 가진 img에 대한 css이다

이제 이미지가 들어간 header.jsp에 css파일을 import 시켜줘야 한다

앞 부분은 동일하고 css위치만 다르다

절대 경로를 적어주는 것이 좋다

적용된 index를 볼 수 있다