전체 글 (163) 썸네일형 리스트형 3.22 - To do list Javascript card_text = document.querySelector('#card_input'); >> 에서 card_text는 object, card_text라는 element안에 위에 input 태그 한줄을 넣었다. >> 새로운 정의를 내린다 >> method console.log(card_text.value); >> console에 #card_input (card_text)의 value값을 가져와라 >> 그걸 console에서 확인하겠다 liElement = document.createElement('li'); >>여기서 liElement는 내가 임의로 지정하는 이름 >> 새로운 li element를 만들어라. liElement.innerHTML = card_text.value; >> .. 3.22 - To do list(Code) HTML To do list sample1 sample2 sample3 CSS *{ margin: 0; padding: 0; } ul,li{ list-style: none; } #wrap{ width:100%; position: relative; } html{ overflow-x: hidden; overflow-y: auto; } a{ text-decoration: none; color: #939597; } #header{ width: 100%; height: 190px; padding: 20px; box-sizing: border-box; background: #fff; } #title > h2{ margin: 0 auto; color: #f5df4d; text-align: center; } #sear.. 3.22 - JS javascript는 head안에 주로쓰고 그렇게 권장함 head 안에 로 이제부터 javascript를 쓰겠다고 알려놓는다 출력 document.write >> 말그대로 page위에 document를 쓰는 것 - 동적인 부분에서 html과 다름 ex) html에서 tag를 사용해 1+1을 쓰면 그대로 화면에 1+1이라고 뜬다 javascript를 사용해서 1+1을 쓰면 계산된 값인 2가 나온다 alert >> 경고창이다 ex) alert(Hello World!); console.log >> 소스창에 console안에 뜨는데 js가 제대로 작동이 되는지 안되는지 확인할 수 있다(? 아직 잘 모르겠음) html 태그 안에 속성값으로 onclick/ click 을 주고 그 안에 java를 넣어서 태그에 움직.. 3.22 - buttons HTML로 Righter 과 Darker 버튼을 만듬 Darker 버튼을 눌렀을땐 NIGHT MODE처럼 화면을 어둡게 바꾸고 Righter 버튼을 눌렀을땐 밝게 만들려고 했음 두가지 방법으로 실행해 봤다. 1. HTML input type oncilck바로 안에 변수를 바로 넣어서 설정해 주는 방법. 2. script 안에 function탭을 두가지 만들어서 각자 설정값을 부여하는 방법. 두 방법다 output은 똑같음 RESULT To do list에도 night, day button을 만들고 싶었다. 그래서 이렇게 html에 두개의 버튼을 넣어줬다. 두개의 버튼을 눌렀을때 화면이 변하게 하기 위해서 function을 두개 만들어준후 각각 onclick에 대입해줬다. function nightshif.. 3.20 HTML 탑프로그래머스 실력체크 개발자 채용 테크 피드 코딩 테스트 프로그래밍 강의 회원가입 로그인 기업 회원 기술 중심 개발자 채용 플랫폼 개발자 채용의 끝은, 결국 코드니까 이력서보다, 당신의 코드가 우선시되는 프로그래머스만의 채용 프로그램을 만나보세요. 시작하기 채용 프로그램 더보기 2021 Dev-Matching: 웹 백엔드 개발자 (상반기) 접수: 21년 03월 08일 11:00 - 04월 02일 17:00 테스트: 21년 04월 03일 16:00 - 04월 03일 18:00 position_content2 채용 중인 포지션 포지션 더보기 JAVA C++ JAVA JAVA JAVA [회사이름] 어쩌구 회사이름 서버/백엔드 프론트엔드 프론트엔드 [회사이름] 어쩌구 회사이름 서버/백엔드 프론트엔드 .. 3.18 - 프로그래머스 탑프로그래머스 실력 체크 개발자 채용 테크 피드 코딩테스트 연습 프로그래밍 강의 기술 중심 개발자 채용 플랫폼 개발자 채용의 끝은, 결국 코드니까 이력서보다, 당신의 코드가 우선시되는 프로그래머스만의 채용 프로그램을 만나보세요 시작하기 채용 프로그램 더보기 program_left program_right 채용중인 포지션 포지션 더 보기 Java Spring Node.js Django Vue.js 물류스타트업 서버/ 백엔드 개발자 하우저 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 소프트웨어 개발자 유엑스팩토리 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 JAVA 웹 개발자(병역특례가능) 캐럿글로벌 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 서버 백엔드 안드로이드.. 3.18 - POSITION POSITION 겹치게 할 수 있음 - 3차원 absolute: absolute자체가 high element >> 기준이 전체 브라우저임 margin말고 바로 사방을 기준으로 위치를 줌 relative: silmilar w/ absolute but it moves according to parents element >> following high element fixed: literally "fixed" on the page. ex) it fixed on the page even when scroll goes down 페이지에 height, width: 200px로 준 3개의 박스가있다 특성대로 각각 하나의 block을 사용해서 아래로 떨어진다. 빨간색 박스에 position: absolute; 를 주고.. 3.17 이 부분 만들때 html에서 i gave 3 div 1. container 2. contents 3. s_box it was better to use 2 div >> simpler div하나의 필요성이 아예 없음 >> in this case div container img >> inline임 >> inline-block으로 바꿔주기 이전 1 ··· 15 16 17 18 19 20 21 다음
