CSS에는 다양한 효과가 존재합니다. 배경 이미지, 색상, 테두리등을 설정하는 것으로도 페이지에 많은 변화를 가져올 수 있습니다. 단순히 효과만 넣는다면 답답한 모습이 될 수 있습니다. 이런 경우, 적당한 여백을 주면 도움이 될 수 있습니다. CSS에서 여백은 패딩(padding)과 마진(margin)으로 구분되는데요. 그 차이를 알아보고, 사용 방법에 대해서 살펴보도록 합니다. CSS 간격 조정 방법. 패딩(padding), 마진(margin) ⓐ 패딩(padding)이란, 패딩은 … Read more

특정 영역을 지정하고 테두리를 넣는 방법은 CSS 디자인을 꾸밀 때 자주 사용되는 방법입니다. 특히 소제목을 꾸밀때 많이 사용되기도 합니다. CSS를 이용해 기본적인 테두리를 넣는 방법과 종류를 알아봅니다. CSS 테두리 넣는 방법 및 속성 종류 ⓐ 테두리 스타일 지정하기 및 스타일 종류 ⓑ 테두리 너비(굵기) 설정 ⓐ에서 확인한 테두리는 너무 얇게 표시되어 있습니다. 적당한 선의 너비(굵기)를 … Read more

CSS를 이용한 디자인 중 가장 눈에 띄는 변화는 색상의 변화와 배경의 변화가 아닐까요. 페이지의 색감만 잘 정돈되어 있어도 깔끔하고 세련된 느낌을 주기도 합니다. 디자인은 센스가 있어야 하는 부분이기 때문에 다양한 방법을 시도하는 과정에서 원하는 결과를 얻을 수 있습니다. CSS 색상 및 배경 넣는 방법 1. CSS 색상 넣는 방법. css에서 색상을 지정하는 경우는 다양하게 있습니다. … Read more

코딩을 하다 보면 메모가 필요한 순간들이 생길 수 있습니다. 다른 메모 프로그램 혹은 종이에 필요한 내용을 적어둘 수도 있습니다. 하지만, 코딩에 필요한 메모는 특정 구간 혹은 코드에 맞춰진 내용일 수 있습니다. 이런 경우, 코드를 작성하는 과정에서 필요한 곳에 메모를 해두면 도움이 될 수 있습니다. 코드 명령어로 읽지 않고, 단순히 텍스트로 남겨두는 것을 ‘주석’이라 부르게 됩니다. … Read more

CSS에 대한 가장 기본이 되는 것은 어떻게 적용할 것 인지에 대한 부분입니다. 적용할 코드를 가지고, 적용 방법에 대한 규칙에 맞춰 코드를 작성해야 원하는 기능을 구현할 수 있습니다. CSS 구문 CSS 코드에는 기본적인 형태가 존재하게 됩니다. 적용할 태그(선택자), 중괄호, 속성:값, 마침(;)으로 이루어지게 됩니다. 예를 들어, h1태그에 색상과 폰트 크기를 조절하는 CSS를 적용한다면 다음과 같습니다. 위 코드의 … Read more

처음 css를 접하면 아주 작은 조각들을 모아서 사용할지 모릅니다. 개인적인 경험이 그렇네요. 일반적으로 하나의 사이트 혹은 페이지에 다양한 레이아웃이 설정되는 css를 적용하는 경우는 드뭅니다. 아무리 역동적인 사이트 페이지를 구성해도 버튼을 클릭할 때 마다 적용되는 스타일이 달라지게 페이지를 구성하진 않죠. 너무 비효율적인 방법이기 때문입니다. 다만, 학습을 위한 예시로는 충분한 가치가 존재할 수 있습니다. css에 대한 기본적인 … Read more