[CSS] 메뉴 상단에 고정하기 (sticky)

스크롤을 내려도 헤더가 상단에 고정되어 있게 만들어봅시다. 1. 구현 모습 확인 ① 구현 화면 예시 영상을 가져왔습니다. 위의 영상처럼 스크롤을 내려도 헤더가 고정되어 있게 구현할 것입니다. - 2. position: sticky header{ position: sticky; } ① sticky 방법은 간단합니다. 태그에 sticky만 넣어주시면 됩니다. [position:sticky;] 입니다. header{ position:sticky; top:0; } ② top 설정 혹시 sticky를 넣었는데 여전히 헤더가 상단에 있지 않고 올라가나요? 중요한 것이 하나 남았습니다. 바로 위치를 설정해 주는 것입니다. 다른 position 속성과 마찬가지로 top 위치를 설정해 주시면 그 위치에 붙어있습니다. 주..

coding/html + css · 2023. 8. 4. 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

[Github] 깃허브 클론 하는 법 - 연동하기

깃허브 클론 하는 법을 알아보겠습니다. 쉽게 말해 내 컴퓨터와 깃허브를 연동해보겠습니다. 1. 소스트리 소스트리를 이용한 깃허브 클론 하는 법 https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sourcetreeapp.com ① 소스트리 다운로드 소스트리를 이용해 깃허브 클론을 진행할 것이기 때문에 위의 주소에 접속해 소스트리를 다운로드하여주세요. ② 깃허브 주소 복사 깃허브에서 자신의 저장소로 들..

coding/개발 팁 · 2022. 7. 27. 07:30

프론트엔드 개발자를 위한 vs code 단축키 - 아래 빈 줄 생성

프론트엔드 개발자를 위한 vs code 단축키 중 하나입니다. 코드 바로 아래 빈 줄 생성할 때 커서를 맨 끝으로 이동하시나요? 이 포스팅을 끝까지 봐주신다면 아래 빈 줄 생성 시 단축키로 간편하게 만들 수 있을 것입니다. 프론트엔드 개발자를 위한 공부 함께해요! 1. 아래 빈 줄 생성 단축키 커서 아래 빈 줄 생성 ① 커서를 아무 데나 둔다. 커서를 오른쪽 끝으로 두고 엔터를 눌러야 아래쪽에 빈 줄이 생겼었는데, 저희는 이런 수고로움을 줄이고자 단축키를 사용할 것입니다. 그러니 커서를 빈 줄을 생성하고 싶은 바로 윗 줄 아무 곳에나 둡니다. ② Ctrl + Enter 아래 빈 줄 생성 단축키는 Ctrl + Enter입니다. ③ 아래 빈 줄 생성 확인 단축키를 이용해 아래 빈 줄이 생성되었는지 확인합니다..

coding/editor · 2022. 6. 14. 07:00