인라인이냐 블록이냐 display & border
블록 레벨 요소 VS 인라인 요소
블록 레벨 요소 |
인라인요소 |
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. [div, p,h1] |
자기에게 필요한 만큼의 공간만 차지한다 [span,a] |
만약 반대로 인라인 요소가 a태그가 블록을 형성하고 싶어
그럴 때 사용하는 방법은?
display 속성 (사용하기) : display 에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의한다.
div{ display: block} a{display:block}
- inline : 인라인으로 처리한다. [필요한영역]
- block : 블록레벨로 처리한다. [전체영역]
- inline-block: 인라인으로 배치하되, 블록레벨요소의 속성을 추가할 수 있도록 처리한다.
- none: 디스플레이 (표시)하지 않는다.
Border속성. 테투리 영역을 그려준다.
테두리 두께 모양 크기 등을 지정하는데 이런 속성을'단축속성이라고한다'
span{ border: 2px solid green} 스판태그
두께가 2px인 직선 모양 soli 의 초록 테두리를 만들어줘
Border 속성의 하위 속성
- border 속성에 지정하는 값들을 따로따로 지정할 수 있다.
- border color color 정의 방식과 동일
- border width thin medium thick 등 키워드 px em rem등 단위
- border -style 기본값 none 직선solid 점선dotted 긴 점선dashed
- none 눈으로 안보이지만 검사시에 보인다 .
border: 1px solid red(color)
정리
- display 속성은 요소의 블록, 인라인 여부를 변경처리 가능
- display 속성은 요소를 배치할 레이아웃 을 결정할 때도 사용한다.
- border 속성은 요소가 차지하는 영역에 테두리를 그릴수 있다.
- border는 여러가지 속성을 함께 정의할 수 있는 '단축속성'이다.
- border 하위속성 border-style, border-width, border-color이다.
'Coding 🖐🏻 > html,css' 카테고리의 다른 글
CSS 05 박스 모델 box-sizing 기본 (0) | 2023.11.10 |
---|---|
CSS 04 Box-model 박스 모델 & 패딩 마진 (0) | 2023.11.10 |
CSS 02 텍스트 꾸미기 속성 (0) | 2023.11.10 |
CSS 01 CSS란? & 선택자 (0) | 2023.11.10 |
html, css 포지션position : relative ,absolute (1) | 2022.10.25 |