[CSS] 박스모델

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

---

block, inline, inline-block

앞에

에 글을 작성할 경우 자음

태그에서는 자동으로 줄 바꿈이 되는것을 볼수 있었습니다.

h1,h2,h3...와 같은 제목태그와 p태그의 경우에도 태그가 닫히고 난 이후 줄바꿈이 되었습니다.

각각의 범위를 보겠습니다.

<h1>이디야 커피 생각보다 비싸다</h1>
<p>크림샷라떼가 4300원이다</p>
<div>하지만 맛있다</div>
<p>텀블러 할인을 받으면 200원이 할인이 된다</p>

h1 {
    background: gray;
}

p {
    background: skyblue;
}

div {
    background: yellowgreen;
}

모든 태그가 글이 끝나도 끝까지 범위를 차지하고, 다음이 시작되면 줄이 바뀐다.

span태그를 살펴보자

<h1>이디야 커피 생각보다 비싸다</h1>
<p>크림샷라떼가 4300원이다</p>
<span>하지만</span> <span>맛있다</span>
<p>텀블러 할인을 받으면 200원이 할인이 된다</p>

h1 {
    background: gray;
}

p {
    background: skyblue;
}

span {
    background: lightpink;
}

span의 경우 다음 span이 줄바꿈이 나타나지 않으면 범위도 글이 종료될때로 고정된다.

이러한 줄바꿈이 나타나고 범위를 처음부터 끝까지 가져가는 박스를 block박스,

줄바꿈이 나타나지 않고 범위는 글이 끝날때로 고정되있는 span같은 박스를 inline박스라 한다.

block

• 줄바꿈 일어남
• 기본으로 갖는 너비 (width) : 100%
• width, height 사용 가능

inline

• 줄바꿈 일어나지 않음
• 기본 너비 : 글자가 차지하는 만큼
• width, height 사용 불가

inline-block

• 줄바꿈이 일어나지 않음 (inline특징)
• 기본 너비 글자가 차지 하는 만큼 (inline특징)
• width, height 사용 가능 (block특징)

<h1>이디야 커피 생각보다 비싸다</h1>
<p>크림샷라떼가 4300원이다 텀블러 할인을 받으면 <span>200원</span>이 할인이 된다</p>

h1 {
    background: gray;
}

p {
    background: skyblue;
    width: 200px;
    height: 100px;
}

span {
    background: lightpink;
    height : 300px;
}

p태그의 경우 block박스이니 weight과 height의 영향을 받지만 span은 아니다.

이런경우 inline 박스인 span태그를 inline-block으로 변환하면 weight과 height을 영향 받게 할수 있다.

display : inline-block;

span {
    background: lightpink;
    display: inline-block;
    height : 300px;
}

박스 구성 요소

border

각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인학 수 있고도록 만든다.

p{
    border: 1px solid red;
}

다음과 같이 입력하면 p요소에 1px 빨간 실선이 생긴다.

border에 대한 추가 공부

테두리를 점선으로 만드는 방법은?

border을 사용 할때
border: 선_두께 스타일 색상; 순서로 작성하였습니다.
그럼 점선은 스타일이기 때문에 점선으로 만드는 스타일을 알면됩니다.
dashed를 스타일에 적어주면 됩니다.

테두리를 둥근 모서리로 만드는 방법은?

위방법으로 가능하면 좋겠지만, border속성에는 테두리를 동그랗게 만드는 속성이 없다고 한다.
그래서 새로운 속성이 필요합니다.
border-radius
여기에 px과 같은 단위의 숫자를 입력하면 테두리가 동글동글 해집니다.

p {
    border: 2px dashed deepskyblue;
    border-radius: 10px;
}

박스 바깥쪽에 그림자를 넣기

box-shadow를 사용합니다 !
box-shadow : x값 y값 블러정도 색상; 꼴로 사용합니다.

p {
    background: white;
    border: 2px dashed deepskyblue;
    border-radius: 10px;
    box-shadow: 5px 5px 5px blueviolet;
}