You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🎨 CSS 속성 상속 개념 & 적용 우선순위
CSS 속성 상속 CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미친다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다. property 상속 width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align yes vertical-align no text-decoration no white-space yes position no top/right/bottom/left no z-index no overflow no float no ..
![[VSCode] 💽 설정 동기화 하기 👪 - 다른 컴퓨터에서도 같은 코딩환경을 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSudoW%2FbtrgdGLVmWK%2Ffk6i44XoI9dckKJ5gCjTT0%2Fimg.png)
[VSCode] 💽 설정 동기화 하기 👪 - 다른 컴퓨터에서도 같은 코딩환경을 구축
설정 동기화 기능 설정 동기화를 사용하면 설정, 키 바인딩 및 설치된 확장과 같은 Visual Studio Code 구성에 대해서 변경이 있을 때 마다 백그라운드로 Microsoft 계정이나 github계정에 저장해 놨다가 필요할 때(다른 컴퓨터나 아니면 컴퓨터를 포맷 후 다시 VScode를 사용할 때) 다시 복구해서 동일한 환경을 한번에 구현해 주는 기능입니다. 설정이 변경되든지, 키 바인딩을 변경하던지 확장프로그램을 설치 또는 삭제 하면 자동으로 업데이트를 해 줍니다. 설정 동기화 실행하기 설정 동기화는 파일 > 기본 설정 > 설정 동기화 를 실행하면 됩니다. 아래와 같이 동기화 할 항목을 선택하는 창이 뜹니다. 5가지 종류를 동기화 해줍니다. 1번 GitHub 계정을 선택하면 신규 또는 로그인을하여..
🎨 브라우저의 CSS 기본 스타일 초기화 하기
CSS 스타일 초기화 CSS 스타일 초기화는 브라우저마다 기본으로 제공하는 스타일이 있어서 기본값을 주기 위해 설정을 해주는 세팅이다. 각각의 브라우저(크롬,IE,사파리 등등)에는 브라우저마다 기본으로 제공하는 스타일이 있다. 예를 들면 margin, padding, font등 입력 양식 등의 차이가 있거나 기본 defalt값이 다르기 때문에 이러한 것들을 초기화 하면서 브라우저마다 스타일의 차이를 줄이고자 사용하는 것이다. 즉, HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 브라우저 간의 차이를 최대한 없애, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다. 크로스브라우징 (= 브라우저마다 동일한 모양) 구현할 때 유용하다. HTML 기본 CSS ..
🎨 CSS 기본 사용법 & 문법 정리
CSS(Cascading Style Sheets) 란? CSS는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있습니다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없습니다. css 기본 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자 - CSS를 적용하고자 하는 HTML 요..
📚 jQuery 기본 문법 $() 정리
jQuery 기본 문법 $(선택자).동작함수1().동작함수2() $(선택자).동작함수1().동작함수2() 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. - 선택자를 이용하여 원하는 HTML 요소를 선택하고, - 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. jQuery $객체 jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 한다. 생성된 jQuery 객체는 다양한 메소드를 가지는데, jQuery를 학습한다고 하는 것은 대체로 이 메소드를 사용하는 방법을 익히는 것이다. $() // jQuery() 함수의 축약형 jQuery() 함수는 전달되는 인수의 종류에 따라 다른 움직임을 하지만 결국 jQuery 객체를 반환한다. 인수의 종류..
📚 jQuery 설치 & 적용 방법
제이쿼리 설치 한때 전세계에서 가장 많이 쓰던 자바스크립트 라이브러리 설치 & 적용 방법에 대해 포스팅 해본다. 1. 로컬 다운로드 방법 아래 링크로 들어가 jquery 파일을 다운로드 한뒤, 자신의 프로젝트에 넣으면 된다. jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.c..
🏷️ 폼(Form) 태그 양식 & 종류 - 한방 정리
폼(Form) 양식 HTML 에선 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 예를들어 우리가 특정 사이트에 로그인 할때 아래와 같이 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 이처럼 텍스트 필드, 암호 필드, 확인란, 라디오 버튼, 제출 버튼, 메뉴 등과 같은 컨트롤을 포함한 양식 통, 서버로 나의 아이디, 비밀번호를 입력해서 보내 서버의 데이터베이스에 내 정보가 있고, 이것이 일치하면 로그인이 처리되게 된다. 꼭 회원가입 / 로그인 뿐만 아니라 이렇게 주문을 하기 위해 배송지 정보를 기재하고 제출하는 것도 마찬가지이다. 이렇게 웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나..
🚀 버튼 눌러서 iframe 띄우기 코드
버튼 눌러서 iframe 띄우기 코드 html의 data-* 속성을 이용해서 미리 링크를 저장해놓고, 자바스크립트에서 src속성값을 data-src속성값으로 교체해주면 iframe에서 홈페이지 링크가 로드 된다. Button function postYourAdd () { var iframe = $("#forPostyouradd"); iframe.attr("src", iframe.data("src")); } $("button").on("click", postYourAdd);
🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새
시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태그로 일일히 위치 범위를 지정하고 각 태그의 class 명으로 이 요소의 역할을 명시해야 했지만, semantic 태그를 이용하면 태그 이름에서 이 엘리먼트의 위치와 역할을 단번에 알 수 있기 때문에 좀 더 모던하다고 말할 수 있는 것이다. 시맨틱 태그 구성 요소 시맨틱 웹을 위한 태그 설명 header 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 nav 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 mai..
![[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGmoz3%2Fbtruey8tTid%2FTOGapqcJOdmM1xEhmoKVk0%2Fimg.png)
[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)
LocalStorage / SessionStorage API 소개 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다. [ localStorage ] - 로컬에 도메인 별로 지속되는 storage - localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다. - 값을 지우려면 직접 지워줘야한다. (나는 지우기 직전까지 죽지않아) [ sessionStorage ] - 세션이(프로세스, 탭, 브라우저) ..
![[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbV8a0s%2FbtrfXyhqGb1%2FYimJMLP77H72UB0kojd7l1%2Fimg.jpg)
[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기
Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자. ex) username = 홍길동 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 💡 쿠키와 세션..
![[JS] 📚 클로저 (Closure) 개념 완벽 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6qkC3%2FbtrfTLaRmah%2FW3aoP8O00kWs3UemtY7FXK%2Fimg.jpg)
[JS] 📚 클로저 (Closure) 개념 완벽 정리
클로저(closure) 란? 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여, 만일 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 스코프에 접근할 수 있는 함수를 말한다. function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출되었다. 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있다. 이는 함수 innerFunc가 함수 outerFunc의 내부에 선..
