보호되어 있는 글입니다.

보호되어 있는 글입니다.

CSS@keyframes gradientSparkle { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}.gradient-text { font-size: 2rem; background: linear-gradient(45deg, #ffcc33, #ff0066, #660099); background-size: 300% 300%; /* 배경 크기 확대 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; ..

보호되어 있는 글입니다.

CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 든다. 또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다. SCSS를 사용하면 CSS 코드가 훨씬 간결해진다. HTML에 SCSS 적용하는 방법 툴에 프로젝트를 생성한다. 해당 프로젝트 안에 'index.html'파일을 만들어 준다. 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다. css 폴더 안에 style.css와 style.scss 파일을 생성한다. index.html에 css코드를 불러온다. → scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된..

CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px는 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상도가 1680*105..