HTML17 [220322] 자바스크립트로 달력만들기 1. 현재 날짜를 가져오는 함수 new Date() date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. let dateToday = new Date() console.log(dateToday) console.log(typeof(dateToday)) //출력값 //2022-03-22T13:35:12.509Z //object 그 외에도 원하는 시각을 넣어서 객체를 작성할 수 있다. console.log(new Date(2021, 11, 6)); console.log(new Date('2021-12-06T03:24:00')); //결과 //2021-12-05T15:00:00.000Z //2021-12-05T1.. 2022. 3. 23. [220128] nunjucks 설치, 세팅, 사용 목록 1. 템플릿엔진 2. nunjucks 설치 3. nunjucks 세팅 4. nunjucks 사용 5. nunjucks 흐름 이해도 (링크) node.js 시작하기전 프로그램 세팅하는 법은 여기에! https://hancoco.tistory.com/70?category=1035202 [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 터미널 명령어 알기 기본적인 명령어 ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는 -a : 숨긴 디렉토리까지 보여줌 -l : 자세히 보기 pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표 hancoco.tistory.com 템플릿 엔진 웹 개발에서, 지정된 템플릿 양식과 데이터가 합쳐.. 2022. 2. 2. [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 목차 1. 터미널 명령어 2. npm 사용하기 3. express 사용하기 4. 서버 실행하기 터미널 명령어 알기 기본적인 명령어 ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는 -a : 숨긴 디렉토리까지 보여줌 -l : 자세히 보기 pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표시해준다. Print Working Directory의 약어 cd : 작업하는 디렉토리의 위치를 바꾸는 명령어. Change Directory의 약어 mkdir : 디렉토리를 만들어준다. clear : 터미널 화면을 비워준다. d... 디렉토리 - ... 파일 / : 최상위 디렉토리 cd / : 최상위 디렉토리로 이동 cd /root : 루트 디렉토리로 이동 /home/계정명 : 홈디렉토리 맥이랑 리눅스랑 비슷.. 2022. 2. 2. [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. [220101] clone_아임웹 게시판 / table, border-seperate, :not(), text-transform 세상에 새해라니. 무의식적으로 21년이라고 쓰다가 22년이라고 고쳤다. 23이라고 쓰기 시작할때는 회사 업무일로 글을 썼으면 신나겠다. 만약 그렇게 된다면 참치덮밥 먹고싶다. 차가운 레몬사이다랑 해서. 오늘이 클로닝 이미지. (출처 : https://imweb.me/faq?mode=view&category=29&category2=37&idx=71724 ) 세부기능은 몰라요. 게시물이라고 구글링하고 예뻐서 사이트가서 찾아옴. 세부적인 기능과 구매는 아임웹에서 구매하도록 합시다. 1. 큰 구조 짜기 네이버와 다르게 까볼 수 있는 코드도 없고, 내게 주어진건 달랑 저 이미지 한 장이다. 하지만 해볼 만은 하다. 하면 하는거지. 세부적인 이름 정하기. 궁금한건 main에 들어가는 nav와 box1에 들어가는 n.. 2022. 1. 1. [211231] clone_네이버 회원가입폼 / select, option, ::focus footer 정렬 맞춤 팝업메뉴 저 아래 화살표 표시는 어떻게 넣나 코드 보니까 아이콘이 아니었다. 심지어 ul, li도 아니었음. 목록은 option이었고, 화살표는 background로 들어가는 이미지였음. 홀리몰리. 다들 알았는가. background에도 position이 있음을. 나는 방금 알았다. 심지어 사이즈도 조절이 가능하다. #header > h1 > #logo{ display: block; margin: 0 auto; width: 240px; height: 44px; background-image: url('../img/logo_naver.png'); background-repeat: no-repeat; background-size:240px auto; background-position.. 2021. 12. 31. [211229] url, uri, form table 복습 tr : 줄(행)부터 시작하는 테이블 td : 줄(행)을 기반으로 열(칸)을 붙여나가기 url, uri, queryString, 주소 읽기 작성한 html끼리는 a 태그를 이용해 연결이 가능하다. 이제는 연결을 해서 생성하는 주소에 신경쓸때가 되었다 URI와 URL의 차이점 uri Uniform Resource Identifier, 자원을 구분하고 접근하기 위해 사용하는 유일한 식별자 주요목적 : 리소스를 찾는것, html, xml 및 기타 파일에도 사용됨 예) :urn:isbn:0-342-34243-3 url Uniform Resource Locator (지원의 위치), 자원의 주소로 자원을 식별한다 주요목적 : 웹 페이지만 찾는데 사용 예) http://google/com url 구문.. 2021. 12. 29. 이전 1 2 다음
