CSS311 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 white-space(white-space을 처리하는 방법) html에서 가장 중요한 것은 컨텐츠를 이루는 텍스트이다. 텍스트를 작성하다 보면 space, new line , tab을 많이 사용하는데 이것을 브라우저에서 곧이 곧대로 표현해주진 않는다. space, new line, tab를 모두 white-space라고 가정하겠다. white-space: normal (default) css에서는 default로 여러개의 white-space를 하나의 space로 인식한다. 그리고 글자가 들어갈 영역에 맞춰서 개행이 이루어진다. 예를 들면 space+tab+newline을 만나면 브라우저에서는 space 하나로 처리하는 것이다. 아래 사진과 같이 영역에 맞춰서 개행이 이루어진다. 네 번째 줄에서 'ullamco~~' 다음에 띄어쓰기, 탭, 엔터를 쳤지만 띄어쓰기 .. 2020. 5. 25. 이전 1 2 3 다음
