CSS 03 display & block

인라인이냐 블록이냐 display & border

블록 레벨 요소 VS 인라인 요소  

블록 레벨 요소	인라인요소
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. [div, p,h1]	자기에게 필요한 만큼의 공간만 차지한다 [span,a]

 

 

만약 반대로 인라인 요소가 a태그가 블록을 형성하고 싶어

그럴 때 사용하는 방법은?

 

display 속성 (사용하기) : display 에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.
display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의한다.

 

div{ display: block} a{display:block}

1. inline : 인라인으로 처리한다. [필요한영역]
2. block : 블록레벨로 처리한다. [전체영역]
3. inline-block: 인라인으로 배치하되, 블록레벨요소의 속성을 추가할 수 있도록 처리한다.
4. 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이다.