##display속성 & border 속성
블록 레벨 요소:자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
인라인 요소:자기에게 필요한 만큼의 공간만 차지
display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
속성값:inline, block, inline-block, none
boder속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
속성값으로 테두리 두께,모양,크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.
속성값:boder-color, boder-width, boder-style
실습
<style>
div{border: 1px solid red;
display:inlin;
}
span{
border-width: 5px;
border-style: dashed;
border-color: rgb(100%,50%,0%)
display:block;
}
</style>
<div>블록 레벨</div>
<span>인라인</span>##박스모델
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
이 영역을 '박스'라 표현하며 css는 박스의 크기,위치,속성을 결정할 수 있다.
하나의 박스는 다음 네개의 영역으로 구성된다.
콘텐츠 영역:width,height, 안쪽 여백:paddinf, 경계선:border-width, 바깥쪽 여백:margin
width와 height는 인라인 영역에 영향을 주지 못한다.(display로 인라인블록으로 바꾸면 width와 height를 적용시킬수있다.)
실습
<style>
div{
border:3px solid red;
padding:10px;
margin:20px
width:90px; height:35px;
}
</style>
</head>
<body>
<div>요소의 콘텐츠</div>
<span>check</span>
</body>
잃어버린 한쪽 에어팟