. flexbox: container/item에 각각 적용할 수 있는 속성값들이 있으며 중심축의 선택(수평/수직)에 따라 반대축이 달라진다. flexbox를 활용하면 웹 브라우저 화면에 컨텐츠의 배열을 자유롭게 할 수 있다. 참조: https://youtu.be/
레이아웃은 웹페이지에 text, image 등의 요소들을 위치시키거나 정렬시키는 방법으로 웹페이지의 시각적인 구조를 제공한다. 이러한 레이아웃은 큰 시각에서 웹페이지를 바라볼 때의 Page layout과 홈페이지를 구성하는 조각 요소들을 바라볼 때의 Component
CSS 전처리기는 전처리기 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램이다. 대부분의 전처리기는 pure CSS에 존재하지 않는 특징을 갖고 있다. mixin, nesting selector, inheritance selector 등등. 이러
html 요소들은 기본적으로 inline, block, inline-block 등 각자 고유의 디스플레이 속성을 갖고 있다. 하지만 이러한 속성은 불변적인 것은 아니다. display는 기본 속성과 상관없이 사용하고자하는 속성으로 지정 할 때 사용한다. 이러한 속성을
. CSS: Cascading Style Sheets로 웹 개발자가 기본값의 서식을 가진 HTML code에 시각적인 효과를 줄 때 사용하는 언어이다.. style: HTML 코드 안에서 CSS 코드 사용시와 동일한 효과를 줄 때 사용한다. 1개 이상의 style 효과
※box model . height/width: 웹페이지에 공간을 정의 할 때 사용한다. 특정한 수치로 공간을 정의하면 웹에서는 문제없지만 모바일 환경에서는 사이즈가 맞지 않을 수 있다. > p { border: 3px solid coral; } . border
Pseudo는 "가짜의", "모조의"라는 뜻을 가진 단어로 Pseudo class, element는 단어 뜻 그대로 실제로는 없는 클래스, 실제로는 없는 가상의 선택자를 의미한다. 가상 클래스는 실제로 존재하는 태그 중 특정 상태에 있는 요소를 선택할 때 사용하는
. transition-property: transition 효과를 적용할 속성을 정의할 때 사용한다.(적용 가능한 css 속성: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_propertie
. grid: 2차원 형태의 row/column으로 구성된 레이아웃을 구성할 때 사용한다.. grid-template-rows/columns: 생성하고자 하는 grid의 행/열의 조건을 부여할 때 사용한다.(\*repeat: 동일한 속성의 row/column을 생성할