파송송의 코딩테스트 공부

[CSS] Flex box 정 가운데 배치 / 배경 이미지 추가

정 가운데 배치 justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. 안녕 body { background-color: #EA2A81; display: flex; justify-content: center; align-items: center; height: 100vh; } main { background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 500px; height: 600px; } 배경 이미지 추가하기 befor를 통해서 배경 이미지를 추가할 수..

콜백함수

콜백함수 정의 함수에 파라미터로 들어가는 함수가 콜백함수 용도 순차적으로 실행하고 싶을 때 씀 많이 사용하는 addEventListener에도 콜백 함수가 들어가있다. 함수의 파라미터 자리에 있는 바로 function 부분!! 버튼을 클릭 한 후에 function() 인 콜백 함수 부분 실행되므로 순차적임~ addEventListener("click", function() { }) 또한 setTimeout에도 콜백 함수가 들어가있다. 1초 경과 후에 function() { } 인 콜백함수가 실행된다. setTimeout(function() { }, 1000) 특징 1. 다른데스 만든 함수도 콜백함수로 넣을 수 있다. function getName() { console.log("name"); } docum..

[JS] 이벤트 다루기

이벤트 위임 다수의 배열 객체에 이벤트리스너를 하나 하나씩 다 걸어준다는 것은 메모리를 많이 잡아먹게됩니다. 이러한 낭비 발생을 방지하기 위해서 이벤트 위임이라는 개념을 사용하게 됩니다. 예시를 봅니다. ul태그 안에 여러개의 li 태그가 존재합니다. 이 li 태그에 전부 forEache를 이용해서 이벤트 리스너를 걸어주는것은 꽤나 비효율적입니다. 장바구니 노트북 모니터 의자 키보드 마우스 책상 위의 방법 말고 다른 방법으로 이벤트 위임을 사용해보겠습니다. 이벤트 위임 방법 1 ul 태그 아래 li 태그들이 존재하므로 li 태그의 부모 요소에게 이벤트를 걸어주면 주었습니다. 부모요소를 통해서 자식 요소인 li에게도 이벤트가 전달되게 됩니다. 조금더 타겟을 좁혀봅시다. 부모 태그인 ul에 event.tar..

자바스크립트 API 통신

XMLHttpRequest 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다 const xhr = new XMLHttpRequest(); //인스턴스 생성 xhr.onreadystatechange = function() { if (xhr.readyState == xhr.DONE) { if (xhr.status === 200) { console.log(xhr.response) }else { console.log("error"); } } } xhr.open("GET", "https://jsonplaceholder.typicode.com/todos..

자바스크립트 기본 문법

const name = (first, second, ...nums) => { console.log(first); console.log(second); console.log(nums) } console.log(name(1, 2, 3, 4, 5, 6)) 출력 1 2 [3, 4, 5, 6] 'use strict' Strict Mode의 선언방식 입니다. 느슨한 자바스크립트 문법을 엄격한 문법으로 정의해준다. 전체 스크립트 또는 부분 함수에 적용가능 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생 시킵니다. 상대적으로 안전하지 않은 액션이 발생하는 것을 방지합니다. 정확하게 고려되지 않은 기능들을 비활성화 시킵니다. 'use strict' function strict() { // 함수-레벨 strict mode..

[css] 반응형 레이아웃 만들기

양쪽 여백 잡기 margin : 0 auto; 위아래는 0만큼 띄여지고, 좌우는 가운데로 맞춰짐 .container { background-color: rgb(188, 163, 255); max-width: 768px; margin: 0 auto; } container 세로 꽉 채우기 min-height: 100vh; .container { background-color: rgb(188, 163, 255); max-width: 768px; min-height: 100vh; } 여러줄 사용하기 flex-wrap: wrap; .box-container { background-color: rgb(160, 255, 180); width: 100%; display: flex; flex-wrap: wrap; } d..

[CSS] flex box, grid

flex box 참고 https://armadillo-dev.github.io/css/what-is-flexbox/ [CSS] Flexbox 이해하기 필자는 웹 페이지의 레이아웃을 구성하기 위해 float와 position 등의 속성을 주로 이용했다. 그러나 Flexbox의 등장 이후 사용 빈도가 현저히 줄어들었다. 이 글에서는 Flexbox에 대해 설명하고, 예제를 armadillo-dev.github.io https://heropy.blog/2018/11/24/css-flexible-box/​ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible ..

[CSS] 자주 사용하는 속성

margin 요소의 네 방향 바깥 여백 영역을 설정 한 개의 값 - 모든 네 면의 여백을 설정합니다. 두 개의 값 - 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다. 세 개의 값 - 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다. 네 개의 값 - 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향) /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0 auto; padding 네 방향 안쪽 여백 영역을 설정 ..

[CSS] 단위(em, rem, vw, vh, vmax, vmin)

폰트 상대 단위 em과 rem은 둘 다 CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위입니다. 예를 들어, font-size: 16px인 경우, 상대 단위는 브라우저에 의해서 다음과 같이 계산됩니다. (브라우저의 기본 font-size = 16px) 0.5em = 16 px x 0.5 = 8px 1em = 16 px x 1 = 16px 2em = 16 px x 2 = 32px 3em = 16 px x 3 = 48px 여기서 font-size를 20px로 늘릴 경우, 상대 단위도 다음과 같이 비례해서 증가되게 됩니다. 0.5em = 20 px x 0.5 = 10px 1em = 20 px x 1 = 20px 2em = 20 px x 2 = 40px 3em = 20 px x 3 = 60px ..

[CSS] 선택자

속성 선택자 대괄호 안에 속성(attribute)이나 속성(attribute)+값(value)을 넣어서 선택합니다. [attr] a[target] 서울 a[target] { color: goldenrod; } [attr=value] a[href="https://pinenamu.tistory.com"] 서울 인천 세종 대전 a[href="https://test.com"] { background-color: goldenrod; } input[type="submit"] input[type="submit"] { background-color: goldenrod; } [attr^=value] 속성의 값이 value로 시작하는 속성을 선택합니다. 서울 인천 세종 대전 a[href^="https"] { backgro..

HTML 태그 : form

input 태그 앞에 라벨링을 해줄 수 있습니다. 따로 쓸 경우 태그 안에는 for=""를 통해서 태그는 id=""를 통해서 연결시켜줍니다. 한꺼번에 쓸 경우에는 태그 안에 태그를 넣어줍니다. 과 으로 버튼 만들수 있고, 도 버튼을 만들수 있습니다. 이 두개의 차이점은 태그의 value 특성에는 텍스트만 입력해야 하지만, 태그에는 다른 컨텐츠(, 등)를 추가할 수 있습니다. 를 통해서 선택 리스트를 만들 수 있습니다. 또한 을 통해서 묶어서 표현 가능합니다. HTML 태그 한눈에 보기 좋은 사이트 https://heropy.blog/2019/05/26/html-elements/

HTML 태그 : img의 srcset, size

반응형 이미지(Responsive images) srcset은 브라우저에게 제시할 이미지 목록과 그 크기를 정의한다. 각 쉼표 앞에 이렇게 적는다. 이미지 파일명 (elva-fairy-480w.jpg.) 공백 이미지 고유 픽셀 너비 (480w) — px이 아니라 w 단위를 사용한다는 데 주의하라. 이것은 이미지의 실제 사이즈인데, 컴퓨터에서 이미지를 확인하면 찾을 수 있다. (예컨대, 맥에서는 파인더에서 이미지를 선택하고 Cmd + I를 눌러 정보를 표시 할 수 있다). sizes는 미디어 조건문들을 정의하고(예를 들면, 화면 크기) 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다(앞서 언급한 힌트). 이 경우, 각 쉼표 전에 이렇게 쓴다. 미디어 조건문 ((max-width:480p..

HTML 태그 : ol, ul, li

HTML 요소는 순서가 있는 목록(order list)을 나타냅니다. Mix flour, baking powder, sugar, and salt. In another bowl, mix eggs, milk, and oil. Stir both mixtures together. Fill muffin tray 3/4 full. Bake for 20 minutes. type항목을 셀 때 사용할 카운터 유형. 'a'는 소문자 알파벳, 'A'는 대문자 알파벳, 'i'는 소문자 로마 숫자, 'I'는 대문자 로마 숫자, '1' 는 숫자(기본값)을 나타냅니다. Introduction List of Greivances Conclusion 결과 Introduction List of Greivances Conclusion st..

HTML 태그 : 가끔 사용

언젠가는 사용할법한 HTML 태그의 종류의 일부를 정리해보도록 하겠습니다. HTML 요소는 하나의 문단을 나타냅니다. : 인라인 인용문 요소 HTML 요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. 는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 요소를 사용하세요. HTML 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 결과 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용합니다. ** ** * * * * * ** * * * * 결과 ** ** * * * * * ** * * * * 아래첨자를 넣고 싶을 때 사용합니다. subscript를 의미합니다. 이것은 ..

DOM 조작하기

createElement를 이용해서 element 생성 setAttribute를 통해서 element에 속성 추가 textContent를 통해서 text value 추가 appendChild를 통해서 element 추가 (appendChild를 이용하면 제일 뒤에 추가된다) insertBefor를 사용하면 중간에 element 생성를 생성할 수 있다. removeChild를 통해서 element 삭제가 가능하다. innerHTML을 통해서도 element를 추가 가능하다. 한번 입력되고 변경되지 않는 부분에 사용하는것이 좋다.

gitbub - Repositories 생성, commit 하기

1. github.com 깃헙 웹 페이지 접속 > Repositories 생성 > New 2. Repository 생성 - 이름은 소문자 - 설명 기록 - 권한은 public 3. GitHub Desktop 으로 와서 Clone repository 생성 4. github 웹페이지에서 생성한 repository 이름 찾기 - Local path 확인 5. 4에서 만들어준 Local Path VScode에서 열고, README.md 파일 생성 6. 새로운게 생성, 수정되면 GitHub Desktop에서 변경 적용되어 보임 - GitHub Desktop에서 생성된 파일을 체크하고 커밋 이름 및 설명 적은 후에 커밋 7. 커밋 완료 후에 bublich 8. 커밋과 publish가 완료된 경우 내 깃헙에 커밋이 ..