CSS
-
[2021.03.12] (TIL)Iphone 6이하 WebView 환경에서 스크롤 기능 막는 법개발 블로깅/오늘의 TIL 2021. 3. 12. 15:01
웹뷰 작업 중에, 영역 밖으로 튀어나와 스크롤이 생겨서 이 스크롤이 안되도록 막아야 하는 일이 있었다. 주로 스크롤이 안되고 화면이 고정되도록 하는 방식은 아래와 같다. // css file overflow: hidden; touchAction : none; // 웹뷰 환경 그런데 이 방식이 아이폰 옛날 버전에서는 먹히지 않는 것이다. 확인해보니 웹, 안드로이드, 아이폰 7 이상부터는 모두 괜찮은데, 아이폰 6 이하부터는 이게 먹히질 않는다. 시뮬레이션으로 확인해보니 touchAction: none 이란 속성이 옛날 IOS에서는 invalid 된다. 그래서 아래처럼 해결할 수 있었다. position: 'fixed'; top: 0; bottom: 0; left: 0; right: 0; 한방에 된다..ㅎㅎ..
-
[2021.02.18] (TIL)DOM 요소를 가로, 세로 반대로 배치하는 법개발 블로깅/오늘의 TIL 2021. 2. 18. 23:15
가볍게 CSS 관련 TIL 하나 작성해보려고 한다. 일반적으로 DOM 요소를 그리는 순서는 위에서 아래로, 좌에서 우로 되어있다. 그러나 특정 상황으로 인해 DOM 요소를 아래에서 위로, 혹은 오른쪽에서 왼쪽으로 그려야 할 때가 있다. 아래 코드를 통해 가볍게 DOM을 그렸다. const ARRAY = ["하나", "둘", "셋"]; const App = () => { return ( {ARRAY.map(str => ( {str} ))} ); }; export default App; CSS에서 display와 flex-direction 속성을 이용해서 해당 요소의 내부 요소들을 반대로 배치할 수 있다. 아래에서 위로 배치 .wrapper { display: flex; flex-direction: colu..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
input type="file" 커스터마이징 하는 방법개발 블로깅/기타 개념 2020. 6. 11. 23:44
Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="file" 태그를 사용하게 된다. #Input File 태그 코드 # 각 브라우저 상에 나타나는 file 필드 해당 필드를 선언하면 각 브라우저마다 위와 같은 UI로 나타나게 되는데, 이는 브라우저 자체에서 적용되어 있는 UI여서 CSS 스타일로 변경이 불가능하다. 해당 필드의 스타일을 변경할 수 없지만, 대안으로 특정 필드의 액션에 inpit file이 동작하도록 하는 방법이 있다. 특정 필드에 File 필드가 동작하도록 하는 방법 기존의 input File 필드를 사용하게 되면 UI를 커스터마이징 할 수 없기 때문에, 대안으로 다른 태그와 연동하여 input file 태그의 기능을 대신하도록 할 ..
-
[2019.10.30] input type file 커스터마이징 방법개발 블로깅/오늘의 TIL 2019. 10. 31. 00:01
input type file을 쓰면, 각 브라우저마다 아래와 같이 나타나게 된다. 이처럼 input type을 file로 사용하는 태그는, 브라우저 내부에 정해진 대로 나타나기 때문에, 해당 디자인을 직접 변경할 수가 없다. 대신 이 태그를 숨기고, 직접 만든 태그 요소에 input file태그가 동작하도록 할 수 있다. #HTML 업로드 #css .filebox label { display: inline-block; padding: .5em .75em; color: #999; font-size:inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #e..
-
[2019.10.03] 오늘의 TIL - 같은 class의 특정 태그에만 Style을 다르게 적용시키기개발 블로깅/오늘의 TIL 2019. 10. 3. 12:45
똑같은 Element에 똑같은 Style을 적용시키기 위해 아래와 같이 코드를 작성한다. .item { width: 100%; height: 100%; border: 1px solid black; } 첫번째 두번째 세번째 위 코드는 세개의 div 태그에 똑같은 item의 style이 적용된다. 그러나 특정 div 태그에만 border 색을 다르게 하고 싶다면? 해결책은 다음과 같다. # 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법 .item { width: 100%; height: 100%; border: 1px solid black; } .item: first-child { border: 1px solid yellow; } # 첫 번째 div 태그에만 border색을 다르게 적용 시..
-
[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..