input7 [220124] input="radiobox" / label / 슬라이드 / 형제 선택자 의도 : 클릭하면 div가 사라졌다가 나타나기 html css : 인접 형제 선택자 + 이용 #header{ width: 500px; height: 180px; background: #eee; padding:20px; box-sizing: border-box; display: flex; justify-content: space-between; } #header > div > input{ display: none; } .container{ width:130px; height: 130px; } input[id*="box"]+label{ display: inline-block; width:15px; height: 15px; background: blue; border-radius: 100%; } input[i.. 2022. 1. 24. [220124] input="checkbox" / label / 아코디언 메뉴 input과 연결되는 label See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen. checkbox를 체크 유무를 표시하는 법 관계 없는 둘을 묶어주는 id 체크박스, 라벨과 다른 컨텐츠를 연결하기 id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기 클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기 클릭하면 접히는 메뉴 만들기 어떻게 구성할지 생각하기 체크박스 여러개 : 아코디언 메뉴 2022. 1. 24. [221003] 회원가입창 만들기 / 모달팝업창 실습용도 어제오늘 끙끙대던거 처리ㅎ망ㅇ러ㅣ머이멍ㄴ 쓱 보고 고쳐준 교수님 최고다!!! 코드 읽는 능력 최고다!!! 내가 이해한 label의 용도랑 연결연산자(+)는 맞았음. 문제의 시작 : label이랑 input이랑 떨어져도 된다는것을 생각을 못함. //이 자리에 있던 label을 아래로 밀어넣음 //왜? input 아래만 있으면 되는거고, 나는 X가 있을 위치 고정을 원하니까! X //여기로 밀어넣음! name id e-mail phone CSS의 수정 (기존 css) input[id="close"]:checked+label+#content{ display: none; } (수정본 css) input[id="close"]:checked+#content{ display: none; } 2022. 1. 3. [220102] 홈 만들기 구글링하다가 예쁜 잡지프레임 가지고 비율 3:1 확인하면서 만듬. 전체적으로는 주려다가 여백 공부하듯이 하나하나 넣었다. 그러다보니 코드가 엄청나게 난장판인데 나중에 수정하기로 하자. 우선은 완성한데에 의의를 둔다. 클로닝하니까 확실히 머뭇거림도 많이 줄고 어떻게 넣어야할지 조금씩 감이 온다. 안에 들어간 이미지는 구글 무료 이미지. 수정해야 할것 저 팝업창을 회원가입창으로 바꾸기 시간이 없어서 닫는 버튼을 전체 클릭으로 바꿨는데, X버튼으로 만들기 210114 수정본 수정내용 회원가입창을 닫아야 할때 전에는 전체 화면 중 어디나 클릭하면 닫을 수 있게 했다. -> X버튼을 눌러야만 닫을 수 있게 했다. input+lable이 각각 2개가 있었는데, input 1개에 연결된 label 2개로 줄였다. 마.. 2022. 1. 3. [211230] clone_네이버 회원가입폼 / absolute, relative 목적 1. 전체적인 구성을 짜는 능력을 기르기 2. 보기에 예쁜 여백 폼을 손에 익히기 막혔던 것 1. depth의 깊이 캡쳐하면 이렇게 뜨길래 전체 이미지 width:100%; 중간 이미지 width:460px; margin:auto;를 줌. 세부적인 요소들을 보려고하니까 뭔가 depth가 나랑 안 맞아서 계속 헤맴 //max-width 768 전체 //460 중간전체 //통 //100% id pw re-pw //id 네이버 코드를 보면 나보다 div로 한번 더 싸놓았다. 왜 굳이굳이 이렇게 빡빡하게 씌운거여.. 예전에 뭔가 있었다가 사라졌던가, 아니면 버젼이 올라가면 적당히 둘러싸도 괜찮은데 옛날 버젼 애들은 호로록 흘러서 그런가. 2. absolute랑 relative 다시 알아야겠구나.. 휴대전화.. 2021. 12. 30. [211228] label응용, positon:flex, box-shadow, 라이브러리 목차 1. input과 label 2. transform 3. display:flex 4. box-shadow 1. input과 label See the Pen label by supermint (@ma_ad_shouri) on CodePen. 1) input과 label이 선언된 순서대로 각각 생성된다. 2) 코드가 옆으로 나열되는 것과 background가 글씨크기만큼 생성되는 것을 보면 inline 속성이다 3) input id를 label 요소인 for로 연결하면, label을 클릭할때 input의 checkbox도 같이 반응한다. 4) 2번째 박스는 색이 없고, 3번째 박스는 색이 있는 이유. 인접접근자는 연결하려는 본체코드 밑에 있어야 적용되기 때문. 2번째 박스는 input 코드가 label.. 2021. 12. 28. [211220] 브라우저의 구성과 html 기초 목차 1. 브라우저의 구성 2. html의 기초 3. 엘리먼트의 속성과 작성법 4. 엘리먼트의 종류 1. 브라우저의 구성 1-1. 프론트, 백엔드, css 1-2. 인터넷 창을 구성하는 2가지 네트워크(주소창) 화면을 구성하는 렌더링 1-3. 그렇다면 화면은 어떻게 만드는 것일까? 3가지로 이루어진 렌더링 : html, css, 자바스크립트 브라우저별로 개별적으로 다른 렌더링. 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음. 2. html의 기초 2-1. visual studio 작업 환경 만들기 visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치 visual studio code.. 2021. 12. 20. 이전 1 다음
