'coding' 카테고리의 글 목록 (3 Page)

폰트어썸 아이콘 깨져서 나올 때 해결 방법 (Font Awesome)

폰트어썸 아이콘이 깨져서 나올 때 해결 방법을 알아봅시다. 1. 폰트 어썸 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com ① 폰트 어썸 아이콘 폰트 어썸에서는 아이콘을 html 코드로 가져와 사용이 가능한 사이트입니다. 코드로 되어있기 때문에 css 적용도 가능하다는 장점이 있죠. - ② 폰트 어썸 사용법 폰트 어썸이 처음이시라면 아래 버튼을 눌러 자세한 사용방법을 확인해 주세요. 폰트어썸 사용하기 2. 폰트 어..

coding/html + css · 2023. 7. 13. 07:30

[SCSS] Live SASS 익스텐션 설치 방법

vs code에서 Live SASS 익스텐션을 설치해 보겠습니다. 1. Live SASS 익스텐션 ① Live SASS Compiler란? SASS 혹은 SCSS를 사용하려면 CSS로 반드시 컴파일을 해줘야 하는데요. 이때 cmd를 이용해 명령어로 컴파일을 해줍니다. 컴파일 방법 자세한 컴파일 방법은 위의 버튼에서 확인해 주세요. 그런데 vs code에서는 익스텐션으로 자동으로 컴파일이 가능하다는 사실! 오늘은 vs code에서 그 익스텐션을 이용해 자동으로 컴파일하는 방법을 알아보겠습니다. 나는 대체 그동안 왜 이 기능을 안 썼는가... 2. Live SASS 익스텐션 설치 ① live sass compiler 검색 vs code 가장 왼쪽에 세로로 된 메뉴가 있습니다. 그중 가장 아래 버튼을 클릭하면..

coding/editor · 2023. 3. 17. 07:30

[CSS] 짝수 태그만 색 바꾸기 (nth-child)

nth-child를 이용해 짝수 태그만 선택해서 색을 바꿔보겠습니다. 1. 짝수 태그만 선택하기 ① 기본 구조 만들기 짝수 태그를 선택하려면 태그가 여러 개 있어야 하겠죠. 원하시는 만큼 태그를 만들어주세요. 저는 태그를 이용해 만들었어요. 예시로 작성한 거라 똑같이 만들 필요는 없지만 궁금하신 분들을 위해아래쪽에 코드를 첨부해 두겠습니다. /* 짝수번째 li 색 변경 홀수는 odd */ li:nth-child(even){ background:#7D9D9C; color:#E4DCCF; } ② even 태그 중 짝수 태그만 선택하고 싶다면 li:nth-child(even)으로 짝수 태그만 선택 가능합니다. 기존 태그와 색을 반대로 넣어주었습니다. even은 짝수를 뜻하는 영어단어입니다. 영어를 잘하면 코딩..

coding/html + css · 2023. 3. 10. 07:30

[VS code] lorem ipsum 단어 수 조절하기

lorem ipsum 단어 수를 조절하는 방법이 있다고 하네요. 같이 해봅시다~! 1. lorem ipsum 단어 수 조절하기 ① lorem ipsum 써보기 로렘 입숨을 그냥 쓰면 위의 이미지와 같이 랜덤으로 나오게 됩니다. 오늘은 이 로렘 입숨 글자를 단어 단위로 조절해 보겠습니다. 로렘 입숨이 뭐야? 하신다면 아래 버튼을 클릭해 주세요. lorem ipsum 사용하기 ② 단어 수 적기 알면 생각보다 간단합니다. lorem + Tab으로 사용했던 로렘 입숨글자를 [lorem + 숫자 + Tab]으로 숫자를 끼워줍니다. 여기서 숫자는 단어 단위로 원하는 길이를 내가 직접 조절할 수 있습니다. ③ lorem ipsum 단어 수 세어 보기 여러분이 세기 귀찮으실 것 같아서 제가 숫자를 적어두었습니다. 위에..

coding/editor · 2023. 3. 9. 07:30

[CSS] 글자(text)에 테두리 넣기

CSS를 이용해서 글자에 테두리를 넣어보겠습니다. 1. text-shadow p{text-shadow: 2px 0 #fff;} ① text-shadow 위의 이미지를 보시면 오른쪽으로 흰색 그림자가 살짝 나와있죠? 한 번에 처리하는 css는 없어서 이렇게 text-shadow를 이용해서 테두리를 만들어줍니다. text-shadow: x좌표 y좌표 블러(생략가능) 색 순서로 써줍니다. 2. 중첩 p{text-shadow: 2px 0 #fff, 0 2px #fff, -2px 0 #fff, 0 -2px #fff;} ① text-shadow 중첩 다른 방향은 어떻게 넣느냐 ,(콤마)를 이용해서 중첩을 할 수 있습니다. -(마이너스)값도 이용해서 오른쪽, 아래, 왼쪽, 위 순서대로 text-shadow를 넣어주었..

coding/html + css · 2022. 12. 30. 07:30

coding 263