본문 바로가기
728x90

Study

 (31)
[HTML/CSS] 스크롤 기능만 살려보자! overflow: auto를 통해 스크롤 기능을 추가하면 항상 기본에 속하는 못난이 스크롤이 나타난다. 이걸 없애고 모바일에서 사용을 고려하여 기능만 살려보려고 한다. .scroll { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } . scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }내가 주려는 영역의 클래스에 위의 코드처럼 css를 주면 된다. 또한, 모든 영역의 스크롤에게 동일한 스타일을 주고 싶다면body { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: no..
[Javascript] 무한 슬라이드 만들기 무한 슬라이드 만드는 방법이다. HTML ⟨ ⟩ CSS /* slide_list */ .slide_list {position: relative; overflow: hidden; width: 414px; height: 212px; margin: 50px auto;} .slide_list .slides {position: absolute; top: 0; left: 0; width: 1242px; transition: 0.5s ease-in-out;} .slide_list .slides li:first-child {margin-left: 100px;} .slide_list .slides li:not(:last-child) {float: left; margin-right: 100px;} /* arrow_bar ..
[html/css] 디바이스 별 분기점에 따른 반응형 사이즈 반응형 작업을 할 때, 디바이스 별 분기점에 따라 4가지로 나누거나 3가지로 나누어 미디어쿼리를 통해 작업한다. 디바이스 별 분기점 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/} /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/} /* 모바일 가..
[React] React Developer Tools 설치 | 확장 프로그램 생활코딩의 React 강의를 듣다가 수업에서 말하는 것과 다르게 React 사이트에서 Developer Tools를 다운받으려고 찾다가 헤매게 되었는데 내가 기억할라고 써둔다. 1. React 사이트에 메뉴에서 Tutoral을 클릭한다. 2. Developer Tools를 찾기 Tutorial에 들어가서 오른쪽 메뉴들을 보면 Developer Tools가 있는 것을 확인할 수 있는데 바로 클릭한다. 3. Developer Tools 페이지로 이동 페이지로 이동해서 보면, 크롬인지 파이어폭스인지에 따라 클릭하면 다운받을 수 있는 페이지로 이동한다. 나는 크롬을 사용하기 때문에 크롬으로 클릭 4. React Developer Tools 다운받기 크롬을 클릭했더니 크롬 확장기능이 나타나는데 설치를 클릭하면 설..
[HTML/CSS] HTML 마크업 | HTML 마크업의 기초 HTML 마크업 분류 마크업 언어는 크게 순차적 마크업 언어(procedural markup language)와 서술적 마크업 언어(descriptive markup language)가 있다. 순차적 마크업 언어는 한 문서에 기본 데이터, 구조, 표현 정보가 저장되며, 문서 내용을 어떻게 시각적으로 표현할 것인가에 대한 정보를 비롯하여 폰트, 색상, 여백, 줄 간격 등 표현에 관련된 다수의 추가 정보가 포함된다. 반면, 서술적 마크업 언어는 기본 데이터와 구조만으로 이루어져 있기 때문에 제목, 부제목, 작가, 서론, 주소, 참고 도서 등의 구조 정보만 가지고 있다. 용어 설명 HTML(Hypertext Markup Language) SGML에서 비롯된 하이퍼 텍스트를 표기하는 언어 XHTML(Extens..
[HTML/CSS] CSS : clearfix 방법 | 가상요소, overflow, clear, float float를 사용하다보면 필요한 순간이 생기는 clearfix방법 4가지를 알아보고자 한다. CSS float float는 element에 부유 속성을 줘 배치할 수 있는 방법으로 메뉴부분에 주고 사용된다. left, right을 사용할 수 있으며 해당 위치에 떠있게 된다. display 속성과 함께 쓰면 display 속성은 무시된다. width, height 설정이 가능하다 float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다. 이러한 현상은 브라우저의 오류로 생겨난 것이고, 이를 해결하기위해서는 clearfix를 사용하는데 위의 오류를 해결하기 위한 일종의 버그 해결 방법이다. CSS clearfix clearfix는 네가지 방법이 있으며, 각 방법에 대해 알아보자. 가상 요소..
[React] MAC M1에 npm을 이용해 react app 설치하기 React를 공부하기 위해선 제일 먼저 할 것은 react를 설치해야한다. 나의 경우 MAC을 기준으로 설치해보려고 합니다. react를 설치하기 전에는 먼저 node.js를 설치해야한다. 최신버전보단 안정적인 버전을 추천한다고 해서 나도 안정적인 버전으로 설치했다. 우선 terminal.app를 열어서 node -v와 npm -v를 통해 잘 설치되었는지 버전확인을 해본다. 터미널에 작성하는데 "npm install -g"를 작성하여 컴퓨터 어디에서든 실행할 수 있게 해준다. '-g'가 어디에서든 실행 할 수 있게 지정해준다. "npm install -g create-react-app"라고 작성한 뒤, 엔터치면 설치가 되는데 아래 화면처럼 에러가 뜨는 경우가 생길 수 있다. 이럴 경우 앞에 'sudo'를..
[Node.js] yarn이란? yarn이란? 페이스북에서 만든 자바스크립트 패키지 매니저로 npm과 같은 기능을 수행한다. npm의 단점으로 생각하는 속도(performance), 안정성(stability), 보안성(security)을 보완하기 위해 만들어진 매니저툴이다. 속도 다운받은 패키지 데이터를 캐시(cache)에 저장하여, 중복된 데이터를 제외한 저장된 파일을 활용한다. npm은 순차적으로 설치하는 것과 달리 여러 개 패키지를 병렬로 처리한다. 안정성/보안성 npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있는 편리한 기능이지만, 반대로 안정성을 위협할 수 있다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하여 버전 차이로..

티스토리툴바