본문 바로가기
728x90

전체 글

 (37)
[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는 네가지 방법이 있으며, 각 방법에 대해 알아보자. 가상 요소..
[etc]PC 원격접속 윈도우 10 | 데스크탑 연결 및 설정 코로나 재택근무도 그렇지만, 업무상 사이트가 오픈하면 언제 고객사에서 요청할 지 모르는 상황이라 필요한 부분이라서 미리 다음 프로젝트 대비를 위해! 원격 접속할 PC 설정하기 1. 윈도우 버튼 > 톱니바퀴 모양 아이콘을 클릭 시 Windows 설정 팝업이 뜬다. 2. Windiws 설정에서 가장 첫번째 메뉴 - 시스템 선택 3. 시스템 설정 화면 좌측 메뉴 중 하단 두 번째 메뉴 원격 데스크톱 선택 4. 원격 데스크톱 서정에 들어가서, 화면 상단에 있는 원격 데스크톱 활성화 버튼을 '켬'으로 설정 5. 설정화면 좌측 메뉴 중 전원 및 절전 메뉴로 들어가서, 절전 모드를 사용 안함으로 변경하기 해당 PC에 접족하기 위해 접속할 컴퓨터 정보 알아두기! 컴퓨터 정보로 IP주소 및 계정등을 알아두어야 한다. 1..
[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'를..

티스토리툴바