본문 바로가기

Frontend88

CSS | 쌓임맥락과 블록서식맥락 영어를 그대로 번역한 단어라 조금 어색한 표현이다. 쌓임맥락과 블록서식맥락. HTML요소와 CSS렌더링은 순서대로 쌓임 맥락이 생성되는데 이러한 쌓임 맥락은 어디에서나, 다음 조건을 만족하는 요소가 생성한다. 문서의 루트 요소. () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소. position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음) 플렉스(flexbox) 컨테이너의 자식 중 z-index가 auto가 아닌 요소. 그리드(grid) 컨테이너의 자식 중 z-index가 auto가 아닌 요소. opacity가 1보다 작은 요소. (불투명도 명세 참고) mix.. 2020. 2. 11.
CSS | position 절대위치, 상대위치 position은 요소의 위치를 잡아줄 때 사용하는 속성이다. position 속성은 상속되지 않는다. position 속성은 다음의 설정값을 갖는다. static relative fixed absolute sticky inherit initial static은 아무것도 지정하지 않으면 사용되는 기본값이다. 그냥 기본값이라고 생각하면 된다. relative는 이름에서 알 수 있듯이 상대값이다. 기본값인 위치를 기준으로 세로축과 가로축 거리를 지정한다. absolute는 절대 위치를 지정한다. 이 속성은 요소컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정한다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성한다. absolute.. 2020. 2. 11.
JS | Javascript에서 이벤트 등록하기, jQuery에서 이벤트 등록하기 Javascript에서 이벤트 등록하기 예시 HTML이 있다고 하자 1. inline event model 방식 이렇게 HTML태그에 onclick을 걸고 곧바로 함수를 연결하는 방식이다. 1. property listener 방식 해당 요소에 접근하여 onclick프로퍼티에 함수를 직접 대입하는 방식이다. a.onclick = function(e) {console.log(1);}; 2. addEventListener 방식 addEventListener메소드를 사용해 요소에 이벤트를 등록한다. 첫번째 인자는 이벤트종류, 두번째인자는 이벤트가 발생될 때 실행되는 함수를 넣는다. var button = document.getElementyById("button"); button.addEventListener.. 2020. 2. 10.
React | 배포하기 & 컴포넌트 만들기 React 배포하기 npm run build //build하는 명령어 이 명령어를 통해 압축 찌꺼기 제거한 후 빌드 server -s build npx serve -s build //serve라는 서버에 빌드한 것 올리기 컴포넌트 만들기 컴포넌트를 만드는 기본적인 템플릿 class App extends Component { render(){ return ( Hello, React! ); } } 이런식으로 응용해서 사용한다. class TOC extends Component{ render(){ return ( HTML CSS JavaScript ); } } class Content extends Component{ render(){ return ( HTML HTML is HyperText Markup La.. 2020. 2. 7.
JS | Javascript의 객체 Javascript의 객체 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합이다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 하자. 객체만들어보기 var person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, gr.. 2020. 2. 7.
Redis | Redis는 무엇일까? Redis는 고성능 Key-Value 저장소로 여러 형식의 자료구조를 지원하는 NoSQL이다. Remote Dictionary Server의 약어인 Redis는 데이터베이스, 캐시, 메시지 브로커 및 대기열로 사용하는 빠르고 오픈 소스, 인 메모리 키-값 데이터 스토어입니다. 이 프로젝트는 Redis의 원 개발자인 Salvatore Sanfilippo 씨가 이탈리아 스타트업의 확장성을 높이려 노력하는 과정에서 시작되었습니다. 현재 Redis는 1밀리초 미만의 응답 시간을 제공하므로 게임, 광고 기술, 금융 서비스, 의료 서비스 및 IoT 분야에서 실시간 애플리케이션을 위해 초당 수백만 건의 요청을 지원할 수 있습니다. Redis는 캐싱, 세션 관리, 게임, 리더 보드, 실시간 분석, 지형 공간, 라이드 .. 2020. 2. 7.

티스토리툴바