본문 바로가기

장원익 기술블로그

📺 Front End62

[CSS] 어떤 요소가 앞으로 나올지 z-index 로 수직 위치를 정해보자. 지난 시간 우리는 CSS의 position속성으로 요소를 우리가 원하는 곳에 배치하는 방법에 대해서 배웠다. 그래서 우리는 fixed, absolute, relative, sticky등등을 알아보았고, 그 결과 우리가 원하는대로 HTML Elements를 배치할 수 있게 되었다. 오늘은 지난 시간 배웠던 Position을 토대로 배치를 마쳤을 때 z-index로 어떤 요소가 앞으로 올지를 정해보는 시간을 갖겠다. z-index mdn에서는 z-index를 위와 같이 이야기 한다. z축의 순서를 지정한다. 이 말이 무슨 말일까? 우리는 일반적인 HTML 문서를 눈으로 볼 때는 2D로 보기 때문에 X축과 Y축만 인식할 수 있다. 하지만 이 z-index 를 설정하면 조금 더 입체적으로 배치할 수 있게되고 그.. 2020. 10. 16.

[CSS] 요소를 원하는 곳에 배치하기 position 속성 :: static, relative, absolute, fixed, sticky CSS에서 HTML Elements를 내가 원하는 곳에 배치하는 방법에는 여러가지 방법들이 존재한다. display 속성으로 영역을 나눠서 배치를 할 수도 있고, box-sizing과 같은 방법으로 배치를 할 수도 있다. 하지만 이러한 방법들에는 많은 제약사항들이 존재하며, 우리가 원하는 대로 동작시키기 위해서는 Css의 부모, 자식간의 관계를 파악해줘야 한다. 하지만 position속성을 이용한다면 조금 더 아름답고 간단하게 요소를 우리가 원하는 곳에 배치할 수 있다. 사전 준비 본격적인 이야기에 앞서 우리는 이번 시간에 스크롤이 있는 영역이 필요하므로 다음과 같은 화면을 먼저 구성해 놓고 실습을 진행할 것이다. index.html index.css body { background: #cfd8dc; d.. 2020. 10. 15.

[React axios] React의 axios 기본 :: axios로 GET, POST, PUT, DELETE 요청 보내기 지난 시간에는 왜 우리가 axios를 알아야 할까?에 대해서 알아보았다. [React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API) 우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다. 리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 api 연동 모듈이다. 하지만 wonit.tistory.com 이번 시간에는 실제로 axios를 사용하기 전에 axios의 기본에 대해서 알아보려 한다. REST API REST API는 우리가 하고싶은 작업에 따라 다른 메서드로 요청할 수 있는 것은 다들 알고 있을 것이다. REST API에는 대표적으로 다음과 같은 HTT.. 2020. 10. 8.

[React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API) 우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다. 리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 api 연동 모듈이다. 하지만 fetch-api는 자바스크립트의 built-in 라이브러리라는 특성 덕분인지 많은 사람들은 React에서 axios를 사용하는 것을 선호한다. 리액트에서 fetch api를 사용하면 안되는 것은 아니지만 왜 사람들은 axios를 선호할까? 서로 비교를 하는 코드를 봐보자. axios vs Fetch-api // fetch const url = 'http://localhost/test.htm'; const options = { method: 'POST', headers: { 'Accept.. 2020. 10. 8.

[React Router & styled-components] 실전에서 withRouter를 사용하기(3) :: withRouter의 location props 로 상태 변경하기 해당 시리즈는 총 3부작으로 나누어져 있습니다. 실전에서 withRouter를 사용하기(1) :: Router 구성하기 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 실전에서 withRouter를 사용하기(3) :: withRouter 사용하기 해당 시리즈에는 react의 styled-components에 대한 코드가 나올 것이다. 지금 우리는 withRouter에 대해서 알아보는 과정이므로 styled-components에 대해서 잘 모르는 사람은 그냥 css 적용을 js 안에서 수행하구나~ 정도만 이해하고 넘어가도록 하자. 하지만 개인적인 추천으로 styled-components에 대해서 모르는 사람은 정말 멋지고 쿨한 기능이므로 해당 .. 2020. 10. 7.

[React Router & styled-components] 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 해당 시리즈는 총 3부작으로 나누어져 있습니다. 실전에서 withRouter를 사용하기(1) :: Router 구성하기 실전에서 withRouter를 사용하기(2) :: styled-components를 활용하여 스타일링 적용하기 실전에서 withRouter를 사용하기(3) :: withRouter 사용하기 해당 시리즈에는 react의 styled-components에 대한 코드가 나올 것이다. 지금 우리는 withRouter에 대해서 알아보는 과정이므로 styled-components에 대해서 잘 모르는 사람은 그냥 css 적용을 js 안에서 수행하구나~ 정도만 이해하고 넘어가도록 하자. 하지만 개인적인 추천으로 styled-components에 대해서 모르는 사람은 정말 멋지고 쿨한 기능이므로 해당 .. 2020. 10. 7.

이전 1 2 3 4 5 6 7 ··· 11 다음

티스토리툴바