CSS

CSS는 Cacading Style Sheet의 줄임말로 HTML 문서에 디자인 요소를 더해주는 스타일 문서.Cacading이란 폭포수라는 뜻으로 폭포수처럼 떨어져 우선순위를 가지고 적용.미적인 요소 뿐만 아니라 사용자의 사용성을 위한 레이아웃 배치를 위해서 필수.

css 기본 문법선택자란 HTML의 특정 요소를 선택하는 문법.CSS 스타일을 적용하는 방법은 크게 3가지로 분류.style 속성을 사용한 인라인 방식.<style> 태그에 작성.<link> 태그를 이용한 외부 리소스 연결.HTML 태그의 style이라는

block과 inline-block을 다루는 css 속성들. width : 요소의 너비를 지정. 기본값 auto height : 요소의 너비를 지정. 기본값 auto.

* : 전체 선택자 모든 요소를 선택한다. . : 클래스 선태자 요소의 class 속성값과 비교하여 요소를 선택한다. 요소는 여러개의 클래스를 가질 수 있다 # : 아이디 선택자 요소의 id 속성값과 비교하여 요소를 선택한다. 요소 여러개의 아이디를 가질 수

글씨 관련 속성 font-family 폰트를 지정합니다. 여러개의 폰트를 , 를 통해 지정할 수 합니다. => 우선순위에 따라 앞의 폰트가 지원되지 않을 때 다음 폰트를 적용합니다. 폰트의 이름에 공백이 있을 경우 "폰트 이름"의 형식으로 작성합니다. font-

position : 문서 상에 요소를 어떻게 배치할지 기준을 지정.top, bottom, left, right : position 값의 따라 기준을 잡아 위치 변경.

background 요소의 배경색 혹은 배경 이미지를 지정하는 단축 속성이다.backround-color배경색을 지정. 기본값은 값으로 색상 코드 혹은 예약어 사용한다.background-image 보다 뒤에 렌더링 되어 배경 이미지에 투명한 부분이 있다면 배경색 투과

transtorm 요소에 이동, 회전, 크기, 기울이기 등 변형을 준다. 값으로 css 변형 함수를 사용한다. x축, y축, z축 적용한다. 값에 따라 상대값, 절대값 모두 사용 가능하다. |값|설명| |---|---| |translate()|요

amimation 값의 변화를 미리 작성해 요소에 애니메이션 적용이 가능하다. transition은 이벤트가 필요하지만 anㅑmation은 시작과 정지, 반복을 제어할 수 있다.

Flex Flexible Box의 줄임말로, 레이아웃 배치를 행과 열로 나누어 배치한다. flex-direction 으로 지정하는 "주축"과 수직 축인 "교차축"으로 나뉜다. "주축"과 "교차축"에 대한 배치 방법을 지정하여 레이아웃을 배치한다. display

CSS Grid flex 는 레이아웃을 1차원으로 배치하는 반면, grid는 2차원으로 배치한다. 컨텐츠를 행과 열에 배치할 수 있다. display : grid 정렬하고자 하는 아이템들을 감싸고 있는 컨테이너 박스에 지정한다. grid-template-colum

반응형 웹이란 접속하는 디바이스에 따라 레이아웃 배치를 자동으로 변환하여 다양한 디바이스에 대응하는 웹 사이트이다. flex box, grid box, 미디어쿼리, 상대 단위 등을 사용하여 화면에 크기에 맞게 변환하는 사이트를 만든다. 상대 단위 px, cm 등과 같

CSS 전처리기란? 별도의 문법을 가지고 있으며, CSS 파일을 생성하는 프로그램을 말한다. CSS에서 제공하지 않는 기능들을 제공하여 CSS작성을 더욱 편리하게 도와준다. 여기서 배우게 될 SASS 외에도 LESS, Stylus 등 다양한 CSS 전처리기가 있다.