style
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2019.09.03] 오늘의 TIL - 여러 항목을 나열하는 방식에 대해.개발 블로깅/오늘의 TIL 2019. 9. 3. 22:29
하나의 폼이 있다고 가정해보자. 해당 폼에는 아래와 같은 입력 항목이 있다. # 기본 정보 카테고리 이름 (필수입력*) 나이 성별 주소 메일주소 # 관심사 카테고리 취미 특기 관심 키워드 (필수입력*) # 직장 카테고리 회사명 (필수입력*) 입사날짜 퇴사날짜 위 항목을 가지고 레이아웃 배치를 할 경우 3가지 방법이 있다. 카테고리 별로 묶어서 배치 필수입력 항목끼리 묶어서 배치 막무가내로 배치 오늘 이 문제에 대해서 어떻게 하면 사용자가 보기에 더 편리할지 생각을 하다가, 옆에 디자이너 분께서 UX 관점으로 설명해주셨다. '필수 항목끼리 묶으면, 이 외의 항목은 작성을 잘 하지 않게 될 수도 있다.' 감탄~!
-
[2019.09.03] 오늘의 TIL - Type '{fontWeight}' is not assignable to type 'CSSProperties' 해결 방법개발 블로깅/오늘의 TIL 2019. 9. 3. 22:12
기본적으로 React 안에서, Tag 또는 Component에 Style을 적용하는 방법이 여러가지가 있다. 아래는 Style 적용 방법 중 하나이다. # 글씨를 굵게 하는 style // 첫 번째 방법 return ( Hello inyong~ ); // 두 번째 방법 const fontStyle = {fontWeight: 'bold'}; return ( Hello inyong~ ); 위 코드에 적힌 두 방법은 TypeScript를 사용할 때에도 거의 무방하다. 그러나 두 번째 방법에서는, TypeScript에서는 적용되지 않는 Style property가 있다. 바로 위 코드의 'font-weight' property가 그 중 하나이다. 즉, TypeScript에선 두 번째 방법은 에러메세지가 발생한다..
-
[2019.08.23] 오늘의 TIL - [Next.js] global Style의 이해개발 블로깅/오늘의 TIL 2019. 8. 23. 01:10
next.js에서 여러 페이지 및 컴포넌트에 global 방식으로 스타일을 적용할 수 있다. 아래 예시를 봐보자. components/nav.js import React from 'react' const Nav = () => ( 첫번째 컴포넌트 입니다. ) export default Nav; a 태그 하나가 들어있는 간단한 컴포넌트이다. pages/index.js import React from 'react' import Nav from '../components/nav' const Home = () => ( index 페에지 입니다. ) export default Home; index.js 페이지에서도 a 태그를 가지고 있다. 그리고 바로 a태그 바로 밑에 nav 컴포넌트를 가져와서 사용하였다. nav..
-
[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점개발 블로깅/오늘의 TIL 2019. 8. 21. 22:36
Next.js에서 스타일을 추가할 때, 일반적으로 태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div) 그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다. 바로 아래와 같다. const component = () => { const arr = ['하나', '둘', '셋']; const Temp = arr.map(element => ({element})); return ( {Temp} ); } 위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 저렇게 미리 만들어 놓은 컴포넌트에는..
-
[2019.07.18] Styled-components 사용법(매우쉬움)개발 블로깅/기타 개념 2019. 7. 19. 00:23
엄청나게 간편해진 CSS 적용법! (이젠 내 인생에 확장자 .css파일을 건들 일은 없을 것 같다..ㅎ 아마도..) $npm i -S styled-components 그리고 직접 Component를 만들되, 거기에 style을 입힌다. import styled from 'styled-components'; const TempSpace = styled.div` background-color: white; margin: 0 0 10px 0; ` 스타일 작업을 위 코드와 같이 입힌 컴포넌트를 생성하여 사용하면 된다 # style에 props 넘기는법 (이부분이 매우 중요!) 해당 컴포넌트에 props를 내려서 style를 변경시킬 수 있다. 예를들어, TempSpace라는 컴포넌트에 check라는 props값..