디스플레이속성 2

디스플레이 속성 <section>, <article> flex-grow, flex-shrink

1. 디스플레이 속성 section태그는 섹션(부분, 구역, 영역)들을 그룹화 해서 분리하는 역할 ➡️ section은 주제별로 구분한 그룹이다. 논리적으로 관계 있는 요소 또는 문서를 분리할 때 사용 article 태그는 문서내에서 그룹화해서 분리하는 역할 ➡️ article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용, 좀 더 구체적으로 사용 2. flex item의 팽창과 수축 flex-grow, flex-shrink 플렉스박스의 유연한 레이아웃을 가능하게 하는 속성 2가지 : flex-grow, flex-shrink 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배..

꼼지락거리기 2023.03.06

디스플레이 속성 (inline, inline-block, block) 4가지 특징

디스플레이 속성 4가지 특징 1️⃣ 기본 너비 값 2️⃣ 한 줄에 하나 or 여러 개 3️⃣ 크기 값 (너비, 높이) 4️⃣ 상하 마진 인라인 요소 (Inline Elements) ➡️ 글자를 개별적으로 꾸미는 서식에 관련된 태그들 span, a, b, strong, mark, map 등 ➡️ 기본 너비 값 : 컨텐츠 너비 값 / 한 줄에 여러개 / 크기 값 ❌ / 상하 마진 ❌ 블록 요소 (Block Elements) ➡️ 레이아웃에 관련된 태그, 목록, 제목, 테이블, 시멘틱태그(헤더, 푸터, 메인, 섹션 등) div, p, table, ul, ol 등 ➡️ 기본 너비 값 : 100% / 한 줄에 하나만 배치 / 너비 값, 높이 값 ⭕ / 상하좌우 마진 ⭕ 인라인 블록 요소 (Inline Block ..

꼼지락거리기 2023.02.21