display inline & block

display 속성

CSS에서 레이아웃을 제어하기 위한 가장 중요한 속성
모든 요소에는 요소의 유형에 따라 기본 표시값이 있다

block (레벨) 엘리먼트

block요소에 width를 설정하면 좌우 가장자리 끝으로 늘어나지 않게 된다
좌우 margin을 0으로 설정하면 해당 요소를 (부모요소로 지정한) 컨테이너 박스 안에서 가운데(중앙) 정렬이 가능해진다

만약, 브라우저 창 너비 < 요소의 너비

width 속성대신 max-width를 사용해서 브라우저가 작은 창일 때 처리하는 방식으로 개선하면 된다

박스 모델

요소의 너비를 설정할 때
요소의 테두리 border, padding 을 같이 지정하면
해당 요소는 늘려져서 실제로 설정한 것보다 더 크게 나타날 수 있다

.sample {
	width: 500px;
	margin: 20px auto;
}

. fancy {
	width: 500px;
    margin: 20px auto;
    padding: 50px;
    border-width: 10px;
}

inline 엘리먼트

단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트로 감쌀 수 있다

inline-block

1. inline-block 요소는 vertical-align 속성의 영향을 받는다
   • 이때 이 요소는 top으로 설정한다
2. 각 요소의 너비를 설정해야 한다
3. HTML의 각 요소 사이에 공백이 있다면 요소 사이에 간격이 생긴다

nav {
	display: inline-block;
    vertical-align: top;
    width: 25%;
}

.column {
	display: inline-block;
    vertical-align: top;
    width: 75%;
}

vertical-align 속성에 대해서

기본적으로 표시타입은 쭉 유지 되는가??

1. display 이 inline, block 으로 지정되어있지만 display 속성을 이용해서 재정의할 수 있다
   • 가로로 배치하기위한 인라인블럭 div 요소
   • 가로 메뉴를 만들기 위한 인라인 li 요소
2. inline 성질을 갖도록 하는 CSS property : float

.inline-p {
	display: inline-block;
}

.float-laft {
	float: left;
}

.float-right {
	float: right;
}

2. block 성질을 갖도록 하는 CSS property

.block-span {
	display: block;
}

display: none

1. 해당 요소는 화면에 보이지 않게 된다
2. interactive한 웹을 구현할 수 있어서 화면에 보이지 않을 요소를 작성할 때 사용된다

• 네이터 검색창에 텍스트를 입력했을 때에 아래 자동완성 목록이 나오는 것
  원래는 해당 영역이 display: none; 으로 보이지 않다가
  텍스트를 입력하는 순간 javascript 가 자동완성목록요소에 display: block;인 다른 클래스로 교체해준다