구글 블로그 만들기

background-size background-size로 배경 이미지의 가로 세로 크기를 정합니다.

background-postion 속성을 이용해 배경 이미지를 배치할 때 기준이 필요합니다. 배경 이미지를 배치할 기준은 background-origin 속성으로 지정합니다.

배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다. 이때 background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수 있고 반복하더라도 가로 반복이나 세로 반복 등으로 반복 방향을 지정할 수도 …

배경 이미지는 제목이나 본문에서 한쪽에 이미지를 표시할 때도 이용할 수 있습니다. 이때 background-position 속성을 이용해 배경 이미지가 표시되는 위치를 조절합니다.

align-content flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-conten…

justify-content justify-content는 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정하고 flex-direction의 값이 column…

CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다.

색상이 직선 형태로 바뀌는 것이 선형 그러데이션이라면 원형 그러데이션은 원이나 타원이 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. 따라서 원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야…

선형 그러데이션이란 색상이수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다. 이것을 만들어 주느 함수는 linear-dradient인데 색상이 어느 방향으로 바뀌고 어떤 색상으로 바뀌는지 알려 주어야 합니다. 선형 그러데이션 구문에서 …

배경색을 만드는 속성 배경 색상은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 배경색을 적용할 수 있습니다.

order 플렉스 아이템은 입력한 순서대로 배치되지만 order 속성으로 플렉스 아이템의 순서를 정할 수 있습니다.

배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다. 즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, …

align-items align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.

align-self align-self 속성을 이용하면 특정 플렉스 아이템을 개별적으로 배치할 수 있습니다. 플렉스 컨테이너에서 아이템 전체의 배치 방법을 결정하지만 align-self 속성으로 특정 아이템의 배치 방법을 변경할 수 있습니다.

배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 16진수나 rgb 값 또는 색상 이름을 사용해 지정합니다.

flex-wrap 기본적으로 플렉스 컨테이너 안의 플렉스 아이템들은 한 줄로 배치됩니다. 하지만 flex-wrap 속성을 사용하면 여러 줄로 배치할 수 있습니다.

.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.

CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다. 요소 위에 요소를 쌓는 순서를 지정하는 것이 z-index 속성입니다.