전체 글69 [HTML/CSS] Sass란? SassSass(Syntactically Awesome Style Sheets)는 CSS의 단점을 보완하기 위한 Preprocessor(전처리 언어)이다. Sass는 css를 변수, 함수, import, 상속 등의 기능 같은 프로그래밍 언어를 작성할 수 있는 문법들을 제공한다. 개발환경 세팅웹 브라우저는 css 파일밖에 모르기 때문에 Sass로 코드를 짰으면 css 파일로 변환해 주는 변환기를 돌려 변환된 css 파일을 html 파일과 사용해야 한다.node.js를 설치해서 변환하는 대신 VScode 에디터를 활용해 보자. VScode의 extension 메뉴에서 Live Sass Compiler를 검색해서 높은 버전을 설치한다. (5.0.0 버전 이상) Sass 파일은 파일명.scss로 생성하면 된다.. 2024. 11. 27. [HTML/CSS] head 태그에 들어갈 내용 정리 body 내용HTML 문서의 기본 템플릿은 꼭 head, body 태그를 포함해야 한다.head 태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데, head 태그 내에서 쓸 수 있는 중요한 태그들을 몇 가지 나열해 보자. 1. 각종 css 파일들css 파일들을 첨부할 때 링크 태그를 집어넣을 수 있다.위 경로는 현 html 파일과 같은 위치에 있는 css 폴더 내의 main.css 파일을 첨부하라는 뜻이다.(1) css/main.css(2) /css/main.css(1)은 상대경로로 현재 html 파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미,(2)는 절대경로로 현재 사이트의 메인 경로(abcd.com)부터 시작해서 abcd.com/css/main.. 2024. 11. 21. [JavaScript] Switch 문법 if else 문법 대신 쓸 수 있는 switch라는 문법이 있다.if else 문법으로도 모든 걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch 문법을 사용한다. switch 문법 사용법// 문법switch (변수){ case 값1 : 실행문; break; case 값2 : 실행문; break; case default : 실행문;}// 사용법let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break; case 4 : alert('변수가 4네요'); break; case default : alert('아무것도 해당 안 됨'); break; }▲ switch의 소괄호에는 조.. 2024. 10. 24. [JavaScript] 캐러셀에 스와이프 기능 만들기 & 터치 이벤트 보호되어 있는 글 입니다. 2024. 10. 23. [JavaScript] 스크롤 위치에 따라 변하는 애니메이션 보호되어 있는 글 입니다. 2024. 10. 22. [JavaScript] position : sticky 활용하기 보호되어 있는 글 입니다. 2024. 10. 21. 이전 1 2 3 4 ··· 12 다음
