[sass/scss] 반복되는 배경 한 번에 넣기

안녕하세요. 플입니다. 오늘은 반복되는 배경을 한 번에 처리해보겠습니다. 1. 이미지 준비 우선 이미지를 준비합니다. 이미지 이름은 작업하기 쉽게 숫자를 순서대로 적어줍니다. 3. 클래스명 적기 각각 다른 배경을 넣어줄 테니까 클래스명을 각자 적어줍니다. 이때도 이미지 이름과 같이 숫자를 순서대로 이름을 정해주세요. 물론 nth-child를 이용하는 방법도 있습니다. 자신이 편한 방법을 사용하면 됩니다. 3. 배경 넣기 .ski1 p{ background:url(../images/sub1_1.png) no-repeat left center; } 먼저 한 개체에 배경을 넣어줍니다. 배경 외의 다른 코드는 미리 진행해줬습니다. 4. 반복문 @for $i from 1 through 7{ .ski#{$i} p{..

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

[css] 자간 줄이기

안녕하세요. 플입니다. 오늘은 자간을 줄여보겠습니다. 1. 글 입력 자간을 조정해줄 글을 먼저 입력합니다. 저는 일부분만 캡처해왔습니다. 어떤 태그를 사용하는지는 상관없습니다. 2. letter-spacing span{ letter-spacing:-1px; } 두 이미지의 차이가 보이시나요? 아래가 letter-spacing을 적용한 이미지입니다. 확실히 자간이 붙어있죠. letter-spacing은 이런 식으로 가독성을 더 좋게 만들기 위해 조정해줍니다. 보통 한글을 적을 때는 -1 정도 값을 주는 편이에요. 폰트에 따라서 다르지만요. 그럼 이만. 총총.

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

[css] 나란하게 배열

안녕하세요. 플입니다. 오늘은 float을 이용해 요소를 나란하게 만들어보겠습니다. 1. float float을 이용해 연도 부분과 내용 부분을 한 줄에 넣을 것입니다. p{ float:left; } float은 띄우다 라는 뜻으로 이것을 사용했을 때 '띄웠다'라고 표현하기도 합니다. left 즉, 왼쪽으로 띄웠으니 오른쪽 공간이 빕니다. 비는 공간으로 내용 부분이 올라오는 것입니다. 아니면 왼쪽으로 붙었다고도 표현할 수 있습니다. 2. 팁 사실 오른쪽에 있는 요소가 inline이었기 때문에 오른쪽에 있는 것이지 block요소였다면 여기에도 float을 줘야 합니다. float이 안 먹었을 때는 이렇게 뒤쪽까지 자리를 차지하게 됩니다. 띄웠다는 것은 레이어 층이 나눠졌다는 말과 같아서 두 요소는 다른 레..

coding/html + css · 2019. 11. 7. 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