반응형 📍 Front-End72 [Three.js] 기초 용어 익히기 Mesh : 하나의 object, 사물 (Material + Geomaetry) - Material : 재질 - Geometry : 모양 Camera : 카메라 - Field of View : 시야각 Light : 빛 (재질에 따라 optional) 위의 모든 것은 Scene : 장면 위에 올라간다. Renderer 렌더러가 장면을 그려준다. 3차원 (x, y, z 축)으로 이루어져 있다. x: 카메라가 정면을 비추고 있을 때 좌우축 y: 카메라가 정면을 비추고 있을때 위아래 z: 카메라가 정면을 비추고 있을때 앞뒤 (depth) 2022. 3. 13. [CSS] IOS에서 <input> element에 적용된 background-color 제거하기 (shadow, border-radius) 분명 크롬에서 개발자 도구 -> IOS를 설정해서 보면 이렇게 깔끔하게 배경색이 없는 input창이 만들어지는데 배포 후 아이폰에서 확인하면 이렇게 배경색이 지정되어 나타난다 원인 IOS에서는 기본적으로 적용되는 스타일이 따로 존재한다 input의 경우 shadow, border-radius, background-color가 사용자 지정과 상관없이 IOS에서 기본으로 적용하는 스타일이 입혀진다 나의 경우 이미 style에 shadow와 border-radius를 적용했기 때문에 IOS가 기본 적용한 shadow와 border-radius가 나타나지 않았지만 backgroundc-color는 내가 지정하지 않은 컬러가 아이폰 상에서 계속 나타났다 해결 해결법은 간단하다 배경색을 투명하게 설정하면 된다! b.. 2022. 2. 16. [CSS] <tr>태그에서 display: 'block' 적용시 발생하는 문제 리액트로 태그 내에 data를 뿌려주는 도중 상태 값에 따라 특정 태그에 display: none 또는 display: block이 적용되도록 코드를 작성했다 예시 ) 내용1 내용2 내용3 내용4 display: ${(props) => (props.isHidden ? `none` : `block`)}; 그런데 display: block이 적용된 row의 태그가 아래처럼 와장창 깨져버렸다. 빨간색 outline 처리된 부분이 하나의 태그인데 태그 내의 들이 제각각인걸 볼 수 있다 해결법 해결법은 매우 간단했다. display: block 대신 display: '' 이렇게 아무것도 지정하지 않으면 테이블이 깨지지 않고 원래대로 돌아온다. 이제 태그 내의 태그가 깨지지 않고 정렬을 잘 지키고 있는 것을 확인할.. 2022. 2. 15. [React.js/리액트] ReactDOM.render() , ReactDOM.hydrate()의 차이점 회사에서 시니어분들이 구축해놓은 프로젝트에 로직에 관련된 코드를 얹기만 하는 수준이라 정확히 리액트의 원리에 대해 깊게 이해할 시간을 가지지 못했다. 개인 프로젝트를 진행하면서 하나씩 차근차근 살펴보려 한다. 1. ReactDOM.render() 먼저 react 프로젝트를 생성하면 아래와 같은 index.js 페이지를 볼 수 있다. ReactDOM.render(element, container[, callback]) 여기서 주목해야 될 코드는 ReactDOM.redner()이다 ReactDOM은 브라우저에 UI를 렌더링 할 때 사용하는 라이브러리이다. 프로젝트를 실행하면 App이라는 React 컴포넌트를 document.getElementById('root')로 불러와진 Dom Element에 렌더링 하.. 2022. 2. 14. 이전 1 ··· 7 8 9 10 11 12 13 ··· 18 다음 반응형
