플렉스박스 (FLEXBOX) 레이아웃을 잡는다는 것은 굉장히 어려운 일이다. 정답이 없기 때문이다. table을 이용하거나 position 또는 float 속성을 이용하는 등 여러가지 방법을 조합하여 어찌어찌 레이아웃을 잡고 나면 여러 부작용이 꼬리에 꼬리를 물고 나타난다. 하지만 Flexbox를 이용하면 표준화된 방법으로 쉽게 원하는 레이아웃을 잡을 수 ...

트랜지션과 애니메이션 요소의 속성값이 변화하면 보통 즉각 그 효과가 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정 시간(duration)에 걸쳐 나타나게 할 수 있다. 트랜지션과 애니메이션의 사용법과 각각의 특징을 정리한다. 1. 트랜지션 * 요소의 변화를 일정 기간(duration)동안 일어나게 함 * 자동으로 발동되지 않음 (hover나...

1. 위치(POSITION) 1-1. STATIC * 기본값 * HTML 기본 배치 순서인 왼쪽에서 오른쪽, 위에서 아래로 배치 * 부모 요소의 위치가 기준이 됨 1-2. RELATIVE * top, bottom, left, right 속성 사용 가능 * 부모 요소를 기준 * 기본적인 동작 원리는 기본값인 static과 동일 1-3. ABSO...

WHITE-SPACE, TEXT-OVERFLOW, WORD-WRAP, WORD-BREAK 속성 정리 볼 때 마다 헷갈리는 속성들이라 따로 정리함 1. WHITE-SPACE * space, tab, line break 세 가지를 white space라고 함 * html은 기본적으로 white space를 연속으로 아무리 입력해봤자 space 한 번만 적...

FONT와 TEXT에 대하여 1. FONT-SIZE 폰트의 크기를 정의 2. FONT-FAMILY 폰트를 지정 * 디바이스에 해당 폰트가 설치되어 있어야함 * 폰트는 여러개 동시에 지정 가능 * 첫 번째로 지정한 폰트가 디바이스에 설치되어있지 않으면 두 번째로 지정한 폰트가 적용 * 지정한 폰트가 모두 디바이스에 설치되어 있지 않으면 OS 디폴트...

BACKGROUND 1. BACKGROUND-IMAGE * 요소의 배경 이미지 지정 body { background-image: url("http://image-server.com/my-image.png"); } * 여러 개의 이미지를 설정할 수 있음 (먼저 설정된게 앞에 출력) body { background-image: ur...

DISPLAY 1. DISPLAY 1.1 BLOCK * 항상 새로운 라인에서 시작 * width: 100% * width, height, margin, padding 지정 가능 * block 엘리먼트 내부에 inline 요소 포함 가능 * div, h1~h6, p, ol, ul, li, hr, table, form 등이 있음 1.2 INLINE ...

SCSS 설정은 생략~ _MIXIN.SCSS $breakpoints: ( 'small': (max-width: 767px), 'medium': (max-width: 992px), 'large': (max-width: 1200px), ) !default; @mixin respond-to($breakpoint)...

박스 모델(BOX MODEL) 1. BOX MODEL 1.1. CONTENT: * 태그 안에 내용을 넣었을 때 그 내용이 표시되는 영역. * width와 height 속성을 가짐 1.2. PADDING: * Border 안쪽 여백 * 기본 색은 transparent * 요소에 적용된 배경색과 이미지를 따름 1.3. BORDER: * 테두리...

크기 단위, 색상 1. 크기 단위 PX * px는 픽셀이며 화소 한 개를 의미. 절대값 단위 % * 엘리먼트 사이즈 기준 백분율 크기 EM * 폰트 사이즈 기준 배수 단위 크기 REM * em과 같이 폰트 사이즈를 기준으로 하는 배수 단위의 크기이지만 em이 해당 엘리먼트의 폰트 사이즈를 기준으로 한다면 rem은 루트 엘리먼트의 폰트 사이...

셀렉터 정리 1. 전체 셀렉터 * { } 문서 내의 모든 요소를 선택 2. 태그 셀렉터 p { } span, div { } 태그명으로 요소를 선택 3. ID 셀렉터 #hello { } id가 일치하는 요소를 선택 4. CLASS 셀렉터 .hello { } class가 일치하는 요소를 모두 선택 5. ATTRIBUTE 셀...

1. 셀렉터 (SELECTOR, 선택자) 스타일을 먹일 HTML 요소들을 선택하기 위해 CSS에서 제공하는 방법. 제목을 빨간색으로 바꾸려면 먼저 제목을 선택해야된다. p { color: red; } 여기서 p를 selector라고 한다. 2. 프로퍼티 (PROPERTY, 속성) p { color: red; } 여기서 color...