CSS 테두리 속성 지정 (스타일, 두께, 색, 둥글게) CSS 박스 모델 구성 요소 중에서 내용(content)과 패딩(padding)을 둘려 쌓고 마진(margin) 안쪽에 위치하는 영역이 테두리(border) 영역입니다. 테두리에 실선 또는 점선 등 스타일을 지정할 수 있을 뿐만 아니라 테두리 두께 및 색상도 지정할 수 있습니다. 그리고 모서리가 둥근 모양의 테두리를 만들 수 있습니다. 그럼 테두리 스타일을 지정하는 border […]
CSS 여백 조절하는 방법 – margin, padding 속성 두 요소 사이에 여백은 마진(margin) 속성으로 한 요소의 테두리와 콘텐츠 사이에 여백은 패딩(padding) 속성으로 조절할 수 있습니다. 마진과 패딩은 웹 문서의 요소를 배치할 때 사용하는 속성으로 자주 사용됩니다. 특히 티스토리 블로그를 운영할 때 꼭 알고 있어야 되는 속성입니다. 그럼 마진(margin) 속성과 패딩(padding) 속성에 대해서 알아보겠습니다. 마진과 패딩
CSS 박스 모델 구성 요소 및 box-sizing 속성 CSS 박스 모델은 웹 문서를 구성하고 있는 요소들이 사각형 박스 형태로 구성되어 있습니다. 박스 형태로 구성된 요소들이 모여서 하나의 웹 문서가 완성이 되는 겁니다. 그래서 박스 모델에 대해서 잘 알고 있으면 티스토리 블로그를 운영하는데 정말 많은 도움이 됩니다. 그만큼 CSS 박스 모델에 대해서 잘 알아두면 좋을 것
CSS 가상 요소 선택자 사용법 (::before, ::after 등) 가상 요소 선택자는 요소에 일부분만 스타일을 지정해 주기 위해서 가상으로 요소를 만들어 사용합니다. 그리고 가상 클래스와 구분하기 위해서 :: 기호(콜론 2개)를 붙여서 사용합니다. 스타일을 적용할 때 잘 사용하지는 않고 이런 것도 가능하구나 정도만 알고 있으면 될 것 같습니다. 그럼 가상 요소 선택자에 대해서 알아보겠습니다. CSS 가상 요소
CSS 가상 클래스 구조 선택자 정리 및 사용예제 웹 문서는 계층적인 구조로 되어 있습니다. 계층적인 구조를 활용하여 특정한 요소를 찾아서 스타일을 적용하는 것을 구조적 선택자라고 생각하시면 됩니다. 스타일을 적용하기 위해서 태그에 class, id를 지정하는데 만약에 여러 요소가 계층적 구조로 되어 있다면 class, id 지정 없이 구조적 선택자를 사용하시면 훨씬 효율적입니다. 스타일을 적용할 때 자주 사용하는
CSS 가상 클래스 상태 선택자 (:enabled, :disabled 등) 웹 페이지에서 입력 양식폼을 만들 때 입력 양식의 상태에 따라 각각 스타일을 적용할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 요소의 상태에 따른 선택자에 대해서 알아보죠. ※ 사용자 동작에 반응하는 선택자는 이전 게시글을 참고하세요. CSS 가상 클래스 상태 선택자 1.
CSS 가상 클래스 반응 선택자 (:hover, :active 등) 웹 페이지에서 사용자가 요소를 마우스 포인터로 올리거나 또는 클릭을 하게 되면 특정 동작이 발생하는데 해당 시점에 원하는 스타일을 변경할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 사용자 동작에 반응하는 선택자에 대해서 알아보죠. CSS 가상 클래스 반응 선택자 1. 가상 클래스
CSS 속성(Attribute) 선택자 정리, 7가지 종류 웹 페이지를 만들다 보면 태그 안에 class, id, href 등 많은 속성을 추가하게 됩니다. 속성 선택자는 태그 안에서 사용된 속성 값을 이용하여 스타일을 지정할 수 있습니다. 그럼 속성 선택자 종류에 대해서 알아보죠. CSS 속성(Attribute) 선택자 1. 속성 선택자 종류 (7가지) 종류 설명 예시 [속성] 해당되는 속성 이름을 가진 요소
CSS 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자 결합 선택자는 둘 이상의 선택자를 결합해서 스타일을 적용할 수 있습니다. 스타일을 적용하기 위해서 태그에 class 또는 id를 부여하는데 스타일을 적용할 때마다 매번 부여하는 것은 비효율적입니다. 이름을 지정하는 것도 힘들고 모두 기억하는 것도 힘듭니다. 그럴 경우에 결합 선택자를 사용하시면 됩니다. 그럼 결합 선택자의 종류 및 사용하는 방법에 대해서
CSS 배경 이미지 넣는 방법, background-image 속성 등 웹 페이지 전체에 배경 이미지를 지정할 수 있지만 태그 요소에서도 배경 이미지를 지정할 수 있습니다. 그리고 배경 이미지와 관련된 속성은 많이 있습니다. 그럼 예제를 통해서 배경 이미지와 관련된 속성들에 대해서 알아보죠. ▼ 배경 이미지 관련 주요 속성 속성 설명 background-image 배경 이미지 파일 위치를 지정합니다. background-repeat 배경
