본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

Front-end52

[SASS]SASS,SCSS 어느것을 사용하면 좋을까? 차이점 살펴보기 초기 버전의 Sass는 들여쓰기를 사용하여 구문을 정의하는 특이한 문법을 가졌습니다.그러나 이러한 문법은 일부 사용자에게 혼란을 줄 수 있었고, CSS와의 호환성이 떨어졌습니다. 이에 따라 나중에 SCSS가 도입되었습니다. SCSS는 CSS와 거의 동일한 구문을 가지고 있기 때문에 CSS를 작성하던 개발자들이 쉽게 스위칭할 수 있었습니다. 또한 SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 구문을 정의하기 때문에 CSS와의 호환성이 더 높았습니다. 이러한 이유로 SCSS가 Sass보다 더 인기 있고 널리 사용되고 있습니다. 결국, Sass와 SCSS는 모두 Sass의 구현 형태 중 하나이며, 프로젝트에 따라 선택할 수있습니다. 그러나 대부분의 경우 SCSS가 더 일반적으로 사용되며, Sass보.. 2024. 4. 25.
[SCSS]SCSS문법과 예시 SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다. 1.변수 (Variables)$ 기호를 사용하여 변수를 정의할 수 있습니다.$primary-color: #FF6347; 2.중첩 (Nesting)CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다..container { width: 100%; .header { background-color: #333; color: #FFF; }} 3.Mixin재사.. 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "배열의 길이에 따라 다른 연산하기" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 배열의 길이에 따라 다른 연산하기문제 설명정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항1 ≤ arr의 길이 ≤ 1,0001 ≤ arr의 원소 ≤ 1,0001 ≤ n ≤ 1,000 입출력 예arr[444, 555, 666, 777][444, 655, 666, 877]n27100result[76, 12, 127, 276, 60][444, 655, 666, 877] 입출력 예 설명입출력 예 #1- 예제 1번의 arr의 길.. 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "뒤에서 5등까지" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 뒤에서 5등까지문제 설명정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항- 6 ≤ num_list의 길이 ≤ 30 - 1 ≤ num_list의 원소 ≤ 100 입출력 예num_list[12, 4, 15, 46, 38, 1, 14] result[1, 4, 12, 14, 15] 입출력 예 설명입출력 예 #1- [12, 4, 15, 46, 38, 1, 14]를 정렬하면 [1, 4, 12, 14, 15, 38, 46]이 되고, 앞에서 부터 5개를 고르면 [1, 4, 12, 14, 15]가 됩니다.  문제 .. 2024. 4. 25.
[Javascript]코딩테스트 프로그래머스 "정수" 부분 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 정수 부분문제 설명실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요. 제한사항0 ≤ flo ≤ 100 입출력 예flo result1.42 169.32 69 입출력 예 설명입출력 예 #1- 1.42의 정수 부분은 1입니다. 입출력 예 #2- 69.32의 정수 부분은 69입니다. 문제 풀이let solution = (flo) => Math.floor(flo);console.log(solution(3.534423)); //확인 풀이 설명Math.floor정적 Math.floor()메서드는 항상 반올림하여 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환합니다... 2024. 4. 25.
[Javascript]자바스크립트 console.log 사용방법 JavaScript의 console.log() 함수는 콘솔에 메시지를 출력하는 데 사용됩니다. 이 함수를 사용하여 코드 실행 중에 값을 확인하거나 디버깅에 도움을 얻을 수 있습니다. 아래는 console.log()의 간단한 사용 방법입니다 1.텍스트 출력 console.log("안녕하세요, 콘솔!"); 2.변수 출력 let 변수 = "값"; console.log(변수); 3.여러 값 출력 let 변수1 = "값1"; let 변수2 = "값2"; console.log(변수1, 변수2); 4.변수와 문자열 결합 let 숫자 = 42; console.log("숫자는 " + 숫자 + "입니다."); 5.포맷된 출력 let 이름 = "John"; let 나이 = 25; console.log(`이름: ${이름}, .. 2023. 12. 17.
[Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제 JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다. 객체(Object)란? 객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다. object = 물건, 물체 자바스크립트 객체는 속성(Property)과 행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다. 객체의 기본 구조 및 예제 다음은 JavaScript 객체의 기본 구조 및 예제입니다. // 객체 생.. 2023. 12. 17.
[Jquery]티스토리 Youtube 동영상 첨부시 반응형 처리하기 티스토리에서 'Youtube 동영상 첨부 시' Jquery로 반응형 처리하는 방법입니다. 글쓰기 에디터에서 동영상을 첨부했을때입니다. 위처럼 동영상 첨부를 하게 될 경우 해상도가 줄어들면 영상 사이즈가 고정되어 있어서 줄어들지 않습니다. 위 문제를 Jquery로 자동으로 리사이징 해주는 방법이라고 이해하시면 됩니다. 스킨 수정 1. 티스토리 로그인 후 '꾸미기 > 스킨 편집'으로 접근합니다. 2. 스킨 편집 HTML에서 위에 아래 코드를 삽입합니다. '저장' 버튼을 누릅니다. 코드 설명 해당 JavaScript 코드는 jQuery를 사용하여 YouTube 비디오를 리사이즈하는 함수를 정의하고, 창 크기가 변경될 때와 문서가 로드될 때 이 함수를 호출하는 이벤트 핸들러를 설정합니다. - $(window)... 2023. 12. 7.
[CSS]테두리 border에 그라디언트 효과 넣기 CSS 속성 linear-gradient와 border-image-slice 를 이용해서 테두리(border)에 그라데이션 효과를 주는 방법입니다. border-image-slice border-image-slice는 CSS 속성 중 하나로, 배경 이미지를 사용하여 요소의 테두리를 꾸밀 때 이미지를 어떻게 잘라낼지를 지정합니다. 이 속성은 border-image-source, border-image-width, border-image-outset와 함께 사용되어 테두리 이미지를 제어하는 데에 기여합니다. border-image-slice의 기본값은 100%입니다. 이 값은 이미지를 가로 및 세로로 100%만큼 사용하도록 설정하는데, 이는 이미지의 전체 부분을 사용한다는 것을 의미합니다. 다음은 borde.. 2023. 12. 4.
[WebSquare]웹스퀘어5 퍼블 실무 후기 이번에 진행된 프로젝트의 개발환경이 웹스퀘어 5였다. https://wtech.inswave.kr/websquare/websquare.html?w2xPath=/cm/xml/index.xml 인스웨이브 개발자포털 W-Tech wtech.inswave.kr 같이 투입된 응용개발 업체와 퍼블은 웹스퀘어가 처음이었고, 프로젝트 투입 전 동영상 강의를 수료하고 투입을 했다. 교육 신청을 했지만 강사가 직접 설명한 게 아닌, 아래 내용을 그대로 재탕해서 좀 실망스럽긴 했다. https://www.youtube.com/playlist?list=PL7a9HhkvOVb3RwaphJUnuqkrJ8UKcy-kJ SP5 퍼블리싱 실습과정 [웹스퀘어5-교육] www.youtube.com 웹스퀘어는 여러 큰 프로젝트 개발환경으로.. 2023. 11. 14.
[GIT]git 명령어와 설명 Git은 매우 강력한 버전 관리 시스템이며, 수많은 명령어와 옵션을 제공합니다. https://git-scm.com/ Git git-scm.com 이것은 Git의 모든 명령어를 아주 긴 목록으로 나열할 수 있겠지만, 대부분의 개발자는 기본적인 명령어를 알고 있고 필요한 경우 공식 문서나 온라인 자원을 참조하여 고급 기능을 배우기 때문에 모든 Git 명령어를 외우는 것은 필요하지 않습니다. 그러나 Git을 사용하는 데 도움이 될 수 있는 일부 중요한 명령어와 사용 예제를 제공합니다. 1. 저장소 생성 및 설정 - `git init`: 새로운 Git 저장소 생성. - `git clone [URL]`: 원격 저장소 복제. - `git config`: Git 구성 관련 명령어로, 사용자 정보, 커밋 템플릿, 병.. 2023. 9. 29.
[VS Code]Vs Code 유용한 단축키 Visual Studio Code (VS Code)는 다양한 단축키를 제공하여 개발자들이 빠르고 효율적으로 코드를 편집하고 관리할 수 있도록 도와줍니다. 다음은 일반적으로 사용되는 몇 가지 VS Code 단축키입니다. 기본 단축키와 함께 확장(Extensions)을 통해 추가적인 단축키를 사용할 수도 있습니다. 파일 및 에디터 작업 - 파일 열기: `Ctrl + O` (또는 `Cmd + O` Mac) - 파일 저장: `Ctrl + S` (또는 `Cmd + S` Mac) - 파일 닫기: `Ctrl + W` (또는 `Cmd + W` Mac) - 모든 파일 저장: `Ctrl + K, S` (또는 `Cmd + K, S` Mac) - 되돌리기: `Ctrl + Z` (또는 `Cmd + Z` Mac) - 앞으로 가기.. 2023. 9. 25.
[CSS]display:flex 와 display:grid 속성과 설명 웹사이트 제작 시 기존에는 레이아웃을 잡을 때 CSS속성 중에 position, float으로 주로 사용했다면, 요즘 웹사이트는 flex와 grid를 주로 이용합니다. flex와 grid를 사용하는 이유는 float로 번거롭게 해야했던걸 더 쉽게 해결해 주기 때문입니다. display:flex;와 display:grid;는 CSS의 두 가지 다른 레이아웃 속성입니다. 이들은 웹 페이지 내 요소들의 배치와 정렬 방법을 지정하는데 사용됩니다. display: flex 예를 들어, 다음은 플렉스 박스를 생성하고 내부 아이템들을 가로 방향으로 정렬하는 코드입니다 .container { display: flex; justify-content: space-between; /* 아이템 사이 간격을 최대한으로 벌립니다.. 2023. 8. 24.
[HTML]HTML 태그(풀네임)과 의미 - 시멘틱 웹 HTML 태그의 풀네임을 모르는 분들도 많으리라 생각됩니다. 실무에선 풀네임까지는 몰라도 업무를 보는데 크게 지장이 없습니다. 그래도 알아서 나쁠 건 없으니 참고만 하시면 될 거 같습니다. : Hypertext Markup Language (하이퍼텍스트 마크업 언어) : Head (문서 헤드) : Title (문서 제목) : Body (문서 본문) : Heading One (제목 1) : Heading Two (제목 2) : Heading Three (제목 3) : Heading Four (제목 4) : Heading Five (제목 5) : Heading Six (제목 6) : Paragraph (단락) : Anchor (앵커) : Image (이미지) : Unordered List (비정렬 목록) :.. 2023. 6. 19.
[Javascript]자바스크립트 알고리즘 종류와 예시 몇개 요새 개발자를 채용할 때 알고리즘 테스트를 하는 기업이 늘고 있습니다. 알고리즘 테스트를 하는 이유는 '문제해결' 능력을 보려고 하는 것입니다. 그렇다면 알고리즘이란? 무엇인가? 알고리즘이란? 컴퓨터가 따라 할 수 있도록 문제를 해결하는 절차나 방법을 자세히 설명하는 과정이다 사전적으로는 컴퓨터가 문제를 해결할 수 있도록 하는 절차나 방법이라고 설명하고 있습니다. 산에 정상을 찍는 게 목표라고 생각했을 때 정상을 가기 위해서는 빨리 가는 길, 돌아가는 길, 그 밖에 여러 갈래의 길이 있을 수 있습니다. 여기에서 산을 쉽게 빨리 가는 방법을 찾는다면 그게 빠른 길로 가는 알고리즘이라고 이해하시면 될 거 같습니다. 여러 알고리즘이 있지만, 만약에 본인이 더 좋은 알고리즘을 찾는다면 그 찾은 사람의 알고리즘이.. 2023. 6. 7.

티스토리툴바