tag, id, class / inline / flex(css)

in Html&css on Html&css, Nomadcoder

inline

설명

  • 위, 아래 margin을 가질 수 없다. 좌, 우만 가능하다.
  • padding은 다 가질 수 있다.
  • 위, 아래 margin을 가지고 싶으면 block으로 바꿔주어야 한다.

tag, id, class

사용 방법

`tag` { }

#`id`{ }

.`class`{ }

class

설명

  • 여러 요소를 쓸 수 있다. 예를 들면 (tomato, ph, hello 클래스를 가짐)
<span class="tomato ph hello"></span>

inline-block

장점

  • block으로 인식하게 해준다.
  • 높이와 너비를 가질 수 있다.

단점

  • 요소 사이에 빈 공간이 생긴다.
  • 정해진 것이 없다.
  • 반응형 디자인을 지원하지 않는다.

flex-box

규칙

  • 자식 엘리먼트에는 어떤 것도 적지 말아야 된다.(부모 엘리먼트에만 명시한다.)
  • justify-conent는 주축(기본적으로 수평), align-items는 교차축(기본적으로 수직)

정리해야 될것

div는 stretch가 적용이 되지만 height이 있으면 stretch가 적용이 안된다.