CSS 익히기(3) +스프링 프로젝트 설정

기존에 사용하던 데스크탑이 아닌 노트북에서 새로이 스프링 프로젝트 파일을 생성하다 보니

당연하게 생각했던 환경설정 부분에서 큰 난관을 맞딱뜨리게 되었다.

 

pom.xml에서 java version과 spring framework version을 각각

 

<java-version>1.8</java-version>
<org.springframework-version>4.3.3.RELEASE</org.springframework-version>

 

으로 바꿔주었다.

 

그 후 jsp파일에서 resources에 위치한 css파일을 불러들이려는데 이게 또 말썽인게 아닌가.. 귀찮쓰..

 

<link href="<c:url value="/resources/자신의 css파일 경로/css파일이름.css" />" rel="stylesheet"> 코드를 해당 jsp 파일 헤드 태그 안에 넣어주었다.

 

이제야 준비 운동 끝..!

 

오늘은 position에 대해서 공부하였다.

먼저,

 

div, span {

  width: ~px;

  height: ~px;

  backgorund: red;

}

<div></div>

<span></span>

 

을 해주면 div에만 빨간색 박스가 생기는 것을 확인할 수 있다. span에 값을 주면 span에도 빨간색 박스가 생길 것이다.

 

div {

  display: inline-box;

}

 

를 해주면 한 열에 박스가 추가되고, inline으로 변경하면 span 값처럼 표시되는 텍스트에만 빨간줄이 쳐지는 것을 볼 수 있다.

 

span {

  display: box;

}

를 해주면 div처럼 텍스트에 상관없이 빨간색 박스가 형성되는 것을 볼 수 있다.

 

<div class="this"></div>

 

.this {

  top: ~;

  left: ~;

  background: blue;

}

 

를 주면 this라는 div에 top과 left의 설정값이 적용되지 않는 것을 볼 수 있다.

그 이유는 모든 position에는 static이란 값이 default로 적용되어 있기 때문이다.

 

여기에 position: relative; 를 주면 top과 left 값이 적용되며,

position: absolute;의 경우 해당 영역을 기점으로 이하 값이 적용

position: fixed;의 경우 전체 공간 내를 기점으로 이하 값이 적용된다.

 

*{} 모든 태그들에 css 적용

태그명 {} 해당 태그만 css 적용

#이름 또는 .이름 #은 id값이 주어진 태그, .은 class값이 주어진 태그에 css 적용

태그명 #아이디명{} 중복된 아이디 값을 가진 태그 중 하나의 태그를 특정하여 css 적용

 

button:hover{} 버튼에 마우스를 올려놓을 시 css 적용

 

padding은 해당하는 범위의 내부에 값을 넣어준다.

padding: ~px ~px ~px ~px; top, right, bottom, left 순의 방향대로 픽셀을 준다.

padding: ~px ~px; 이 경우에는 top과 bottom, right와 left에 픽셀을 준다.

 

border은 해당하는 범위의 외곽에 값을 넣어준다.

border: ~px solid red; 일정 픽셀만큼 해당 범위 바깥에 실선으로 빨간색 테두리를 만들어라

border-right: 등으로 쓸 수도 있다.  

 

margin은 해당 범위의 바깥 공간에 값을 넣어준다.