CSS 18

[CSS] Row와 Column, Main Axis와 Cross Axis

행(Row)과 열(Column) 축 개념을 이해하려면 row와 column부터 알아야 한다. row≒가로≒inline, column≒세로≒block이다. Block-level elements와 Inline elements 블록-레벨 요소(Block-level elements) 기본적으로 세로 방향으로 정렬, 요소 단위로 강제 개행, 모든 너비를 차지함(옆에 다른 요소 두기 X) 인라인 요소(Inline elements) 기본적으로 가로 방향으로 정렬, shinye0213.tistory.com 축(Axis) flexbox 개념을 이해하려면 축부터 알아야 한다. 주축(Main Axis) 교차축(Cross Axis) 이름 그대로 주축과 '교차'한다. 따라서 주축이 가로면 교차축은 세로, 주축이 세로면 교차축은..

개발(Web)/Web 2022.01.12

[CSS] Display와 Floats

display: block; display: inline; display: inline-block; display: flex; (번외) float: left; 아래 글에서 float에 대해 상세하게 설명해 놓았다. 영어 전문을 읽을 필요 없이 그림만 봐도 어느 정도 이해가 된다. All About Floats | CSS-Tricks Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is comm..

개발(Web)/Web 2022.01.11

[CSS] CSS 기초 30분 요약

001.css h1 { color:red } 001.html 외부 CSS 인라인 CSS 002.html hello world hello world hello world hello world hello world hello world 003.html 범용 선택자 * 타입 선택자 h2 범용 선택자 * 범용 선택자 * 클래스 선택자 .one 클래스 선택자 .two 클래스 선택자(class끼리 중첩 가능) .one two 아이디 선택자 #three 아이디 선택자 #four 아이디 선택자(id끼리 중첩 불가) #three four 004.html class one / font-size 32px class two / font-size 2em class three / font-weight normal 창 크기 기준 ..

개발(Web)/Web 2021.01.31
반응형