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

Front-end47

[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.
[HTML]라이트모드, 다크모드 이미지를 picture에 미디어(media)쿼리로 다른이미지 불러오기 다크모드나 해상도에 따라 이미지를 다르게 보여줄때 유용하게 사용됩니다. 간단히 설명을 드리자면 source media는 css에 미디어쿼리와 동일하다고 생각하시면 됩니다. 아래 내용을 참고하셔서, 라이트/다크 모드일때 보여지는 이미지와, source 아래 기본 이미지를 넣으시면 됩니다. 반응형(해상도별) 예시 @media screen and (max-width:921px) { } (해상도 예시) 디바이스(운영체제별) 라이트, 다크모드 @media (prefers-color-scheme: dark) { } (디바이스 다크모드 예시) 2023. 6. 6.
[Javascript]다크 모드(dark) 적용 후 페이지 전환 시 라이트 배경 깜빡이는 문제 다크모드 적용 후 페이지 전환 시 깜빡이는 문제가 생길 수 있습니다. 원인 근본적인 이유는 페이지를 읽는 순서와 적용시점 때문입니다. 책을 읽을 때 위에서부터 읽듯이 웹페이지도 위에서 부터 순차적으로 코드를 읽고 실행을 시킵니다. 다크모드 적용하는 방법은 다양합니다만, html 혹은 body에 dark 관련 class를 추가해서 제작을 했다면, 스크립가 다크를 감지해서 먼저 코드상에 적용이 되어야 합니다. ex) 그리고 css에 적용을 했을때는 [color-thema="dark"] body {background:var(--background)} 이런 식으로 적용이 되겠죠? 다른 방식으로는 body class="dark-mode" 이렇게 될 수 도 있겠네요. 해결방법은 웹페이지 로딩이 다 되고 나서 적용이.. 2023. 6. 4.
[Javascript]자바스크립트 날짜 시간 정보를 가져오는 함수 자바스크립트에서는 Date 객체를 사용하여 날짜와 시간 정보를 가져올 수 있습니다. Date 객체를 생성하고 해당 객체의 메서드를 사용하여 다양한 날짜와 시간 정보를 얻을 수 있습니다. 현재 날짜와 시간 가져오기 const currentDate = new Date(); console.log(currentDate); // 예: Sun May 31 2023 10:30:00 GMT+0900 (Korea Standard Time) 위의 코드에서 currentDate 변수에 현재 날짜와 시간 정보가 담긴 Date 객체가 생성됩니다. 해당 객체를 출력하면 현재 날짜와 시간이 표시됩니다. 연도 가져오기 const currentYear = currentDate.getFullYear(); console.log(curre.. 2023. 6. 1.
[Javascript]자바스크립트 타입변환 JavaScript에서는 다양한 방법으로 타입 변환을 할 수 있습니다. 일반적으로 사용되는 방법들은 다음과 같습니다. 암시적 타입 변환(Implicit Conversion) JavaScript는 필요한 경우에 자동으로 타입을 변환합니다. 예를 들어, 숫자와 문자열을 함께 사용하면 숫자를 문자열로 자동 변환하여 연결할 수 있습니다. let num = 42; let str = "The answer is " + num; // 암시적으로 숫자를 문자열로 변환하여 연결 console.log(str); // "The answer is 42" 명시적 타입 변환(Explicit Conversion) 개발자가 직접 타입을 변환하는 메서드나 연산자를 사용하여 타입을 변환할 수 있습니다. 문자열로의 변환 toString().. 2023. 5. 23.
[Javascript]자바스크립트 지수 연산자(exponent operator)와 기존 방식 비교 JavaScript에서 지수 연산자는 ** 기호를 사용하여 표현됩니다. 이 연산자는 ES7(ECMAScript 2016)부터 도입되었으며, 거듭제곱 연산을 수행하는 데 사용됩니다. 지수 연산자 아래는 JavaScript에서의 지수 연산자 사용 예시입니다 let result = 2 ** 3; console.log(result); // 출력: 8 위 예시에서 2 ** 3은 2를 3번 곱한 결과인 8을 반환합니다. 음수 일 때 음수는 () 괄호로 묶어줘야 합니다. let result = (-2) ** 3; console.log(result); // 출력: -8 위 예시에서 (-2) ** 3은 -2를 3번 곱한 결과인 -8을 반환합니다. JavaScript의 지수 연산자는 음수에 대해서도 정상적으로 동작합니다... 2023. 5. 22.
반응형