워로디스

CSS 변수는 스타일시트에서 반복해서 사용하는 값을 이름으로 정의하고 재사용할 수 있게 해주는 표준 CSS 기능입니다.일반적으로 “CSS 변수”라고 부르지만, 공식 명칭은 CSS 커스텀 속성(Custom Properties) 입니다. 별도의 라이브러리나 Sass 같은 전처리기 없이 브라우저에서 직접 사용할 수 있습니다.1. CSS 변수 선언하기CSS 변수의 이름은 반드시 --로 시작해야 합니다.:root { --main-color: #333; --content-padding: 20px;}위 코드에서는 두 개의 CSS 변수를 선언했습니다.--main-color: 기본 색상--content-padding: 기본 여백CSS 변수에는 색상, 크기, 간격, 글꼴, 그림자 등 일반적인 CSS 속성값을 저장할 수..

CSS 중앙 정렬은 무엇을 정렬하는지에 따라 적절한 방법이 달라집니다.1. Grid를 이용한 가로·세로 중앙 정렬자식 요소 하나를 가로와 세로 중앙에 배치할 때 가장 간결한 방법입니다..container { display: grid; place-items: center; min-height: 200px;} 중앙에 정렬됨place-items: center는 다음 두 속성을 한 번에 지정합니다.align-items: center;justify-items: center;단일 요소를 중앙에 배치하는 경우 Grid 방식이 간결하고 읽기 쉽습니다.2. Flex를 이용한 가로·세로 중앙 정렬여러 요소를 한 방향으로 배치하거나 정렬해야 할 때 적합합니다..container { display: flex; ju..

1. 결론visibility는 초기값(initial value)이 visible이고,** 상속되는 속성(inherited property)** 이다. CSS 2.1 명세의 visibility 정의도 Initial: visible, Inherited: yes로 명시한다. (W3C)따라서 자식 요소에 visibility를 선언하지 않으면 부모의 visibility 값을 상속받는다. CSS Cascade 명세상, cascade 결과 값이 없을 때 상속 속성은 부모 요소를 통해 default 값을 얻고, 비상속 속성은 initial value를 사용한다. (W3C)가장 중요한 규칙은 다음이다..parent { visibility: hidden;}.child { visibility: visible;}.pare..