TREASURE408 [Git] .gitignore을 사용해 git에 추가되지 말아야 할 파일 정의하는방법 gitignore 사용해 git에 추가되지 말아야 할 파일 정의하는 방법에 대해 알아보겠습니다. gitignore .gitignore 파일이란? .gitignore 파일은 Git의 root 디렉터리에 저장되어, Git Repository나 Staging Area에 추가되지 말아야 하는(무시되어야 하는) 폴더나 파일을 정의하는 파일이다. .gitignore에 정의된 파일은 Staging Area에 올라가지 않기 때문에 tracking 되지 않는다. 따라서 git status 를 이용했을 때 보이지 않는다. Git에 추가되지 말아야 할 파일 정의 특정 항목별로 무시해야 하는 파일을 알아보기 전에 어떻게 git안에 추가하는지 간단하게 알아보자면 다음과 같습니다. 폴더 전체 무시 다음 줄을 추가하여 특정 폴더에.. FRONT-END/VS & GITHUB 2022. 10. 7. [CSS] hover Media query CSS의 Media query에 대해 알아보다가 몰랐던 기능인 @media(hover: hover)가 유용하다고 느껴 이것에 대해 알아보고자 합니다. hover hover은 데스크톱에서 특정 요소에 마우스를 올렸을 때 행동을 취하는 기능을 제공합니다. a:hover { background-color: red; } 여기서 문제는 '데스크톱'이라는 것입니다. 만약 모바일 이라면? 기존 hover을 사용하면 모바일에서 아주 잠시 동안 데스트톱에서 보이던 hover 효과가 보이게 되고 이것은 모바일 사용자에 있어 부정적인 경험을 주게 됩니다. 당연하게도 모바일에서는 마우스를 올려놓는 행위를 하는 것이 아니라 터치를 하는 행위를 하기 때문입니다. 이때 이것을 해결할 수 있는 방법이 바로 Media query를 사.. TIP/CSS & Tistory 2022. 10. 7. [CSS] Pseudo-elements (placeholder, selection, first-letter) CSS에서 많이 사용하는 Pseudo-elements 3가지에 대해 간단하게 알아보도록 하겠습니다. Pseudo-elements 이 pseudo-elements는 실제로 존재하는 element는 아니지만, 스타일링을 할 수 있게 해 줍니다. ::placeholder ::placeholder는 placeholder의 스타일을 제어할 수 있습니다. ::placeholder { color: blue; font-size: 1.5em; } See the Pen placeholder by 서근 (@seogun95) on CodePen. ::selection ::selection은 텍스트를 마우스를 통해 드래그해 선택할 때 나타나는 효과를 제어할 수 있습니다. p::selection { color: red; back.. FRONT-END/CSS 2022. 10. 6. [CSS] 결합/연결자 - Combinators CSS에서 유용하게 사용되는 결합자(combinators)에 대해 알아보도록 하겠습니다. Combinators CSS에서 선택자를 결합하는 방법에는 여러 가지가 존재하고 사용하는 결합자에 따라 결과도 다르게 보입니다. 자손 결합자 (Descendant Selector) 부모 그리고 자식 관계 "" 공백 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. 자손 선택은 지정된 요소의 자손인 모든 요소와 일치합니다. 안녕하세요 서근 개발 노트입니다. 블라블라블라1 블라블라블라2 블라블라블라3 블라블라블라4 블라블라블라5 div p { background-color: yellow; } 자식 결합자(Child Selector) 부모 + 자식 관계 > 결합자라고도 칭합니다. 자식 결합자는 첫 번째 요소의 바로 아래.. FRONT-END/CSS 2022. 10. 6. [CSS] Collapsing-Margin (마진 겹침 현상) CSS로 작업을 하다보면 마진이 겹치는 현상을 발견할 수 있습니다. 오늘은 이 Collapsing-margin 현상에 대해 알아보도록 하겠습니다. Collapsing-Margin 마진 상쇄 현상을 MDN에서는 다음과 같이 정의하고 있습니다. 블록의 top 및 bottom 마진은 크기가 마진 중 가장 큰(또는 동일한 경우 하나만) 단일 마진으로 결합(상쇄)되며, 이를 마진 겹침 상쇄라고 합니다. 하지만 floating 및 position absolute 요소의 마진은 절대 축소되지 않습니다. -MDN 즉, 마진 상쇄는 어떤 두 개 이상의 블록(block)의 top 그리고 bottom의 마진이 겹칠 때 어느 한쪽 값만 적용하는 브라우저 자체의 규칙입니다. 마진 상쇄 현상은 죄(left) 우(right)에서는.. FRONT-END/CSS 2022. 10. 6. [HTML] Meta 태그, OG(오픈그래프) 사용 방법 HTML 에서 Head 부분에 해당하는 meta og(오픈그래프)에 대해 알아보도록 하겠습니다. 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다. OG (Open Graph) 사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다. 대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다. OG Type 사용 방법 meta og 태그를 사용하기 위해서는 HTML의 .. FRONT-END/HTML 2022. 10. 5. [HTML] link 태그 shortcut icon으로 파비콘 적용 방법 HTML link 속성을 통해 파비콘을 적용하는 방법에 대해 알아보겠습니다. 파비콘 파비콘이란 웹사이트 주소창의 조그마한 아이콘을 의미합니다. 이것이 바로 shortcut icon 입니다. shortcut icon 사용 방법 shortcut icon을 사용하기 위해서는 link 태그를 사용해야 합니다. 이제 이 link 태그를 안쪽에 넣어주면 적용이 됩니다. 파비콘 만드는 방법 파비콘을 만들기 위해서는 이미지 파일을 ico 형태로 변경해줘야 합니다. 이것은 다양한 사이트에서 변환이 가능한데, 이 포스팅에서는 genfavicon을 활용하는 방법을 알려드리도록 하겠습니다. http://genfavicon.com/ 접속 select your image 탭에서 파비콘으로 사용할 이미지 선택 사용할 부분 지정후 .. FRONT-END/HTML 2022. 10. 4. [HTML] Meta 태그 HTML에서 meta 태그에 대해 알아보도록 하겠습니다. Meta meta 태그는 보이지 않는 태그라고 볼 수 있습니다. 즉 meta는 부가적인 정보를 보여주는 것이죠. 예를 들어 구글에 넷플릭스를 검색하고 아내와 같은 로그인 링크를 볼 수 있는데, 그 아래 세부 정보중 '스마트 TV, 태블릿...'과 같은 텍스트를 확인할 수 있습니다. 이것을 넷플릭스 홈페이지의 개발자 도구를 통해 확인해보면 meta의 content 안에 그대로 들어가 있는 것을 확인할 수 있습니다. 그리고 meta 태그는 닫는 태그가 없이 사용됩니다. 위에서 봤던 것처럼 meta 태그는 두 개의 속성을 가지고 있습니다. 바로 name =""과 content =""입니다. Meta 태그 활용 meta 태그는 위와 같이 문서의 정보를 담.. FRONT-END/HTML 2022. 10. 4. [윈도우] Windows Defender 끄는 방법 - 윈도우 디펜더 크랙 버전을 설치하기 위해서는 Windows 10 또는 Windows 11에서 윈도우 디펜더를 꺼야 정상적인 설치가 가능합니다. 오늘은 윈도우 디펜더 끄는 방법에 대해 알아보도록 하겠습니다. 윈도우 디펜더 윈도우 디펜더는 외부 위협으로부터 컴퓨터를 보호하는 소프트웨어입니다. 바이러스 위협으로부터 컴퓨터를 보호하기 위해 Microsoft 사에서 개발했습니다. 윈도우 10과 윈도우 11에는 기본으로 설치되어 제공되고 있습니다. 윈도우 디펜더 끄는 방법 - 설정창 Windows 11을 기준으로 윈도우 디펜더를 끄는 방법에 대해 설명해드리겠습니다. 1. 윈도우 설정으로 들어갑니다. 2. 설정 왼쪽 사이드바에서 '업데이트 및 보안' ➜ 'Windows 보안' 탭으로 들어갑니다. 3. Windows 보안 창의 '바.. TIP/Etc Tip 2022. 9. 21. [맥북] 패러렐즈 한영전환 및 맥 키보드와 동일하게 설정 Paralles 18의 윈도우11에서 한영전환 키 및 키타 단축키를 맥북과 동일하게 하는 방법에 대해 알아보겠습니다. Paralles 18 한영키 레지스트리 우선, 패러렐즈 18에서 한영키를 전환하기 위한 레지스트리를 맥북에서 다운로드하여줍니다. 아래 설치 파일을 다운 받아주세요 그리고, 다운로드한 파일을 맥북에서 열게 되면 자동으로 패러렐즈 18에서 해당 레지스트리가 열리게 됩니다. 윈도우 11에서 한영키 레지스트리를 추가해주고, 윈도우 11을 재부팅해줍니다. 기본 언어 변경 이제 패러렐즈 18의 윈도우11에서 기본 언어를 한국어로 지정해줍니다. 설정 ➜ 시간 및 언어 ➜ 언어 및 지역 ➜ 표시 언어 ➜ 한국어 만약, 영어 가 있다면 삭제해주세요. 키보드 레이아웃 변경 만약 위 레지스트리를 설치해도 한.. TIP/Etc Tip 2022. 9. 17. [CSS + JS] 스켈레톤 로딩(Skeleton Loading) - 컨텐츠 모자이크 CSS와 JS를 사용하여 웹 페이지가 로딩될 때 스켈레톤 로딩화면(콘텐츠 모자이크)을 구현하는 방법에 대해 알아보겠습니다. Skeleton Screen 스켈레톤 스크린은 페이지 콘텐츠가 완전히 렌더링 되기 전에 나타나는 시각적 자리 표시자입니다. 스켈레톤 스크린은 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성됩니다. 스켈레톤 로딩을 사용하고 있는 사이트 스켈레톤 스크린(스켈레톤 로딩)은 유튜브 사이트에서 쉽게 볼 수 있습니다. DEMO 스켈레톤 로딩 화면을 구현하기 전 데모 페이지를 확인해볼 수 있습니다. https://skeleton-animation-js.netlify.app/ 스켈레톤 로딩 구현 이제 이 스켈레톤 로딩을 구현해보도록 하겠.. FRONT-END/JAVASCRIPT 2022. 9. 16. [JS] JQuery 윈도우 Event Methods JQuery Event Methods jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보겠습니다. 이벤트란? 웹 페이지가 응답할 때 발생하는 작업을 이벤트라고 합니다. 이 이벤트는 어떠한 일이 발생하는 정확한 순간을 의미합니다. 예를 들어 아래와 같은 이벤트를 사용할 수 있게 됩니다. 특정 요소에 마우스 Focus 요소 클릭 로딩이 끝난 후 작동 등... 일반적인 이벤트 종류 일반적으로 많이 사용되는 이벤트의 종류에 대해 알아보겠습니다. 문서 로딩 이벤트 ready() : 문서 로딩 - html의 문서가 로딩되었음을 알린다. (이미지, 동영상 등은 영향을 끼치지 않음) $(document).ready(function() { }); $(function() { }); 위 코드를 사용하게 되면 bo.. FRONT-END/JAVASCRIPT 2022. 9. 15. [JS] Input이 활성화 될 때, 커서 자동 Focus 하는 방법 Auto Focus Display:none인 태그가 포함된 요소가 JS를통해 나타나게 해줬을때 커서가 자동으로 input에 foucs 되게 하는 방법에 대해 알아 보겠습니다. Input 생성 우선 텍스트를 입력할 수 있는 태그를 생성해줍니다. 버튼 클릭 시 input 보이기 위에 만들어놓은 태그를 display:none으로 없애준 뒤에, 특정 버튼을 누르면 다시 이 보이도록 자바스크립트를 통해 코드를 작성합니다. $(document).ready(function () { var target = $('.container'); $(document).on('click', '.showInput', function (e) { $('.showInput').hide(); target.fadeIn(100).addClas.. FRONT-END/JAVASCRIPT 2022. 9. 15. [HTML] textarea의 placeholder속성 줄 바꿈 처리 HTML의 textarea 태그의 placeholder 속성에 줄바꿈 처리 하는 방법에 대해 알아보겠습니다. textarea textarea 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용합니다. 텍스트 입력 영역의 크기는 textarea 요소의 cols 속성과 rows 속성으로 지정할 수 있으며, CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다. placeholder 속성 placeholder 속성은 텍스트 영역의 예상 값을 설명하는 짧은 힌트를 지정합니다. 사용자가 값을 입력하기 전에 짧은 힌트가 텍스트 영역에 표시됩니다. placeholder 줄 바꿈 placeholder에서 줄 바꿈을 원할 때 태그는 사용되지 않습니다.. FRONT-END/HTML 2022. 9. 14. [JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none) 복잡한 자바스크립트 없이 HTML의 button을 사용하여 클릭 한 번 만으로 부모클래스를 사라지게 하는 방법에 대해 알아보도록 하겠습니다. Close button 버튼을 만드는 방법은 다양한데 이번에는 태그를 사용하여 구현해볼까 합니다. HTML 속성 추가 HTML에 임의의 Container를 생성하고 그 안에 button 태그를 입혀보겠습니다. × Javascript button태그 안의 onclick에 자바스크립트를 직접 넣어준 형태인데, 살펴보자면 아래와 같습니다. this : "자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수" parentElement : "노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다" style : ".. FRONT-END/JAVASCRIPT 2022. 9. 13. 이전 1 2 3 4 5 6 7 ··· 28 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기