display 속성과 border 속성
블록 레벨 요소
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
MDN-블록 레벨 요소
해당 태그를 설정하면 항상 새로운 줄에서 시작하며 자신이 속한 영역의 너비를 모두 차지하여 블록을 만든다.
인라인 요소
인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
MDN-인라인
자신이게 필요한 만큼의 공간만 차지한다.
display 속성
요소를 블록과 인라인 요소 중 어떤 레이아웃으로 처리할지 지정한다.
inline : 인라인으로 지정
block : 블록 레벨로 지정
inline-block : 인라인으로 지정하되 블록 레벨 요소의 속성을 추가할 수 있도록 지정
none : 디스플레이(표시)하지 않는다. 요소자체는 문서에 존재한다.
블록 레벨 요소인 div 태그를 인라인 요소처럼 사용하기 위함
인라인 요소인 a 태그를 블록 레벨 요소처럼 사용하기 위함
[style.css]
div {
display : inline;
}
a {
display: block;
}[index.css]
<body>
<div>
<div>가나다라마바사</div>
<a>가나다라마바사</a>
</div>
</body>
border
요소가 차지하고 있는 영역에 테두리를 그릴 수있다.
border-color : color 정의 방식과 동일
border-width : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
border-style : none(기본 값), solid(직선), dotted(점선), dashed(긴 점선) 등
[style.css]
span {
border : 3px solid red;
}[index.html]
<body>
<div>
<span>가나다라마바사</span>
</div>
</body>
좋은 개발자가 되고싶은