html512 modal by flex 인스타그램에서 사진을 누르면 다음과 같이 배경이 회색이 되면서 창이 나타나게 된다. 이런 것을 모달이라고 한다. 이런 것을 구현하려면 어떻게 해야할까? 1. modal을 위한 html을 작성한다. 모달 내용 닫기 modal-wrapper 안에 modal을 넣는 것이 핵심! 2. modal-wrapper에 css 적용 .modal-wrapper{ position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; } modal-wrapper에 flex를 쓰면 .. 2020. 7. 3. CSS media-query 화면 크기에 따라 동적으로 디자인을 변경하는 방법을 반응형 페이지라고 한다. viewport의 개념을 이해해야 하는데 viewport 핵심은 보고있는 페이지의 크기이다. pc는 사용자가 보고 있는 웹브라우저 크기를 조절할 수 있으며 mobile은 웹브라우저의 크기를 변경하기가 어렵다. 자세한 설명은 다음 글을 참조(https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts) 화면에 나타나는 크기에 따라서 css를 달리 쓰고 싶을 때에 @media를 사용한다. 이 때, html 파일에 다음과 같은 종류의 코드를 head에 적어야 된다.() @media screen and (min-width: 1280px) and (max-width: 1920px.. 2020. 5. 27. CSS transform-origin transform을 사용할 때 시작되는 지점을 지정할 수 있다. rotate의 경우 기본으로 left top 기준으로 시작하는데 tranform-origin: center를 하면 중앙을 기준으로 rotate 시킬 수 있다. 참고 사이트 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 2020. 5. 27. CSS Float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. mozilla에서 float을 위와 같이 정의한다. 보통, 단어 뜻 그대로 '떠다닌다' 하면 뭘 어떻게 떠다닌다는 것인가? 라는 의문이 들기 마련이다. float은 인라인 요소가 float속성이 적용된 요소를 감싸는 효과라고 생각하면 된다. left - 부모요소의 left side부터 차례대로 위치된다. right- 부모요소의 right side부터 차례대로 위치된다. none- float형태로 적용되나 다음에 오는 element의 좌우 크기가 남은 공간보다 크면 다음 줄에.. 2020. 5. 6. 이전 1 2 3 다음
