HTML,CSS,JS7 [CSS] 심플한 로그인폼 구현 심플하게 로그인 css를 구현해보자 material style input 을 구현 하기 위해서는 의사 클래스(Pseudo-Class)와 의사 요소(Pseudo-Element)에 대한 이해가 필요하다.. 둘의 차이는 링크 로 대체함 우리는 이중에서 ::placeholder 라는 의사 요소와 :placeholder-shown 이라는 의사 클래스를 사용할 것이다. ::placeholder는 말그대로 input이나 textarea 태그의 placeholder의 css 속성을 나타내고 :placeholder-shown은 placeholder가 display 되고 있는 상태를 나타내는 의사 클래스이다. 우선 html으로 문서의 골격을 작성한다. Login 아이디 비밀번호 비밀번호 찾기 기본적으로 placeholde.. 2021. 4. 24. [javascript] left slide menubar-자바스크립트로 슬라이드 메뉴바 만들기 시작에 앞서 해당 코드들에 사용되는 아이콘은 flaticon에서 결제후 다운로드 받은 아이콘임을 알립니다. 필요한 아이콘은 직접 구해서 사용하셔야 합니다. 우선 슬라이드 메뉴바를 만들기전에 navigation bar를 만듭니다. 반응형 모바일 웹페이지 구성을 위해 viewport를 설정해주고 박지원 Home 마이페이지 로그인 해당 포스트는 apost.kr/702 해당 블로그를 토대로 학습하며 작성했습니다. 슬라이딩 모바일 메뉴 구현 반응형 웹에서 모바일 UI를 구현할 때는 화면 크기의 제약으로 인해 화면 위나 옆에서 메뉴가 펼쳐지면서 보이도록 구현합니다. 좁은 모바일 화면을 최대한 활용하는 방법이기 때문에 주로 이 apost.kr 2020. 11. 10. CSS 마진(여백) 상쇄 css를 사용하다 보면 이해할 수 없는 현상 때문에 골 머리를 앓는 경우가 많다. 그중 하나가 바로 마진 상쇄 때문이다. margin 상쇄란? 여러 블록의 위아래 margin은 경우에 다라서 큰 margin을 가진 여백으로 상쇄되는 현상인데. floating 요소나 position이 absolute 인 경우에는 상쇄되지 않는다. margin collapsing(마진 상쇄)이 일어나는 이유 1. 인접 형제 요소 간 바깥 여백이 겹칠 때. 1번 BOX 2번 BOX 3번 BOX 위아래 겹치는 margin : 30px의 값이 상쇄됨을 확인할 수 있다. 1번 BOX 2번 BOX 3번 BOX 이번엔 1번 BOX의 margin-bottom값을 60으로 준 상태. 위 이미지에서 확인할 수 있듯. 더 큰 값의 margi.. 2020. 8. 12. 홈페이지에 github(깃허브) profile card 삽입하기 깃허브네임카드 홈페이지에 삽입하는 과정입니다. https://lab.lepture.com/github-cards/ GitHub Cards Repo Card Show your GitHub repository. lab.lepture.com 우선 깃허브 카드를 생성해주는 사이트 접속해서 How to Use 를보면 테마선택과 username or username/repo 입력하는 공간에 본인의 github username을 입력해줍니다 그럼 위와 같이 스크립트가 생성되는데 아래의 메타태그와 같이 삽입 해주면됩니다. 전체코드 상세한 설정은 https://github.com/lepture/github-cards 에서 확인할 수 있습니다. 이런식으로 활용 가능합니다 . 아무것도 안뜨는 현상 혹 아무것도 안뜨는 현상이.. 2019. 11. 15. 클립보드 모양 CSS HELLO 안녕 Copyrightⓒ2019 by 박지원 | Contact Us 클립보드 모양으로 만들어본..html/css 인데 코드 정리도 제대로 안돼있고 그냥 혼자 쓰는용이라.. 이부분은 어떻게 만들었냐면 clip이라는 클래스의 div에 radius 4px를 주고 border를 4px로 입혀 클립형태로만들어주고 clip1 clip2가 이제 클립의 검정 플라스틱? 부분을 표현해준건데 border의 왼쪽과 하단부분의 solid 를 조금 굵게주고 오른쪽과 상단을 없애고 div 사이즈를 적절한 사이즈로 줘서 나타내 줬다. 2019. 10. 3. css 가로 세로 중앙 정렬 css 중앙 정렬 하는법 1. margin 사용하기 margin은 top right bottom left순으로 원하는 만큼의 여백을 줄 수 있다. See the Pen css 중앙정렬 by parkjiwon (@pannchat) on CodePen. 2. position absolute position이 absolute 인경우 left를 50%로 주면 현재 자신의 width를 포함하지 않기때문에 정 가운데가 아닌 오른쪽으로 본인의 width/2 만큼 더 밀려있을 것 이다. translateX를 사용해서 요소의 수평 이동거리를 -50% 시켜서 정가운데 위치 시킬 수 있다ㅔ 2019. 9. 1. 카카오지도 탭메뉴에서 오작동하는 문제 탭에서 display:none 이 문제를 발생 시키는 것같음 탭을 클릭했을때 지도 api를 불러오는 식으로 변경해서 진행해야함 추후 수정하기 2019. 9. 1. 이전 1 다음
