CSS 기초

박스모델

width, height, padding, border, margin
html 문서는 박스 형태로 되어있다

박스가 일정한 형태로 모델이 구성되기 때문에 박스 모델로 불린다

content

• 이 박스에 가로가 width, 세로는 heigth를 담당한다

padding

• content와 border 사이에 안쪽 여백 공간을 표현하는 것을 일컫는다 테두리사이 공간을 주는 것
  css에 padding:top 20px를 작성하면 content 기준으로 위로 20px 밀려나게 된다

border

• 테두리를 나타낸다 어떤 테두리가 원하는지 알려줘야한다 ( 굵기, 스타일, 색상 ) 등
• 1px solid #222

margin

• 바깥 쪽 여백을 뜻하며 요소와 요소 사이의 간격을 나타낸다

<div class="box">
      box
</div>

.box {
    width: 300px;
    height: 300px;
    background-color: #fff;
    padding-left: 30px;
}

border를 적용. 먼저 굵기를 정해야하고 색상과 테두리를 지정해주지 않으면 결과값이 정확히 나오지 않는다

.box {
    width: 300px;
    height: 300px;
    background-color: #fff;
    padding-left: 30px;
    border: 6px solid blueviolet;
}

border-radius는 테두리를 깍을 수 있는 속성이다 전체 테두리를 깍거나 한쪽만 깍을 수도 있다

.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 100px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
/* 단선(실선)으로 표시 */
.card-1 {
    border: 5px solid #f0f;
}
/* 파선으로 표시 */
.card-2 {
    border: 5px dashed #f0f;
}
/* 복선(이중선)으로표시 */
.card-3 {
    border: 5px double #f0f;
}
/* 튀어 나와 보이는(돌출)로 표시 */
.card-4 {
    border: 5px ridge #f0f;
}
/* 들어가 보이도록 표시 */
.card-5 {
    border: 5px groove #f0f;
}
/* 보더 안쪽이 움푹 패여 보이게 표시 */
.card-6 {
    border: 5px inset #f0f;
}
/* 보더 안쪽이 튀어 나와 보이게 블록형으로 표시 */
.card-7 {
    border: 5px outset #f0f;
}
/* 점선으로 표시 */
.card-8 {
    border: 5px dotted #f0f;
}
/* 표시하지않음 (경계가 겹치는 경우에 우선) */
.card-9 {
    border: 5px hidden #f0f;
}
/* (표시하지 않음) */
.card-10 {
    border: 5px none;
}

속기형 작성법

빠르게 쓰기 라는 형식이다 전체 여백을 줄 때, 다른 값을 넣을 때 작성
10px(top) 20px(right) 30px(bottom) 40px(left) 시계 방향 순서

margin 10px 20px 이렇게 지정한다면, 10px은 상하, 20px는 좌우 값이 같이 적용된다

박스모델

width, height, padding, border, margin
html 문서는 박스 형태로 되어있다

박스가 일정한 형태로 모델이 구성되기 때문에 박스 모델로 불린다

content

• 이 박스에 가로가 width, 세로는 heigth를 담당한다

padding

• content와 border 사이에 안쪽 여백 공간을 표현하는 것을 일컫는다 테두리사이 공간을 주는 것
  css에 padding:top 20px를 작성하면 content 기준으로 위로 20px 밀려나게 된다

border

• 테두리를 나타낸다 어떤 테두리가 원하는지 알려줘야한다 ( 굵기, 스타일, 색상 ) 등
• 1px solid #222

margin

• 바깥 쪽 여백을 뜻하며 요소와 요소 사이의 간격을 나타낸다

<div class="box">
      box
</div>

.box {
    width: 300px;
    height: 300px;
    background-color: #fff;
    padding-left: 30px;
}

border를 적용. 먼저 굵기를 정해야하고 색상과 테두리를 지정해주지 않으면 결과값이 정확히 나오지 않는다

.box {
    width: 300px;
    height: 300px;
    background-color: #fff;
    padding-left: 30px;
    border: 6px solid blueviolet;
}

border-radius는 테두리를 깍을 수 있는 속성이다 전체 테두리를 깍거나 한쪽만 깍을 수도 있다

.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 100px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
/* 단선(실선)으로 표시 */
.card-1 {
    border: 5px solid #f0f;
}
/* 파선으로 표시 */
.card-2 {
    border: 5px dashed #f0f;
}
/* 복선(이중선)으로표시 */
.card-3 {
    border: 5px double #f0f;
}
/* 튀어 나와 보이는(돌출)로 표시 */
.card-4 {
    border: 5px ridge #f0f;
}
/* 들어가 보이도록 표시 */
.card-5 {
    border: 5px groove #f0f;
}
/* 보더 안쪽이 움푹 패여 보이게 표시 */
.card-6 {
    border: 5px inset #f0f;
}
/* 보더 안쪽이 튀어 나와 보이게 블록형으로 표시 */
.card-7 {
    border: 5px outset #f0f;
}
/* 점선으로 표시 */
.card-8 {
    border: 5px dotted #f0f;
}
/* 표시하지않음 (경계가 겹치는 경우에 우선) */
.card-9 {
    border: 5px hidden #f0f;
}
/* (표시하지 않음) */
.card-10 {
    border: 5px none;
}

속기형 작성법

빠르게 쓰기 라는 형식이다 전체 여백을 줄 때, 다른 값을 넣을 때 작성
10px(top) 20px(right) 30px(bottom) 40px(left) 시계 방향 순서

margin 10px 20px 이렇게 지정한다면, 10px은 상하, 20px는 좌우 값이 같이 적용된다