[CSS] CSS 박스 모델

CSS와 box model

• box-sizing : 박스 모델의 크기를 계산
  • border-box : 테두리까지 포함해서 너빗값 ( 총 너비 = width+2(margin+padding+border) )
  • content-box : 콘텐츠 영역만 너비값을 지정 (default)
• box-shadow : 박스 모델에 그림자 효과
  • box-shadow : <수평거리> <수직거리> <흐림정도> <번짐정도> <색상> inset

테두리 스타일

• border: <크기> <테두리> <색>
• border-style : solid | dotted | dashed | double
• border-width : <크기> | thin | medium | thick
• border-color
• border-radius : 둥근 테두리
  • 50% 👉 원 형태의 이미지 생성

여백을 조절하는 속성

• margin
  • 웹 문서를 가운데 정렬하기 👉 margin-left: auto margin-right: auto 로 설정
• padding

웹 문서의 레이아웃 만들기

• display : block | inline | inline-block
  • 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능. 주로 메뉴 항목을 가로로 배치할 때 사용.
• float : left | right
  • 주로 이미지를 표시하고 왼쪽에 텍스트를 배치할 때 사용
• clear : float 속성을 해제

/* 2단 레이아웃 만들기 */
             #container{
                width: 1200px;
                margin: 20px auto;
            }
            #header {
                width: 100%;
                height: 120px;
                background-color: #acacac;
            }
            #sidebar{
                width: 300px;
                height: 600px;
                background-color: #e9e9e9;
                float: left;
            }
            #contents{
                width: 900px;
                height: 600px;
                background-color: #f7f7f7;
                float: left;
            }
            #footer{
                width: 100%;
                height: 100px;
                background-color: #888888;
                clear: left;
            }

코드 실행결과

웹 요소의 위치 지정하기

• position : static | relative | absolute | fixed
  • static : 기본값. top/bottom/left/right 적용 X
  • relative : top/bottom/left/right 적용하여 위치값 지정
  • absolute : relative 값을 사용한 상위 요소를 기준으로 위치 지정(top/bottom/left/right)
  • fixed : 브라우저 창을 기준으로 위치를 지정(top/bottom/left/right)해 배치. 스크롤 하더라도 항상 같은 위치

/* 배경 위에 글자 표시하기 */
#contents{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background: url(../images/pineapple.jpg) no-repeat;
            background-size: cover;
            position: relative;
}
h1 {
            color: white;
            position: absolute;
            top: 100px;
            left: 100px;
}

 

 

 

결론 : 그냥 부트스트랩 써 !