inline-block 2

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 ..

HTML 반응형 웹디자인: inline-block 대신 flex를 사용하자.

html 요소는 다음과 같은 css 코드를 통해 인라인 (inline)과 블록(block) 요소의 성질을 모두 갖게 설정할 수 있다. display: inline-block; 이렇게 지정된 인라인블록은 기존의 인라인처럼 다른 것들과 수평적으로 나란히 배치할 수 있다. 또 블록처럼 너비와 관련된 속성값을 설정할 수도 있다.(margin, height, width) block: 수평선을 혼자 차지하는 HTML태그 ex) , , ... , .. 등 inline: 수평선에 다른 요소가 같이 위치할 수 있는 HTML 태그 ex) , , , .. 등 블록을 인라인블록으로 바꿔보자 div 태그는 같은 수평선 안에 다른 html 요소가 올 수 없는 대표적인 block 태그이다. html코드 .baby { margin:..