본문 바로가기

javascript

[React] Day 2 React Day 2 컴포넌트에 직접 style을 주는 것은 안됨 =적용 안됨 style을 줄 때는 {{}} 중괄호 2개 사용= 객체다!라는 의미이다. import Header from "./Header"; function App() { // jsx 밖의 주석 return ( {/* jsx 안의 주석 */} {/* component 자체에는 style을 줄 수가 없다. */} menu01 👉 font-size가 아니라 대문자 Size(카멜케이스)로 사용하고, 제이쿼리/자바스크립트와 다르게 ;으로 구분하느 것이 아니라, ','로 구분 👈 menu02 menu03 menu04 ) } export default App; export default function Header() { 👉 export 와 func.. 더보기
[javascript] 00. DOM DOM 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 📌자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다📌 1. 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. 2. 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다. 3. 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다. 4. 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다. 5. 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다. 6. 자바스크립트는 HTML 문서에 새로운 .. 더보기
[HTML, CSS with JS] 반응형_2022.05.23.MON 11th DAY 반응형 1. 반응형은 @media (max-width: 768px){속성값} 2. positon, displpay 활용 반응형 ? : 모바일에서 볼 수 있도록 하는 것 LOGO menu01 menu02 menu03 menu04 menu05 visual © lee ▪ 가장 겉에 있는 박스 이름은 id로 사용 ▪ 큰 사이트를 만들 때, 주석을 달아줘야한다. 같이 일하는 사람들이 알 수 있게 ▪ 은 IE에서 박스 취급 안 해준다. ▪ &copy: 코퍼레이션(©) 특수문자 넣는 법 /* 2022.05.30. leeseoyu */ /* !important 자바스크립트보다 우선으로 한다 잘 안 쓴다 */ /* 반응형 조건 @media (max-width: 768px) { .header { color.. 더보기
[HTML, CSS with JS] position 폭파시켜보자_2022.05.26.THU 9th DAY position 폭파시켜보자 1. top배너 만들기 with positon:absolute(ref 던킨 사이트) 2. right배너 만들기 with positon:fixed(쇼핑몰에서 주로 사용) 3. 움직이는 sun, car, heart with @keyframes, animation Lorem, ipsum dolor. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis explicabo quam nam consequatur atque ex, reiciendis minima temporibus excepturi molestiae? 암 헤더 Lorem, ipsum. Lorem, ipsum. Lorem, ipsum. span은.. 더보기
[HTML, CSS with JS] 포지션을 이용한 움직이는 신발_2022.05.25.WED 8th DAY 포지션을 이용한 움직이는 신발 position: relative, absolute 01 02 03 04 body { background: #333; } .shoes { padding: 100px 0; } .shoes > .case { position: relative; width: 809px; height: 450px; margin: 0 auto; overflow: hidden; } .shoes .case ul { position: absolute; top: -450px; left: 0; transition: 1s; transition-timing-function: cubic-bezier(0.34, -0.85, 0.54, 1.65); } .num { display: flex; justify.. 더보기
[HTML, CSS with JS] DK-steel 홈페이지를 만들어보자(연습용)_2022.05.23.MON ~ 2022.05.27.FRI 6th DAY ~ 10th DAY DK-steel 홈페이지를 만들어보자(연습용) 1. slick 가볍게 사용(6th DAY) 2. js의 jquery 가볍게 사용 (6th DAY) 3. top배너 만들기 (7th DAY) 4. 메뉴 만들기 (7th DAY) 5. slick을 이용해서 사진에 슬라이드 효과 넣어보기 (7th DAY) 6. 1200px box안에 사진 3개 넣기 (10th DAY) 7. 1200px box를 만든 후, 사진 6개와 전화번호 부분 만들기 (10th DAY) 8. 커스터머 box 만들기-회사소개/견적문의하기/로고/배경 사진 깔기 (10th DAY) 9. address tag 사용 (10th DAY) :root { --mc: #dc3545; --gc: #dddddd; --wc: #.. 더보기
[HTML, CSS with JS] position의 기초_2022.05.20.FRI 5th DAY 포지션의 기초와 응용 사이 어딘가 1. position: relative, absolute 2. hover 사용 3. 구글웹폰트와 아이콘(xeicon) 넣기 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit reprehenderit optio, ex veritatis architecto repudiandae impedit eum tenetur ea a. more more the more more more more the more more div class 이름은 두개의 단어는 사용하지 못한다. event ➡yes event-party or event_party ➡yes event p.. 더보기
[HTML, CSS with JS] position의 기초_2022.05.19.THU 4th DAY 포지션의 기초 position: fixed(버튼을 누르면 옆에서 메뉴가 튀어나옴) menu01 menu02 menu03 menu04 menu05 menu06 body { background: #333; } nav { position: fixed; top: 0; left: -500px; width: 500px; height: 100vh; background: #fff; transition: 0.5s; } nav.oo { left: 0; } .mpoen { position: fixed; top: 30px; right: 30px; width: 30px; height: 30px; background: #ddd; } /* .mpoen으로 작성된 css : 작은 네모 상자를 만들었음 */ .mpoen.. 더보기

티스토리툴바