IT/css32 css 박스 모델: 가로와 세로 - width, height css 박스 모델은 브라우저 안에 모든 요소를 박스 형태로 구분합니다. 요소에 가로 넓이와 세로 높이를 조절하기 위해서는 width, height 속성을 사용해야 됩니다. 사용법 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita accusantium, laudantium vitae doloribus, ea qui eius nemo odio consequatur illo iste maiores rerum animi architecto quas repellendus dolore voluptas dolorum. 2023. 3. 21. CSS 상속: inherit을 사용하여 속성 상속하기 CSS에서는 요소들 간에 속성을 상속할 수 있습니다. 이를 통해 부모 요소의 스타일을 자식 요소에게 전달하여 일관된 디자인을 구현할 수 있습니다. inherit 키워드는 상속을 명시적으로 지정하는 데 사용되며, 자식 요소에게 부모 요소의 속성을 상속하도록 지정합니다. inherit을 사용하여 CSS 속성을 상속하는 방법에 대해 알아보겠습니다. inherit 키워드의 사용법 inherit 키워드는 속성 값으로 사용되며, 부모 요소의 해당 속성 값을 자식 요소에게 상속하도록 지정합니다. 일반적인 사용법은 다음과 같습니다: 자식요소 { 속성: inherit; } 위와 같이 자식 요소의 속성 값을 inherit로 설정하면, 해당 속성의 값을 부모 요소의 속성 값으로 상속받습니다. 예시 다음은 예시를 통해 inh.. 2023. 3. 17. css n 번째 요소 선택해서 효과 주기 - nth-of-type html 요소에 :nth of type 가상 클래스 선택자를 사용해서 n 번째 요소를 선택해서 효과를 줄 수 있습니다. n 번째 요소를 선택할 때 하나의 요소를 선택하거나 n 배수의 요소들을 선택할 수 있습니다. n 번째 요소 선택 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia ex sapiente minima quisquam, tenetur eos aliquid unde tempora ratione aliquam reiciendis nobis magni rem! Velit, in! Quos at quaerat nihil! Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus.. 2023. 3. 17. css 체크했을 때 효과 주기 - checked CSS에서 checked 가상 클래스는 HTML 폼 요소 중에서 사용자에 의해 선택된 상태를 스타일링하기 위해 사용됩니다. 주로 체크박스, 라디오 버튼 등과 함께 사용되며, 선택된 요소에 대한 스타일을 지정할 수 있습니다. checked 가상 클래스의 사용 예시 아래는 HTML 체크박스와 함께 checked 가상 클래스를 사용한 CSS 예시입니다. 체크박스 input[type="checkbox"]:checked + label { color: red; } 위 예시에서는 input 요소의 type 속성이 "checkbox"인 경우에만 checked 가상 클래스가 적용됩니다. checked 가상 클래스를 사용하여 선택된 체크박스에 대한 스타일을 변경하고 있습니다. 위 예시에서는 선택된 체크박스의 라벨 텍스트를.. 2023. 3. 17. css 마우스 클릭 효과 - active CSS에서는 요소를 마우스로 클릭할 때 시각적인 효과를 적용할 수 있습니다. CSS의 Active 효과에 대해 알아보고, 실제 예시를 통해 설명하겠습니다. Active 효과란? Active 효과는 사용자가 요소를 마우스로 클릭하는 동안 적용되는 스타일을 의미합니다. 클릭된 요소에 특정 스타일을 적용함으로써 사용자에게 시각적인 피드백을 제공할 수 있습니다. Active 효과 적용 방법 Active 효과를 적용하기 위해서는 다음과 같은 CSS 선택자와 속성을 사용할 수 있습니다. 선택자:active { /* 스타일 속성 */ } 위 코드에서 선택자 부분은 클릭되는 요소를 선택하는 CSS 선택자입니다. :active는 클릭된 상태일 때 적용될 스타일을 지정하는 의사 클래스입니다. Active 효과 예시 아래는.. 2023. 3. 16. css 마우스 오버 시 효과 주는 방법 - hover html 요소에 :hover 가상 클래스 선택자를 사용하면 마우스 오버 시 효과를 줄 수 있습니다. 사용법 link 2023. 3. 16. css 속성 선택자 사용하는 방법 CSS 속성 선택자는 HTML 요소의 속성 값에 따라 스타일을 지정할 수 있는 선택자입니다. 이 선택자를 사용하면 HTML 요소의 속성 값이 특정한 값으로 일치하는 경우에만 스타일을 지정할 수 있습니다. CSS 속성 선택자의 사용법에 대해서 자세히 살펴보겠습니다. 사용법 먼저, CSS 속성 선택자의 구문은 다음과 같습니다. [속성명=값] { /* 스타일 규칙 */ } 여기서 속성명은 HTML 요소의 속성 이름을 의미하며, 값은 해당 속성 값의 일치 여부를 검사하는 데 사용됩니다. 속성명=값 형식으로 작성하면, HTML 요소의 속성 값이 지정한 값과 정확히 일치하는 경우에만 스타일을 적용할 수 있습니다. 예를 들어, class 속성 값이 btn인 모든 요소에 적용되는 스타일을 지정하고 싶다면 다음과 같이 .. 2023. 3. 16. css 자손 선택자 css 자손 선택자는 부모 요소에 포함되어 있는 자손들을 선택해서 style을 적용시킬 수 있는 방법입니다. 두 가지 방법이 있는데 첫 번째 방법은 자손 요소들의 레벨에 상관없이 적용이 되고 두 번째 방법은 자손 요소가 한 단계 아래 레벨일 때 적용이 됩니다. 첫 번째 방법 기준 자손{ style } link1 link2 link3 두 번째 방법 기준 > 자손{ style } link1 link2 link3 2023. 3. 15. 이전 1 2 3 4 다음
