css_display

display

• 블록 레벨 요소
  자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
  ed) div, p, hi
• 인라인 요소
  자기에게 필요한 만큼의 공간만 차지하여 그 외의 공간들을 비워둠
  ex) span, a
  

css에서 어떠한 요소가 블록으로 사용될지, 인라인으로 사용될지 따로 지정해줄 수 있음
=> display : 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의. 즉, 요소의 유형을 변경할 수 있음

div{
display: inline;
}
//블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶을 때

a{
display: block;
}
//인라인 요소인 a 요소를 블록 레벨로 처리하고 싶을 때

width, height 값 지정 시, block & inline의 차이점

• block의 경우 width, height 값 변경 가능
  => 블록레벨 요소의 경우, content 크기를 따로 지정하면 너비를 다 차지하기 위해서 margin을 확장한다
• padding, margin 적용 가능
• inline의 경우 width, height 값 변경 불가능
  
  

inline-block

display: inline-block;

• 요소의 공간 차지는 inline 처럼 됨(필요한 만큼만 차지)=>inline 특징
• width, height 처럼 크기 지정 요소를 사용할 수 있게 된다.=>block 특징

=> 따라서 블록 레벨 요소를 이용하여 옆으로 늘어지는 레이아웃을 만들 때 많이 사용됨

display 속성의 대표적 설정

• none : 요소를 화면에 표시하지 않음

display: none;
//코드 & 개발자 도구에서는 보이지만 화면 상에서는 안 보임
//none 적용 요소를 제외한 다른 부분들은 보이게 되고 화면 상에서 none 적용 요소들은 아예 없는 것처럼 렌더링 됨

• block : 요소를 블록 레벨 요소로 만듦

span{
	display: block;
}
//span의 블록화

• inline : 요소를 인라인 요소로 만듦

p{
	display: inline;
	width: 100px;
    height: 100px;
}

//inline의 경우 width & height가 적용 안됨
//block 레벨 요소의 경우 content 영역 크기를 따로 지정하면
//너비를 다 차지하기 위해서 margin을 확장한다

• inline-block : 요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가
  (inline은 자기에게 필요한 공간만 차지->
  따라서 width & height를 적용해도 안 먹힘. block 접미사를 붙이면 자기가 필요한 공간만 차지하더라도 width & height가 먹히게 됨)

display: inline-block;
//요소 공간 차지는 inline 만큼 됨
//width & height 처럼 크기 지정에 필요한 속성을 쓸 수 있게 됨
//=> 블록 레벨 요소를 이용하여 옆으로 늘어지는 레이아웃을 만들 때는
inline-block 을 많이 사용함