'coding/html + css' 카테고리의 글 목록 (17 Page)

[sass/scss] 오류 확인법

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

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

[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. 배경이 채워진 사각형 우선 배경색이 들어간 요소를 준비해주세요. 기본적으로 사각형 모양이니 배경색만 넣어주시면 됩니다. span{ background:#4cb1d6; } 배경색은 background를 이용해서 넣어주세요. 2. border-radius span{ border-radius:15px; } border-radius를 이용해 모서리를 둥글게 만들어주세요. 단위는 px입니다. 저는 잘 보이려고 큰 값을 줬지만 적당히 주는 것이 이쁘게 나옵니다. 한 5px 정도가 적당해 보입니다. 3. 값 따로 주기 span{ border-radius:15px 0 0 0; } border-radius는 마진과 비슷하게 값을 각각 줄 수 있..

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

coding/html + css 98