55일차

Dogeun Lee·2023년 2월 21일
0

HTML / CSS / JS

block : 화면을 수직분할 + width, height 사용 o
inline : 화면을 수평분할 + width, height 사용 x
inline block : inline의 수평분할 + block의 크기 조절
none : 화면에 요소가 표시되지 않으나 존재는 하고 있는 상태
flex : 요소의 정렬되는 방향 간격을 유연하게 처리한다.


inline div5개 = 한열로 5개가 생김

span태그는 기본적으로 inline이다.

  • 하지만 span태그에 block을 쓰면 행으로 쌓임

inline-block을 사용하게되면 block의 크기를 정할 수 있기 떄문에

  • 높이를 지정해서 한 열로 나열할 수 있다.

 .none{
    /* 요소는 존재하나 화면출력은 안함 */
    display: none;

}
.hidden{
    /* 화면에 투명한 형태(공간) 출력 */
    visibility: hidden;
}
*{
padding:0px;
    margin:0px;
    box-sizing:border-box;
    /* border+padding+content 크기 합산과 동일하도록 계산
         content크기를 자동으로 지정
         실무에서는 꼭 이렇게 사용한다.
         (테두리를 포함해서 전체 박스 크기를 정함) */
}
profile
오대수

0개의 댓글