[중앙정보처리학원] CSS* background, float

 

명령어들

background에 사용 되는 속성값들

 

기능을 이용해서 배경화면을 지정할 수있다. url을 사용해서 외부 사진을 불러오거나 배경 색깔을 지정해 꾸밀 수 있다.

 

 

 

 

코드 예제 참조

<style>
    
    .box {
      width: 550px;
      height: 350px;
      border: 4px dashed gray;
      margin: 50px auto; 
      

	  /* 배경 색을 지정할 수 있다. */
      background-color: rgb(246, 133, 27);
      
      
      /* url을 사용해서 배경 이미지를 지정 할 수 있다. */
      background-image: url(../../img/sky.jpg);
      
      /* 배경 이미지 사이즈 조정 */
      /* width height */ 
      background-size: 100px 100px;
      background-repeat: no-repeat;

      /* 배경 이미지 위치 조정 */
      /* x축 y축  */
      background-position: 300px center;

      background: no-repeat
      red url(../../img/sky.jpg)
      left center / 200px 70px 
      
      ;
    
    
    }


    </style>

 

 

 

 

 

 

이미지를 넣기 위해서는 박스 코드 안에 액자코드 를 만드는 작업이 우선 필요하다. html에서 마크업을 해준뒤 아래 코드를 참고하면 된다.

 

코드 예제 참조

 

  <style>
    .box {
      /*사진 액자 400 x 300 - 4 : 3 */
      width: 400px;
      height: 300px;
      border: 2px solid red;
      margin: 50px auto;

      /* 사진 사이즈 600 x 385 - 3 : 2 */
      /*             400 x 260   */
      /*             450 x 300   */
      background-image: url('../../img/tulip.jpg');
      background-repeat: no-repeat;
      /* contain 가로기준 cover 세로기준 꽉 채우기 */
      background-size: cover;
      /*위치 옮기기*/
      background-position: -50px 0;
      
    }



  </style>

 

 

 

 

background attachment

  <style>

    .box {
      width: 90%;
      height: 700px;
      margin:200px auto;
      background: url('../../img/sky.jpg')
        no-repeat fixed center/cover;
        /* background-attachment: fixed; */
    }
  </style>

 

위 코드를 사용하면 스크롤을 움직여도 fix된 배경화면을 확인 할 수 있다. 중요하게 보아야 할 점은 

background: url('') no-repeat fixed center/cover 

에서 center 부분은 위치를 cover 부분은 꽉채울건지 아니면 contain으로 붙일건지를 정하게 된다. 입력 순서를 지켜야한다.

 

 

 

 

Float (박스띄우기)

 

<style>

    .box {
      width: 150px;
      height: 150px;
      background: orange;
      border: 4px solid tomato;
      font-size: 50px;
      font-weight: 700;
      margin: 10px;
      border-radius: 20px;
      
      
      /* 박스 수평 배치 */
      float : left;
    }

    /* 
      3열 : 3n + 1
      x열 : xn + 1
    */


    .box:nth-child(3n + 1) 
    {
    /* 수평 배치 해제 */
      clear : both;
    }
  </style>

 

 

 

 

좌우 수평배치가 필요할 경우에 float 명령어를 사용하며 예를들어 너비설정 100%의 컨테이너가 있고 메뉴와 본문이 있다면. 각각 20% 80% 등 경우에 따라 맞춰 주면 된다. 그 때 float이 쓰인다. 

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}

 

 

주의 해야할 점은 해제를 꼭 해줘야 한다는 점이다.  위와 같은 가상 클래스를 하나 작성해서 방지하면 된다!