CheolCheol Dev Note

https://html5up.net https://w3layouts.com(반응형웹디자인테마다운) http://tedgoas.github.io/Cerberus/(이메일템플릿)

React Native는 그리드 시스템에 flexbox를 이용하는데그 기본에 대해 공부하고 정리해본다. 물론 웹에서 지원하는 flexbox와는 약간 다르지만그 기본에 대해 공부하는 것이다. Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다. Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다. Flexbox에서는 두가지 개념을 알면 좀 더 이해하기 쉽다. Flex container: {display: flex}를 설..

브라우저마다 CSS 지원되는게 달라서 확인해주는 사이트에서 확인을 해야한다. https://caniuse.com/#home 여기서 사용할 CSS를 적어주면 다음과 같이 브라우저마다 나온다.

기존 CSS 문법에 SASS문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다 기본문법 – 셀렉터 지정 및 속성 작성SCSS의 기본문법은 기본적으로 CSS 기본 문법을 그대로 적용하고, 여기에 SASS 식의 치환가능한 요소들을 추가할 수 있다. 기본룰은 다음과 같다. 기본틀은 CSS 문법과 동일하다. 셀렉터를 쓰고 { .. } 블럭안에 속성:속성값; 의 형태로 속성들을 정의할 수 있다. nested block을 적용할 수 있다. //을 이용해서 라인단위로 주석처리를 할 수 있다. 셀렉터 네스팅특정 선택자 내에는 속성 정의만 들어오는 것이 아니라, nested된 속성 정의 블럭이 들어올 수 있다..entry-content { p { font-size: 9.814rem; } }// compi..

! 팝업창과 모달창의 공통점 이 둘의 공통점은 특정 영역의 위치에 원하는 사이즈의 별도 레이어를 만들어 방문자에게 원하는 시점에 보여준다는 점이다. 또한 현재 보여지는 웹사이트의 콘텐츠를 가릴 수는 있으나 없애거나 볼 수 없게 만드는 것이 아니라 사용자인 클라이언트가 원할 때 볼 수 있다. 팝업창과 모달창의 다른점 팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많다. 하지만 모달창의 경우 중간 중간 사용자에게 보여주는 경우가 많은데 이는 현재 의도하는 목적과 상관없는 경우 주로 팝업창을... 관련있거나 다음 진행을 위해 필요한 내용은 모달창을 사용한다는 차이점이 있다. 또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있다. 그렇기 때문에 반드시 노출..