구글 블로그 만들기

overflow overflow 속성은 white-space: norwap; 으로 지정해 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기 밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.

배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다.

CSS 박스모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹 문서를 이루죠. 또한 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어 있습니다. 이 개념은 CSS에서 자주 사용 되므로 잘 기억해 두어…

이번에는 박스 모델의 여백인 마진과 패딩을 조절해보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다.

포토 앨범 등에서 사진 주변에 그림자를 추가하면 멋진 효과를 만들 수 있습니다. 이런 그리자 효과도 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 사용하지 않고도 나타낼 수 있습니다. 그림자는 이미지 뿐만 아니라 div 전체 등 지정…

웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다. CSS의 width 속성은 콘텐츠 영역(content area)의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 합니다. 이럴 때 …

테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. 하나씩 살펴 보면서 박스 …

박스 테두리를 꾸미긴 꾸몃는데 여진히 심심하다면 박스 모서리를 등글게 만들어 박스 형태를 바꿀 수 있습니다. border-radius 속성을 이용하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리할 수 있습니다.

테두리 스타일을 지정하는 border-style 속성은 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 테두리 스타일을 지정해야 합니다.

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

background-attachment background-attachment 속성으로 배경 이미지 고정, 스크롤 여부를 지정합니다.

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

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

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

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

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

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

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

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