230407/ 스터디 5일차 회고: class, box-theory, flex-box

 

스터디 활동 소식

오늘은 스터디 조가 배정되었습니다.

10명이 한 조라고 들은 거 같은데, 20명이 한 조였네요.

 

조이름을 정하고 조장을 뽑는 게 목표입니다. 기대가 됩니다.

 

네모박스 안에 나누기% 심벌이 들어있는 그림을 클론 하는 코드챌린지를 풀었습니다.

 

TIL

HTML의 class 속성(attribute), box-theory, flexbox를 공부했습니다.
이전에 블로그에서 다룬 내용들이 틀리지 않은 것 같아 안심입니다.

flexbox: https://batcave.tistory.com/73
box-theory: https://batcave.tistory.com/32

 

 

 

지식:  *는 만능 셀렉터이다.

 

*는 HTML 문서 내부의 모든 태그를 선택하는 실렉터입니다.

* {
border: 2px solid red;
}

위의 코드를 css 파일에 입력하면 모든 html 태그에 해당 디자인이 적용됩니다.

 

 

 

지식: inline-block에는 정의되지 않은 gap이 존재한다.

 

display의 값을 inline-block으로 설정한 경우에,

각 태그사이에 빈 공간(갭)이 생깁니다.

 

이 갭은 border, margin 어느 곳에도 해당하지 않는 공간입니다.

inline-block의 단점 중 하나입니다.

 

예시코드

<style> .hello { display:inline-block;
width:50px; height:50px; background-color: red;}</style>

<div class="hello"></div>
<div class="hello"></div>

이 게시글의 미리 보기에서 개발자 도구콘솔을 열어보았습니다.

margin, padding이 없음에도 불구하고 두 개의 빨간 네모 사이에 빈 공간이 존재합니다.

 

 

 

읽어주셔서 감사합니다.

오류나 오탈자가 있다면 댓글로 알려주세요.