제로하우스

CSS에서도 변수를 사용할 수 있다고? 사용자 지정 속성을 사용하여 CSS에서 변수를 사용할 수 있다. 사용자 지정 속성(CSS 변수, 종속 변수): CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다. 표기법 --main-coor: black;과 같이 정의할 변수명 앞에 --를 붙이면 된다. 사용법 정의한 변수를 재사용할 경우에는 color: var(--main-color);와 같이 var 안에 변수명을 넣어서 사용할 수 있다. 예시 :root { --main-bg-color: brown; } element { background-color: var(--main-bg-color); } 참고 문서 https://developer.mozilla.org/ko/docs/Web/CSS..

:hover :hover는 마우스를 올린 태그나 속성 등을 선택한다. 이와 같이 :(콜론)이 붙은 요소는 가상 클래스라고 부른다. 마우스를 올렸을 때 텍스트 색 변하게 하기 :hover를 활용해 마우스를 올렸을 때 텍스트 색이 변하도록 할 수 있다. 아래의 예시는 태그에 마우스를 올렸을 때 텍스트의 색상이 파란색으로 변하도록 하는 CSS 코드이다. 위키백과

CSS를 통해 텍스트를 드래그할 수 없도록 처리할 수 있다. 여기서는 클래스를 `stop-dragging`으로, 해당 클래스에 CSS 코드를 작성한다. .stop-dragging { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }

웹 페이지를 개발하면 Footer를 사용할 때가 많다. HTML 컴포넌트에 다음과 같이 CSS를 적용하면, 페이지의 컨텐츠 길이와 상관 없이 항상 페이지 하단에 표시되는 footer를 만들 수 있다. Footer .footer { background: #F4F7F7; height: 2rem; margin-top: auto; width: 100%; position: absolute; bottom: 0; left: 0; } 위와 같이 코드 작성하면 아래와 같이 적용된다.

CSS의 flex를 이용하여 간단한 3단 레이아웃을 만들어본다. 위와 같은 레이아웃으로 만들어본다. HTML 작성 먼저 간략하게 HTML 코드를 작성한다. Header Left Content Main Content Right Content Footer 영역별 색상 적용 각 영역이 잘 보이도록 간단하게 영역별로 색상을 적용한다. /* layout.css */ header, footer { background: #4a4a4a; color: #f9f9f9; padding: 0.3em 0; } #left-content, #right-content { background: #eee; flex: 1; } #main-content { background: #f9f9f9; } 3단 레이아웃 만들기 마지막으로 아래와 같..