Computer Language/HTML CSS
fadein, fadeout으로 창 띄우기. visibility
transition을 주면서 html요소를 보여주고 숨기려면, display block, display none으로는 애니메이션이 안먹는다. display대신에 visibility: hidden; visibility: visible; 이 속성과 opacity:0 opacity:1을 같이 사용해주면 된다. .modal-background.show { /* display: block; */ visibility: visible; opacity: 1; } .modal-background { /* display: none; */ visibility: hidden; background-color: rgba(0, 0, 0, 0.8); position: fixed; bottom: 0; right: 0; top: 0; ..
모달창 띄우면서 배경 만들기.
.modal__background{ position: fixed; top:0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); } .modal__box{ position: absolute; top: calc(50vh - 100px); left: calc(50vw - 200px); background-color: white; display: flex; justify-content: center; align-items: center; border-radius: 10px; width: 400px; height: 200px; } 이렇게하고 Hello, this is modal window 이렇게 아래는 애플코딩에서 연습했던 부분. hello X Na..
코딩애플 html&css - 1
한번 다시 들어보는 코딩애플의 html 기초 html 은 자료의 구조를 표현하기 위한 마크업 언어임. 어떤 역할을 하는지 항상 알려줘야하고, 웹표준을 잘 지키는 것. 글 본문 글 제목 링크 버튼 리스트 리스트 CSS 간단하게 삽입할 경우 글자 자주 사용하는 글자 스타일들. font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 이미지 크기, 가운데 정렬 display : block; margin-left : auto; margin-right : auto; width : 150px; 텍스트 일부만 변경 안녕하세요 저는 뛰어난 개발자입니다. 참고 : s..
