개발 블로그
CSS 페이지 입니다.
CSS 가상 클래스와 가상 요소란? CSS 가상 클래스와 가상 요소는 웹 페이지의 스타일링을 더 다양하고 동적으로 만들 수 있는 기능입니다. 마우스 호버, 클릭 등의 상태에 반응하거나, 특정 부분에 스타일을 적용하는 데 사용됩니다. CSS 가상 클래스와 가상 요소의 속성 가상 클래스 (Pseudo-classes) 가상 클래스는 요소의 특정 상태나 위치를 선택하여 스타일을 적용하는 데 사용됩니다. 가상 요소 (Pseudo-elements) … Read more
CSS transform 변형 이란? CSS transform은 웹페이지에서 요소의 모양, 크기, 위치 등을 변형 시키기 위한 속성입니다. 주로 애니메이션 및 레이아웃 조정에 사용됩니다. CSS transform 속성 CSS transform의 주요 속성과 종류에 대한 설명입니다. CSS transform 예제 설명 CSS transform 의 주요 속성에 대한 예제입니다.아래는 예제에 공통적으로 적용되는 HTML 과 CSS 입니다.비교를 위해 body에 border를 설정했습니다. transform … Read more
CSS 스타일 우선순위 명시도란? CSS 명시도는 스타일 규칙이 적용되는 우선순위를 결정하는 값입니다.CSS 스타일 우선순위와 명시도에 대하여 알아보겠습니다. CSS 선택자 우선순위 기본적으로 CSS 에서는 나중에 적은 스타일을 우선 적용합니다.즉 우선순위가 같을 때 나중에 작성한 스타일을 우선 적용한다는 뜻입니다. 또한 더 구체적으로 작성한 선택자의 우선순위가 더 높습니다. 선택자 우선순위를 낮은 순 부터 정리하면 다음과 같습니다. 다음은 우선순위가 … Read more
CSS background 란? CSS background 배경 속성은 웹 페이지의 디자인을 꾸미고 여러 시각적 효과를 부여하는 데 사용되는 스타일 속성입니다. 배경 속성은 웹 페이지의 배경 색상, 이미지, 크기, 위치 등을 제어합니다. CSS background 속성 CSS background 예제 background-color 배경 색상 background-color 속성은 요소의 배경 색상을 지정하는 데 사용됩니다. 아래는 간단한 HTML과 CSS를 사용한 background-color 속성의 예제입니다. … Read more
CSS box-shadow 그림자 속성 box-shadow 는 CSS에서 사용되는 속성 중 하나로, 요소에 그림자 효과를 추가하는 데 사용됩니다. box-shadow 속성을 사용하면 요소가 화면에서 떠 있는 듯한 입체적인 효과를 만들 수 있습니다. CSS box-shadow 형식 box-shadow 는 다음과 같은 형식을 가지고 있습니다. 여기서 각 값은 다음과 같습니다. CSS box-shadow 예시 아래 예제들의 공통적인 HTML 과 CSS 코드 … Read more
CSS border-radius 속성 border-radius 는 요소의 모서리, 테두리 부분을 둥글게 만들 때 사용되는 CSS 속성입니다.border-radius 의 값은 해당 모서리의 둥글기를 나타냅니다. border-radius 속성은 1개, 2개, 3개, 4개의 값을 가질 수 있습니다.개수에 따라서 값이 적용되는 위치가 달라집니다. 각각 다른 위치에 값을 따로 지정 해 줄 수도 있습니다. CSS border-radius 예제 1개의 값 지정 border-radius 에 1개의 … Read more
CSS border 란? CSS border(테두리)는 웹 디자인에서 요소 주위에 경계를 생성하고 스타일을 부여하는 데 사용되는 스타일링 속성입니다. border는 웹 개발 페이지의 시각적인 디자인을 향상 시키는 데 중요한 역할을 합니다. CSS border 속성 border는 CSS에서 사용되는 속성 중 하나로, HTML 요소의 테두리를 지정하는 데 사용됩니다. 이 속성은 요소 주위에 테두리를 만들거나 스타일을 지정하는 데 활용됩니다. CSS … Read more
CSS width (너비), height (높이) CSS 크기 속성 CSS에서 너비(width)와 높이(height) 는 웹 요소의 크기를 지정하는 데 사용되는 웹 개발에 중요한 속성입니다. 크기 속성 단위 자세히 알아보기 CSS width (너비), height (높이) 예제 기본 설정 border (테두리) 를 설정하고 width 200px 과 height 150px 을 설정했습니다. 너비가 200px , 높이가 150px 인 박스가 만들어졌습니다. 크기 … Read more
CSS 선택자는 웹 개발에서 중요한 개념 중 하나입니다. 웹 페이지를 디자인하고 스타일링 하는데 사용되는 CSS의 핵심 부분 중 하나로, 선택자를 올바르게 이해하는 것이 중요합니다. CSS 선택자의 기본 개념 CSS 선택자는 웹 페이지의 요소를 선택하여 스타일을 적용하는데 사용됩니다. 웹 페이지에서 어떤 부분을 선택하고 어떻게 스타일을 적용할지를 정의하는데 선택자가 필수적입니다. 간단한 선택자부터 그룹화 및 속성 선택자까지 다양한 … Read more
CSS 블록(block), 인라인(inline), 인라인 블록(inline-block) 요소란? 블록 (block), 인라인 (inline), 그리고 인라인 블록 (inline-block) 은 웹 페이지의 레이아웃을 조절하는 데 중요한 역할을 합니다. 적절한 표시 속성을 선택하면 원하는 레이아웃을 구현할 수 있습니다. 각 요소에 대해 자세히 알아보겠습니다. CSS 블록 (block) 요소 CSS의 블록 (block) 요소는 웹페이지의 구조와 레이아웃을 형성하는 데 중요한 역할을 합니다.블록 요소는 일반적으로 … Read more