2022.09.22.boxmodelBorder.md

9월22일 css 박스모델(box model)의 기본 구성

• 실제 콘텐츠 영역 : 맨안쪽
• 패딩(padding) : 콘텐츠 영역과 테두리 사이의 여백
• 테두리(border)
• 마진(margin) : 요소와 요소 사이의 여백

• width, height 속성 : px, %, auto
• calc() 함수 : 화면 전체 너비에서 80px을 뺀 크기를 박스 모델의 너비로 지정

  width: calc(100% - 80px);

테두리 스타일 속성

• border-style 속성 : none, hidden, solid, dotted, dashed, double, (groove, inset, outset, ridge)-양각음각
• border-width 속성 : border-top-width, border-right-width, border-bottom-width, border-left-width(시계방향, 반대편값) 키워드 : thin, medium, thick; 크기 : px
• border-color 속성 : border-top-color, border-right-color, border-bottom-color, border-left-color
• border-radius 속성 : border-radius : 10px; 또는 border-radius: 50%;
• 방향마다 다른 border-radius 지정 : border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
• 테두리에 이미지 넣기 : 1단계 4귀퉁이 이미지 넣기

      .box {
      width:300px; 
      height: 300px;
      background-color: #eee;
      border: 36px solid orange;
      border-image-source : url('images/border.png’);
      }

• 2단계 : border-image-slice 속성 : border-image-slice : 27;
• 3단계 : border-image-repeat 속성 : border-image-repeat: repeat; round; space;
• 4단계 : border-image-width 속성 : border-image-width : 27px; 원래 테두리 너비보다 작게 해야함
• 박스 외부에 테두리표시 : border-image-outset 속성 border-image-outset: 50px;
• border-image 속성 : border-image-source border-image-slice / border-image-width / border-image�outset border-image-repea
• border-image 축약형 속성 :border-image: url('images/border.png') 27(slice) / 27px(width) / 50px(outset) round;

여백과 관련된 스타일 속성

• padding 속성 : padding-top, padding-right, padding-bottom, padding-left(시계방향, 반대편값) px
• margin 속성 : margin-top, margin-right, margin-bottom, margin-left(시계방향, 반대편값) px, %, auto
• margin 속성을 사용해 가운데 정렬하기 : margin-left와 margin-right의 속성값을 auto로 지정
• 마진 중첩(margin overlap)이란 요소를 세로로 배치할 경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐진다
• outline 속성 : 박스 모델 바깥에 선을 그리는 속성 outline-style : 선 모양 (필수), outline-color : 선 색상, outline-width : 선 두께, outline : 2px solid red;
• box-sizing 속성 : box-sizing: border-box;
• CSS 리셋 : 브라우저 기본 스타일을 수정하는 소스 :전체 선택자(*)를 사용해 기본적인 속성만 리셋함
• box-shadow 속성 : 수평, 수직, 흐림, 번짐, 색상, inset

포지셔닝

• display 속성 : block, inline, inline-block, none
• inline과 inline-block 차이 비교하기 : 위,아래쪽 마진의 차이
• display: none(내용이 있을 경우 만 표시) / visibility: hidden 사용자가 선택 전까지 표시안함
• float 속성 : left, right, none