코딩일기

display : 배치 방법 결정

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 

display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용되고, 이미지를 표 형태로 배치할 수도 있다.

• block : 인라인 레벨 요소를 블록 레벨 요소로 만든다.
• inline : 블록 레벨 요소를 인라인 레벨 요소로 만든다.
• inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
• none : 해당 요소를 화면에 표시하지 않는다.

  <style>
     ul li {
      display: inline-block;      
      padding: 20px;
      margin: 0 20px;
      border: 1px solid #222;
    }
  </style>

float : 왼쪽이나 오른쪽으로 배치

문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 때 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러 싸도록 할 수 있다. (<p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다)

float 속성은 웹 요소를 왼쪽이나 오른쪽 구석에 배치되게 만들 수 있다.

• left : 해당 요소를 문서의 왼쪽에 배치한다.
• right : 해당 요소를 문서의 오른쪽에 배치한다.
• none : 좌우 어느 쪽에도 배치하지 않는다. (기본값)

  <style>
    img {
      float:left;
      margin-right:40px;
    }
  </style>

clear : float 속성 해제

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다.

이 때 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.

• left : float: left 를 해제한다.
• right : float: right 를 해제한다.
• both : float: legt 와 float: right 를 해제한다.

<style>
  #box {
    clear:left;
  }
</style>

margin : 요소 주변의 여백을 설정

margin: <크기> | <백분율> | auto

마진(margin)이란 요소 주변의 여백을 의미한다. 즉 마진을 이용하면 요소와 요소 사이의 간격을 조절할 수 있다.

한번에 4개 방향에 지정할 수도 있고 margin 다음에 하이픈( - )을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있다.

• <크기> : 너빗값이나 높잇값을 px이나 em같은 단위와 함께 수치로 지정한다. 
• <백분율> : 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정한다. 
• auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다.

<style>
  #margin1 {
    margin:50px;
  }
  #margin2 {
    margin:30px 50px
  }
  #margin3 {
    margin:30px 20px 50px
  }
  #margin4 {
    margin:30px 50px 30px 50px;
  }
</style>

• margin1 : 속성값이 1개일 경우 4개 방향의 마진 모두 같은값(50px)
• margin2 : 속성값이 2개일 경우 첫 번째 값(30px)이 top, bottom 마진의 값이 되고,
  두 번째 값(50px)이 left, right 마진의 값이 적용된다.
• margin3 : 속성값이 3개일 경우 순서대로 top(30px) → right(20px)→ bottom(50px)의 속성값이 되고,
  마지막 left의 속성값은 마주보는 right 속성값(20px)과 똑같이 적용된다.
• margin4 : 속성값이 4개일 경우 순서대로 top(30px) → right(50px)→ bottom(30px) → left(50px)의 값이 적용된다.

margin 속성을 사용하여 웹 문서를 가운데 정렬하기

margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 너빗값이 정해져 있는 상태에서 margin-left와 margin-right의 속성값을 auto로 지정해야한다. 이렇게 지정하면 CSS는 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산한다.

  <style>
    #container {
      width:600px;
      margin:20px auto;
    }
  </style>

마진 중첩

요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 현상을 마진 중첩(margin overlap) 혹은 마진 상쇄(margin collapse)라고 한다.

이는 맨 위의 마진과 맨 아래의 마진에 비해 중간에 있는 마진이 지나치게 커지는 것을 방지하기 위한 것이다.

  <style>
    div {
      width:200px;  
      height:100px;  
      margin:30px; 
        }
    #box1 {
      background:rgb(0, 77, 243);
    }
    #box2 {
      background:rgb(255, 72, 0);
    }
    #box3 {
      background:rgb(18, 219, 0);
    }
  </style>

각 박스 사이의 마진이 30px씩 있기 때문에 60px만큼의 여백이 생길 것 같지만 실제로는 30px 2개가 겹쳐서 최종 마진은 30px만큼만 만들어진다.

padding : 콘텐츠와 테두리 사이의 여백을 설정

패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 즉 테두리 안쪽의 여백이라고 생각하면 된다.

패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같다. 

한번에 4개 방향에 지정할 수도 있고 padding 다음에 하이픈( - )을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있다.

  <style>
    #padding1 { 
      padding:20px 30px 40px 50px;  
    }
    #padding2 {
      padding:20px 30px;
    }
    #padding3 {
      padding:20px;
    }
  </style>

테두리 스타일은 점선인지 실선인지 뿐만 아니라 테두리 두께와 색상을 지정할 수 있다. 또한 네 방향 모두 각각 다르게 사용하는 등의 다양한 스타일을 지정할 수 있다.

박스 모델의 방향

박스 모델은 상하좌우 4개의 방향이 있어서 테두리나 마진, 패딩 등을 지정할 때 모두 한번에 똑같이 지정하거나, 다르게 지정할 수 있다. 

맨 윗부분은 top, 오른쪽은 right, 아랫부분은 bottom, 왼쪽은 left 라고 부른다.

border-style : 테두리 스타일 지정

기본값이 none이므로 속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다.

만약 테두리 스타일을 4개 방향 모두 다르게 지정하고 싶다면 border와 style 사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하면 된다. ex) border-top-style

• none : 테두리가 없다. (기본값)
• hidden : 테두리를 감춘다. 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않는다.
• solid : 테두리를 실선으로 표시한다.
• dotted : 테두리를 점선으로 표시한다.
• dashed : 테두리를 짧은 직선으로 표시한다.
• double : 테두리를 이중선으로 표시한다. 두 선 사이의 간격이 border-width값이 된다.
• groove : 테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 듯 입체 느낌이 난다.
• ridge : 테두리를 창에서 취어나온 것처럼 표시한다.
• inset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고,
  표에서 border-collapse: collapse일 경우 groove와 똑같이 표시된다.
• outset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고,
  표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시된다.

border-width : 테두리 두께 지정

border-width: <크기> | thin | medium | thick

테두리 두께를 지정할 때는 1px이나 5px처럼 크기를 직접 입력할 수도 있고 thin이나 medium, thick 같은 예약어 중에서 선택할 수도 있으며 thin < medium < thick 순으로 두꺼워진다. 

만약 테두리 두께를 4개 방향 모두 다르게 지정하고 싶다면 border와 width 사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하면 된다.

border-width 속성을 사용해서 상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정할 수 있는데, 이때 값을 1개에서 4개까지 각각 다르게 지정할 수 있다.

  <style>
    #box1 { border-width:2px; }
    #box2 { border-width:thick thin; }
    #box3 { border-width:thick thin thin; }
    #box4 { border-width:10px 5px 5px 10px; }
  </style>

• box1 : 속성값이 1개일 경우 4개 방향 테두리 모두 같은 값이 적용된다.
• box2 : 속성값이 2개일 경우 첫 번째 값(thick)이 top, bottom 테두리의 값이 되고,
  두 번째 값(thin)이 left, right 테두리의 값이 적용된다.
• box3 : 속성값이 3개일 경우 순서대로 top → right → bottom의 속성값이 되고,
  마지막 left의 속성값은 마주보는 right 속성값과 똑같이 적용된다.
• box4 : 속성값이 4개일 경우 순서대로 top → right→ bottom→ left의 값이 적용된다.

border-color : 테두리 색상 지정

4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고, border와 color사이에 상하좌우 방향을 넣고 하이픈( - )으로 연결하여 하나씩 지정할 수도 있다.

<style>
  #box1 { border-color:red; }  
  #box2 { 
    border-top-color:blue; 
    border-left-color:red;  
  } 
</style>

boder : 테두리 스타일 묶어서 지정 

테두리의 스타일, 두께, 색상을 한꺼번에 표현한다.

border속성만을 사용해서 4개 방향의 테두리 스타일을 같게 지정할 수도 있고, border뒤에 하이픈( - ) 을 넣고 상하좌우 방향을 입력하여 다르게 지정할 수도 있다.

<style>
  h1 {
    padding-bottom: 5px;
    border-bottom: 3px solid rgb(75, 70, 70);
  }
  p {
    padding: 10px;
    border: 3px dotted blue; 
  }
</style>
...

border-radius : 둥근 테두리 만들기

border-radius: <크기> | <백분율>

테두리의 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리하는 속성으로, 원의 반지름(radius)을 이용하여 둥근 정도를 나타낼 수 있다.

테두리를 원 형태로 만들고 싶을 때는 너비와 높이를 똑같이 만든 후 border-radius의 반지름 값을 너비나 높이의 50%로 지정하면 된다.

• 크기 : 반지름 크기를 px, em의 단위와 함께 수치로 표시
• 백분율 : 현재 요소의 크기를 기준으로 비율(%)로 지정

꼭짓점 4개를 모두 다르게 지정하고 싶다면 border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용할 수 있다.

윗부분 왼쪽은 top-left, 윗부분 오른쪽은 top-right, 아랫부분 왼쪽은 bottom-left, 아랫부분 오른쪽은 bottom-right 라고 한다.

<style>
  #round1 {
    border:2px solid blue;
    border-top-left-radius:20px;  
    border-top-right-radius:20px;  
  }    
</style>

타원형의 테두리를 만들고 싶다면 반지름 대신 타원의 가로 반지름값과 세로 반지름값을 넣어주면 된다.

이때 가로 반지름과 세로 반지름 사이에 슬래시( / )를 넣어 구분하고, 특정한 꼭짓점만 타원 형태로 만들고 싶다면 슬래시 없이 지정한다.

border-radius: <가로 반지름> / <세로 반지름> ;

border-위치-radius: <가로 반지름> <세로 반지름> ;

<style>
  .round1{
    border-radius : 50px/30px; 
  }
  .round2{
    border-bottom-right-radius : 50% 30%; 
  }
  .round3{
    border-top-left-radius: 50px 30px; 
  }
  .round4{
    border-bottom-left-radius: 30px;  
  }
</style>

• .round1 : 네 군데 꼭짓점을 똑같은 크기로 라운딩
• .round2 : 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩
• .round3 : 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩
• .round4 : 값이 하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩

CSS 박스모델(box model)이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 말한다. 박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어있으며 이 박스 모델이 모여 웹 문서를 이룬다.

블록 레벨 요소와 인라인 레벨 요소

• 블록 레벨(block-level) 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지
  한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻과 같다. 즉 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
  대표적인 태그로 <h1>, <div>, <p> 등이 있다.
  
  
• 인라인 레벨(inline-level) 요소 : 태그를 사용해 요소를 삽입했을 때 콘텐츠만큼만 영역을 차지
  블록 레벨 요소와 다르게 콘텐츠 만큼만 영역을 차지하기 때문에 나머지 공간에 다른 요소가 올 수 있다. 즉 한 줄에 여러개의 인라인 레벨 요소를 표시할 수 있다. 
  대표적인 태그로 <span>, <img>, <strong> 등이 있다.

박스 모델의 기본 구성

박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성된다. 이때 마진이나 패딩은 웹 문서에서 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다.

width, height : 콘텐츠 영역의 크기 지정

박스 모델에서 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.

width와 height의 속성값은 다음과 같다.

• <크기> : 너비나 높이의 값을 px이나 em단위로 지정
• <백분율> : 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정
• auto : 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정 (기본값)

box-sizing : 박스 모델의 크기 지정 방법 설정

box-sizing : border-box

콘텐츠 영역의 크기 뿐 아니라 패딩과 테두리의 값을 포함해서 박스 모델의 크기를 넣어야 할 때 사용한다.

• border-box : 테두리까지 포함해서 너빗값을 지정
• content-box : 콘텐츠 영역만 너빗값을 지정 (기본값)

box-shadow : 박스 모델에 그림자 효과 삽입

box-shadow : <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

이미지 또는 <div>와 같이 전체 영역에 지정하여 넣을 수 있다.

• <수평 거리> : 그림자가 가로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다. (필수 속성)
• <수직 거리> : 그림자가 세로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만든다. (필수 속성)
• <흐림 정도> : 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없다. (기본값 : 0)
• <번짐 정도> : 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시되고, 음숫값을 사용하면 모든 방향으로 그림자가 축소되어 보인다. (기본값 : 0)
• <색상> : 한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있다. (기본값 : 검은색)
• inset : 이 키워드를 함께 표시하면 안쪽 그림자로 나타낸다.