본문 바로가기

개발새발13

[JS] 자바스크립트의 동기와 비동기, Promise 1. 동기방식과 비동기방식 동기방식은 순차적, 직렬적으로 실행되는 방식이고, 비동기방식은 병렬적으로 실행되는 방식이다.동기 :직렬적으로 task를 수행하는 방식.요청을 보낸 후 응답을 받아야만 다음 동작이 이루어지는 방식.모든 일은 순차적으로 실행되며 이전 작업이 수행중이라면 다음 작업은 대기하게 된다.코드의 가독성이 좋고 디버깅이 쉽다.코드가 순차적으로 실행되기 때문에 실행 순서를 예측하기 쉽다.실제로 cpu가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다고 할 수 있다.const func1 = () => { console.log('func1'); func2(); };const func2 = () => { console.log('func2'); func3(); }.. 2024. 10. 13.
[CSS] 반응형 웹 반응형 웹 반응형웹이란? 다양한 디바이스에 접속했을 때, 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 미디어쿼리란? 뷰포트의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있다. 뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다. @media 미디어 쿼리 @media screen and (max-width : 500px) { // 스크린의 viewport 너비가 500px 이하일 경우 // 적용시킬 스타일 시트 } breakPoint 반응형 웹 사이트 작업의 기준이 되는 중단점을 말한다. 간단하게 말해서, pc / 태블릿 / 모바일의 기준이 되는 규격 분기! 반응형웹에서 자주 쓰이는 속성 max-width & max-height 해당요소의 최대 너.. 2024. 4. 9.
[CSS] animation animation animation이란? 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 두 가지 방법 transition 속성 활용 animation 속성과 keyframe 활용 transition VS animation transition : 특정한 이벤트를 기점으로 작동함 (hover 등) animation : 시작하기 위한 이벤트가 필요 없음. 시작, 정지, 반복까지 제어할 수 있음 animation 속성은 @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 한다. animation-name 어떠한 keyframes를 요소에 적용할 것인지 지정 animation-duration 애니메이션을 한 번 재생하는.. 2024. 4. 9.
[CSS] transition과 transform transition transition이란? CSS에서 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 해주는 것 transition-property 어떠한 속성에 transition을 적용할 것인지 지정 transition-property: color, transform transition-duration transition에 걸리는 시간을 지정 transition-timing-function transition의 속도 패턴을 지정한다 [종류] linear : 일정한 속도로 변화한다. ease: 시작할 때는 빨라지다 느려진다. ease-in: 천천히 시작했다가, 속도를 높여 끝난다. ease-out: 빠른 속도로 시작했다가, 천천히 끝난다. ease-in-out: 천천히 시.. 2024. 4. 8.
[CSS] flex 레이아웃 flex레이아웃 CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에 기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다. 요소의 속성을 flex로 변경 display : flex flex-direction : row(기본값) | columns justify-content : 중심축 방향 정렬 flex-start(기본값), flex-end, center, space-around, space-between, space-evenly align-items : 중심축 반대 방향 정렬 stretch(기본값), flex-start, flex-end, center ⭐️ align-items는 flex-item이 한 줄 일 때 우선 적용! 두 줄 이상일 때에는 align-content라는 다른 .. 2024. 4. 8.
[CSS] position position이란? HTML요소가 배치되는 방식을 결정하는 속성 positioxn의 속성 5가지 static(기본값), relative, absolute, fixed, sticky top, left, right, bottom : 해당 방향 기준으로 요소의 좌표값을 변경 position: static(기본값) 요소를 문서상 원래 있어야 하는 위치에 배치한다. top, left, right, bottom 적용 불가 position: relative 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 position: absolute 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 * .. 2024. 4. 7.

티스토리툴바