TIL.04 (1주차)CSS

Block vs Inline

block 요소 : header, footer, p, li, table, div, h1 태그 등이 모두 block 요소(옆에 다른 요소를 붙여넣을 수 없다는 뜻)에 해당하는 태그

inline 요소 : span, a, img 태그 등이 inline 요소(요소끼리 서로 한 줄에 위치할 수 있다는 뜻)

css를 통해 얼마든지 성질을 바꿀 수 있다!!

inline 성질을 갖도록 하는 property => display, float

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

반대로 inline 성질을 block으로 바꿀 수도 있다.

.block-span {
  display: block;
}

none

.hide {
  display: none;
}

none값을 주면 해당 요소는 화면에서 보이지 않는다.

그럼 대체 어디에 쓰일까???
interactinve한 웹을 구현하는데 사용
ex) 검색창에 이용(목록이 안보이다가 검색어 입력시 목록이 뜸)

Margin auto

.center {
  margin: 20px auto; // 2개의 값만 있을 때는 위아래, 좌우의 값이다
}

좌우의 나머지 공간은 균등하게 배분되어 여백을 갖게 된다.