[css] 배경색과 이미지 동시에 넣기

안녕하세요. 플입니다. 오늘은 배경색과 배경 이미지를 동시에 넣어보겠습니다. 1. 배경 이미지 준비 우선 배경 이미지를 준비합니다. 만약에 여러 개를 규칙적으로 넣을 예정이라면 이름 역시 규칙적으로 정해주면 편하게 작업 가능합니다. 2. 배경 이미지 넣기 span{ background:url(../images/sub1_101.png) no-repeat right center; } 우선 background를 이용해 배경 이미지를 넣어줍니다. url을 이용해 배경 이미지를 넣어주고 위치를 조정해줍니다. 3. 배경 색 넣기 span{ background:url(../images/sub1_#{$i}01.png) no-repeat right center #f21973; } 그다음 background 값 마지막에 ..

coding/html + css · 2019. 11. 14. 07:30

[sass/scss] 오류 확인법

안녕하세요. 플입니다. 오늘은 scss에서 오류 확인하는 법을 알아보겠습니다. 1. 오류 확인 일단 오류가 발생하면 화면에 css가 전혀 적용되지 않은 화면으로 나옵니다. 그리고 가장 위에는 오류 메시지를 띄워주죠. 맨 윗줄에는 에러가 발생한 부분을 알려줍니다. 지금은 .ski5 p에 color 값이 없다고 알려주네요. 실제로 확인해보면 값이 없는 걸 알 수 있습니다. 그리고 몇 번째 줄인지도 정확히 나와있습니다. 2. 오류 수정 오류가 있던 부분을 수정해줍니다. 오류는 컬러코드 입력을 안 했던 것이니까 코드를 입력해줍니다. 3. 확인 수정 후에 확인해보면 다시 css가 잘 들어간 화면이 나오는 것을 알 수 있습니다. scss는 이렇게 오류 확인이 간편합니다. 그럼 이만. 총총.

coding/html + css · 2019. 11. 12. 07:30

[sass/scss] 자동 컴파일하기

오늘은 scss 사용 시 컴파일하는 법을 알아보겠습니다. 1. 실행창 열기 먼저 실행창을 열어줍니다. 시작에서 실행을 검색해 여는 방법과 window + R 단축키를 눌러 여는 방법이 있습니다. *window키는 ctrl과 alt 사이에 있는 키 2. 명령 프롬프트(cmd) 열기 위의 이미지에서 이미 쓰여있었지만 실행창을 열었다면 cmd를 입력해 명령 프롬프트를 실행합니다. 실행하면 이런 명령 프롬프트가 열립니다. 3. 파일 경로 바꾸기 기본은 C로 경로가 잡혀있습니다. 우선 scss작업을 할 폴더로 경로를 옮겨줍니다. 저는 D폴더에 있어 일단 d로 경로를 이동했습니다. d로 경로를 이동할 땐 d:이라고 입력합니다. 엔터를 누르면 이렇게 D드라이브로 이동됩니다. 다음은 cd명령어를 이용해 scss를 실행..

coding/html + css · 2019. 9. 25. 07:30