# style

125개의 포스트
post-thumbnail

PEP-8

Python이 주력인데, PEP-8은 봐야지?

3일 전
·
0개의 댓글
·

구글 맵 커스텀 - 네이버 지도 스타일 google map style

구글 맵 style을 바꾸던 중 네이버 지도 스타일로 바꾸고 싶어서조금 만져본 json file 입니다.style은 각 플랫폼에 맞게 세팅해주시면 됩니다.

2023년 1월 10일
·
0개의 댓글
·

자바스크립트) 수학 연산으로 스크롤 량에 따라 영역의 불투명도 값 조절하기, js에서 style속성을 다루는 법

home 상수를 정의 = html의 home\_\_container 클래스homeHeight 상수를 정의 = home의 뷰포트 상의(최종물의) 높이 값addEventListener을 적용한다.('스크롤을 할때' 다음과 같은 공식을 실행한다.{home에 style속성값

2022년 12월 10일
·
0개의 댓글
·

til-star1

\*\*

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

바닐라JS 챌린지 day 5

1) click event 발생 및 함수 실행 2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter) 3) newColor 변수 선언 4) currentColor 현재 값 확인 5) 조건에 따라 newColor에 "tomato

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[React] 리액트 개념 간단 정리

자바스크립트와 HTML을 함께 쓸 수 있는 문법으로, html 태그 안에서는 {} 중괄호를 사용해서 JS를 사용할 수 있다.title 변수 안의 h1 태그는 리액트 엘리먼트라고 부른다.브라우저는 JSX를 이해하지 못하기 때문에, 컴파일 과정이 필요한데 Babel이 이

2022년 11월 27일
·
0개의 댓글
·

JSX문법 3가지

CSS에서의 class자리에 className을 넣어준다.변수의 데이터를 html에서 가져오고 싶을땐 {}를 열어준다.{} : 데이터 바인딩을 의미함. 변수의 데이터를 가져오고싶을 때 사용하면된다.변수의 style을 수정하고싶을땐 자바스크립트의 객체 문법을 따르면 된다

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

ThemeProvider로 다크모드 구현하기

Styled-Components는 대표적인 Css-in-Js 라이브러리의 일환으로, Js 파일 안에서 css를 사용할수 있도록 하는 기능을 한다.결국 이 ThemeProvider는 Styled-Components안에 들어있는 컴포넌트중 하나이다.ThemeProvider

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

React에 Storybook 도입하기

Storybook은 컴포넌트 단위의 UI 개발 도구 입니다.React 프로젝트 안에 있는 많은 컴포넌트들을 문서화 할 수 있습니다.Storybook의 기본 단위는 story로 보통 UI 컴포넌트는 하나 이상의 story를 가진다고 할 수 있다.이 story를 통해서 이

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

[Vue] :class와 :style 데이터 바인딩 & router/index.js와 App.vue 최종 코드

scope 넣어줘야 현재 파일에서만 스타일 적용안 넣으면 글로벌 적용:class="{ }" 중괄호 안에 '클래스 이름: bool' 작성일반 단어면 ' '생략 가능 / text-red 처럼 - 있으면 ' '로 감싸주기bool 값은 직접 T/F 넣어줘도 되고, 데이터 바인

2022년 10월 24일
·
0개의 댓글
·

Styled-Component (5) - Themes

테마를 지정해서 저녁에는 다크테마를, 낮에는 라이트테마를 적용하고자 한다. 그럴 때마다 컴포넌트의 스타일을 일일이 다 변경해줘야 하는 걸까?!codesandboxstyled-component-pseudo-2-forked-pn2emy?fontsize=14&hidenavi

2022년 10월 21일
·
0개의 댓글
·

Styled-Component(4) - Animation and Pseudo Selectors

styled-component를 사용해서 css의 animation 기능을 넣어주고 싶을 때는 어떻게 하면 될까?!codesandboxstyled-component-animation-jimoso?fontsize=14&hidenavigation=1&theme=darkcs

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

Styled-Components (3) - "As" and Attrs

만약 컴포넌트의 태그는 input에서 a태그로 바꾸고 싶은데 스타일은 input 컴포넌트의 속성을 그대로 유지하고 싶을 때 어떻게 하면 좋을까?<Btn as="a" href="/" />처럼 컴포넌트 안에 as="tagname"을 입력해주면 Btn의 스타일은 유지하

2022년 10월 21일
·
0개의 댓글
·

Styled-Components (2) - Adapting and Extending

Checkpoint styled-component를 사용해서 색상이 다른 Box 두개를 만들어보겠다. 정상적으로 작동하지만, Box1과 Box2에서 background-color를 제외하고는 모든 코드가 일치하는 것을 볼 수 있다. 코드를 간결하게 하기 위한 방법이

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

태그안의 내용이 길어질 경우 ... 처리

주의 사항div 태그에 display:flex 속성으로 위아래 좌우 center를(align-item:center, justify-content:center) 적용하면 아래 ... 적용안됨결과

2022년 10월 20일
·
0개의 댓글
·

React Component Styled-components

styled-components란? React 컴포넌트 시스템을 스타일링하는 CSS-in-JS 라이브러리이다. CSS-in-JS란? 기존 웹페이지의 경우 CSS, HTML, JS를 각각 분리하여 관리하였으나, React, vue, Angler 등에는 component

2022년 10월 19일
·
0개의 댓글
·

자식태그가 absolute로 위에 떠있을 때 부모 태그에서 이벤트 받기

부모태그의 스타일에 아래 추가 pointer-events: none;

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

생활코딩 <CSS> 3 : CSS 코드 사용하기, <style>태그, CSS의<a>태그, 코드 내용 숨기기 <!-- 와 -->, css의 스타일 태그 color:000;에서의 세미콜론 기호 ; , 수억개 태그 한번에 수정하는 법, 태그 중복 제거하기, 중복된 태그 지우는 방법

WEB2 CSS 3강. CSS의 등장 앞서 2강에서는 HTML의 문법에 태그를 추가하는 라는 태그에 대해서 배웠다. 이번 강에서는 훨씬 더 어렵지만 근본적인 해결책인, CSS를 해보도록 하자. 2강을 실습할때 나는 홈페이지의 메인에 위치한 환영하는 문구와, 아래

2022년 10월 15일
·
0개의 댓글
·