웹 개발/UI7 html css로 팝업 레이어(모달) 만들기 웹 서비스를 개발하다보면 필수적으로 팝업 레이어를 사용하게 되는데요. 아래와 같은 팝업 레이어를 다른 라이브러리나 프레임워크를 사용하지 않고 html와 pure css로 만들어보겠습니다. html과 css 는 아래와 같습니다. index.html 레이어 팝업 레이어 main.css .layer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } .layer_content { width: 200px; height: 300px; background-color: #fff; } 레이어.. 2021. 1. 12. css Flex IE 이슈 정리 1. IE11 > 말줄임 텍스트가 보이지 않는 이슈 1.1 이슈 내용 flex 구조 내에서 특정 상황에서 말줄임 텍스트가 노출되지 않는 이슈 발생 원인 : 부모와 자식 요소에서 flex 구조를 사용했는데 높이를 잡지 못하는 경우에 말줄임을 하게 되면 overflow:hidden 속성에 의해서 텍스트가 노출되지 않게 됩니다. 1.2 테스트 아래 사진처럼 크롬에서는 정상 노출되지만 IE에서는 말줄임 텍스트가 노출되지 않는 상황을 재현 해보았습니다. 크롬(정상) IE(이슈) IE에서도 높이를 잘 잡고 말줄임이 잘 되던 영역에 flex: 1 을 추가하였더니 아래 사진처럼 사라졌습니다. 다시 flex: 1 을 지우고, 이번에는 노출이 안되던 요소의 flex: 1 을 제거 해보았습니다. 그 결과 정상적으로 노출되는.. 2021. 1. 12. 퍼블리셔가 알면 유용한 웹 사이트 (feat. 크롬 확장프로그램) 오늘은 퍼블리셔가 알면 유용한 사이트 및 크롬 확장프로그램에 대해서 알아보겠습니다. 1. Markup Validator Markup Validator는 마크업을 완료한 후에 마크업에 오류가 있는지 없는지 확인할 수 있는 사이트 입니다. 사용법은 위 링크로 들어가서 파일 업로드 메뉴로 들어가서 파일을 업로드 해주면 됩니다. 예시로 아래 코드를 작성해서 업로드를 해보겠습니다. span 안에는 block 요소가 들어갈 수 없어요~ 그러면 위와 같이 Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.) 라는 에러를 보여줍니다. div는 span의 자식 요소로 올 .. 2020. 6. 20. HTML, CSS로 사이드바 만들기 버튼을 누르면 왼쪽에서 나오고 다시 누르면 왼쪽으로 사라지는 사이드바를 만들어보겠습니다. 기본적으로 javascript혹은 jquery를 이용해 이벤트 처리를 해서 작업하는 경우가 많은데 HTML/CSS만 사용해서 열리고 닫히는 사이드바를 제작해보겠습니다. 디자인은 신경쓰지 않고 작성하는 점 양해바랍니다. 설계 Html/css만 사용해서 열리고 닫히는 기능을 구현하기 위해서는 input태그를 사용해야합니다. 체크박스와 라벨을 연결해놓으면 라벨을 클릭했을 때 체크박스가 선택되는 점을 이용하는 것입니다. 체크박스가 선택되었을 경우 사이드바를 보여주고 숨기는 css코드를 작성해주겠습니다. label버튼 만들기 .side_toggle_btn::before { content: ">"; display: inline.. 2020. 6. 6. Flexbox로 반응형 레이아웃 만들기 Flexbox란? 기존에 컨텐츠들을 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함을 해결하여 쉽게 배치할 수 있도록 CSS3에 추가된 방식입니다. 크게 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 각 요소에 적절한 속성과 값을 적용해서 원하는 레이아웃을 구성할 수 있습니다. Flexbox 지원 범위 Flexbox는 좋은 기능인 만큼 이전 버전의 브라우저에서 지원을 안해주기도 합니다. 실제 서비스를 개발하기 위해선 이를 잘 알고 써야합니다. IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용.. 2020. 6. 6. HTML CSS로 이미지 슬라이드, 롤링배너 , 캐러셀 만들기(owlCarousel.js) owlCarousel.js 라는 라이브러리를 통해서 이미지 롤링, 케러셀, 슬라이드를 만드는 방법을 정리해보겠습니다. 우선 사용할 라이브러리는 https://owlcarousel2.github.io/OwlCarousel2/ 입니다. 위와 같은 형태의 이미지 슬라이더를 만들어보려고 합니다. 오직 html,css,js 만 사용해서 만들기 때문에 어디에서든 사용하실 수 있습니다. HTML 이미지 슬라이더를 만들기 위한 구조는 아래와 같습니다. owl-carousel, owl-theme은 캐러셀을 사용하기 위해 라이브러리에서 정의된 클래스입니다. 위 코드처럼 두 스타일 파일을 알맞은 경로에 넣고 link태그를 통해서 로드해야합니다. 준비가 끝났으니 알맞은 아이템들을 넣어줍니다. 스포츠클럽과 함께 새로운 여행문화.. 2020. 6. 5. CSS를 이용한 말줄임 처리 방법 말줄임 처리란? 말줄임 처리는 말 그대로 내용의 길이가 길어졌을 때 일정 부분만 보여주고 '...' 과 같은 표시로 뒤에 더 내용이 있다는 것을 표현해주는 처리입니다. 시각적으로 너무 많은 내용을 보여주면 가독성도 떨어지고, 디자인적 통일성을 떨어트리게 되기 때문에 많은 웹서비스에서 필수적으로 사용하고 있는 기능입니다. 일반적으로 말줄임 처리라고 하면 아래와 같이 한줄 말줄임 과 여러줄 말줄임 이렇게 두가지가 있다고 생각합니다. See the Pen ZEQzMqN by 13akstjq (@13akstjq) on CodePen. 하지만 이제는 웹에서 발생하는 수많은 케이스에도 동일한 UI를 제공할 수 있도록 대응 가능한 말줄임 처리가 많이 필요해진 것 같습니다. 1. 고정 사이즈 요소가 좌측에 올 때 많은.. 2020. 6. 2. 이전 1 다음
