본문 바로가기

전체 글

 (215)
display porperty(inline, block, inline-block) block 요소 , , , , , , , , , , ,, , , , , , , , , , , 등 inline 요소 , , , , , , , , , , , , , , , , , , , , , ::before, ::after 등 개발자 도구를 이용하여 각 태그의 display 기본 값을 확인 할 수 있다. inline요소 특징 높이와 넓이가 없다. (컨텐츠 영역만큼 자동으로 잡히게 됨) --> 위아래에 margin을 갖을 수 없다. --> padding은 가질 수있다.( 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.) inline-block 요소 높이, margin 가질 수 있고 또 옆에 요소가 올 수있다. but,문제가많다. ---> defau..
collapsing-margin 마진 상쇄 어떤 두 개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용하는 브라우저 출력 !마진 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용됩니다. 좌우 마진은 겹치더라도 상쇄되지 않습니다. 마진 상쇄가 일어나는 3가지 상황 1. 인접 형제 박스 간 상하 마진이 겹칠 때 겹쳐진 두 마진 값을 비교해, 더 큰 마진 값으로 상쇄해 렌더링합니다. 만약 겹쳐진 두 값이 동일할 경우, 중복을 상쇄해 렌더링합니다. 2. 빈 요소의 상하 마진이 겹칠 때 '빈 요소' 란 높이(height)가 0인 상태의 블록 요소를 말합니다. height / min-height / padding / border 등 상하로 늘어나는 프로퍼티 값을 명시적으로 주지 않았거나 내부에 Inline 콘텐츠가 ..
API역할과 유형 API의 역할은? 1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다. : 데이터베이스에는 소중한 정보들이 저장되는데요. 모든 사람들이 이 데이터베이스에 접근할 수 있으면 안 되겠지요. API는 이를 방지하기 위해 여러분이 가진 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해줍니다. 2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. : 여기서 애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램을 말합니다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 합니다. 3. API는 모든 접속을 표준화한다. API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을..
토큰과 파싱 토큰 프로그램을 구성하는 최소 단위를 토큰(어휘)이라고 합니다. 자바스크립트 인터프리터는 프로그램을 실행하기에 앞서 프로그램을 토큰으로 분해합니다. 이 동작을 어휘 분석이라고 합니다. 그 후에 토큰을 한 줄로 나열하고 이것이 자바스크립트의 구문 규약에 비추어 보았을 때 올바른 프로그램인지 판정합니다. 이 동작을 구문 분석(파싱)이라고 합니다. 인터프리터에 따라서는 어휘 분석과 구문 분석을 함께 실행하는 경우도 있습니다. 구문을 분석한 결과, 프로그램에 문제가 없다고 판단하면 프로그램을 실행합니다.예를 들어 영어 문장에서는 단어가 토큰입니다. ‘JavaScript is powerful.’이라는 문장에서는 JavaScript, is, powerful이라는 단어 세 개와 마침표(.)가 토큰입니다. 단어를 더 ..
flex flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다. flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다. safari, safari on ios 지원 x..
gap gap은 내부의 children 요소들이 일정한 간격으로 떨어져 위치할 수 있도록 사용하는 스타일 속성입니다. 주로 부모요소에서 flex와 함께 사용된다.
Promise 사용 방법 Promise 사용 방법 REST API를 호출할 때 사용되는 브라우저 내장 함수인 fetch()가 대표적인데요. fetch() 함수는 API의 URL을 인자로 받고, 미래 시점에 얻게될 API 호출 결과를 Promise 객체로 리턴합니다 Promise 객체의 then() 메소드는 결과값을 가지고 수행할 로직을 담은 콜백 함수를 인자로 받습니다. 그리고 catch() 메서드는 예외 처리 로직을 담은 콜백 함수를 인자로 받습니다. Promise의 메서드 체이닝(method chaining) then()과 catch() 메서드는 또 다른 Promise 객체를 리턴합니다. 그리고 이 Promise 객체는 인자로 넘긴 콜백 함수의 리턴값을 다시 then()과 catch() 메서드를 통해 접근할 수 있도록 해줍니..
window.innerHeight

티스토리툴바