Land of Joe

https://ts2ree.tistory.com/122 검색창 만들기 오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12p ts2ree.tistory.com

브라우저에 데이터를 저장할 수 있게 하는 기능 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Window: localStorage property - Web APIs | MDN The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. developer.mozilla.org localStorage.setItem(key, value); localStorage.setItem("myC..

const food = ['tomato', 'potato']; const [veg1, veg2] = food; // console.log(veg1) ->> tomato // console.log(veg2) ->> potato const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter+1) setCounter((current) => current +1); }; modifier함수를 이용해 state 변경하면 해당 컴포넌트 전체가 재생산(re-render)된다. const [counter, setCounter] = React.useState(); 에서 React.useState() 는 react기능을 ..

0. text 타입의 태그 만들기 1. 검색창 크기 변경 .navbar-search input { width: 500px;//검색창 가로 길이 height: 45px;//검색창 세로 길이 font-size: 20px;//검색창 내부 글씨 크기 } 2. 검색창 안에 이미지 삽입 (돋보기) .navbar-search input { width: 500px; height: 45px; font-size: 20px; background-image: url('');//삽입할 이미지 url background-repeat: no-repeat;//이미지가 작아서 반복되는 것 방지 background-size: 40px;//이미지 크기 설정 background-position: right;//이미지 위치 설정 } 3. 검..

( mac 기준으로 작성되었습니다 ) command+option+i 로 개발자 도구를 열어줍니다 Network > Img 에 들어갑니다 홈페이지를 클릭 후 새로고침 command+R 해줍니다 웹 페이지에 사용된 이미지 파일들이 쭉 나열됩니다 원하는 파일을 선택, 우클릭 후 Copy link address 합니다. 복사된 링크를 html에 가져가 이미지 태그 안에 삽입 하면 완성!

- document.getElementById() - document.getElementsByClassName()[] ** 인덱싱 필수: 찾은 것 중 위에서 몇 번째 것인지(0부터 시작) - document.querySelector() * Id는 '#__' (샵) * Class는 '.__' (온점) - document.querySelectorAll()[] ** 인덱싱 필수

함수명 작명은 구체적으로. 영문작명시 camelCase 방법을 따르는 것이 관습임. - 소문자로 시작 - 여러 단어를 합친 이름일 경우 띄어쓰기X 언더바(_)X - 단어의 첫 알파벳만 대문자 사용 - (ex) openModal, closeModal function openModal(){ document.getElementById('alert').style.display='block'; } function closeModal(){ document.getElementById('alert').style.display='none'; } parameter 파라미터 문법 function modal(구멍){ document.getElementById('alert').style.display=구멍; } modal('b..

1. HTML, CSS로 디자인을 모두 한다 (숨기는 것까지 포함) 2. JS로 필요할 때 보여달라고 코드 짠다