728x90 반응형 전체 글407 [CSS] 로고 위치 조정하기 - position 으로 띄우기 HTML div 3개 준비 = Flex 사용하기 때문 CSS /* container - 콘텐트 시작*/ .logo { display: flex; position: fixed; padding: 27px; width: 100%; } .wiggle img { width: 175px; height: 84px; } .menu img { width: 88px; height: 60px; } /* 세로 중앙정렬 추가 */ .menu { display: flex; align-items: center; } .wiggle { display: flex; align-items: center; } align-content: space-around; 이거 .logo 에 추가하려했으나 flex-grow:1 를 사용해서 굳이 필요없어.. 2024. 4. 16. [CSS] 상단 바 만들기 맨 위 상단바 제작 HTML 카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급 반응형으로 만들 거기 때문에 이거 헤드 부분에 넣어줬다. CSS /* CSS Reset - 기본 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header */ .banner-top { background-color: #f5e44f; width: 100%; padding: 40px; height: 40px; display: flex; align-items: center; /* 세로 중앙 정렬 추가 */ justify-content: center; /* 가로 좌우 정렬 */ } .banner-top a { text-decoration: none; font-size: 1.. 2024. 4. 16. [1-2] 디자인 툴 및 플러그인 설치 & 개발 visual studio code - live sass compiler 설치 scss - scss 안에 있는 내용들을 css 포맷으로 변환 2024. 4. 14. [위글위글] 리디자인 2024. 4. 13. Component : 많은 div들을 한 단어로 줄이고 싶으면 보호되어 있는 글 입니다. 2024. 4. 11. array, object state 변경하는 법 보호되어 있는 글 입니다. 2024. 4. 11. 버튼에 기능 개발을 해보자 & 리액트 state변경하는 법 오늘의 숙제 : 버튼을 누르면 첫 글 제목이 '여자 코트 추천'으로 바뀌는 기능의 버튼을 만들어봅시다. 버튼에 기능개발을 해보도록 합시다. 버튼을 눌렀을 때 자바스크립트를 실행시키고 싶으면 어떻게 해야하는지, 그리고 state를 수정하려면 어떻게 해야하는지 알아봅시다. 저번시간 숙제 >> function App(){ let [글제목, b] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( 개발 blog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 ) } useState() 3번 써도 state 3개 만들 수 있는데 그게 귀찮으면 array자료를 이용하면 됩니다. 한 곳에 여러개의 문자를.. 2024. 4. 11. [React] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 참고) https://devbirdfeet.tistory.com/3 React 실행오류 - npm ERR! code ENOENT(errno -4058) Updated 21/07/30 문제상황 " npm ERR! code ENOENT(errno -4058) " React를 실행하기 위해 visual studio 터미널창에 npm run start를 입력하니 4058로 시작하는 에러가 나왔다. path를 살펴보니 설치시 지정한 경로와 달랐 devbirdfeet.tistory.com 1) 문제 프로젝트에 react-script 설치 - 터미널 열고 복붙해줬음 - npm) npm install -save react-scripts - yarn) yarn add react-scripts 여까지 복붙해주니 뜨는거 확.. 2024. 4. 11. 중요한 데이터는 변수말고 state에 담습니다 오늘의 숙제 : 위 사진처럼 블로그 글 목록 3개를 html 레이아웃을 잘 짜서 만들어오시고 제목부분에 들어갈 3개의 데이터는 state에 저장해본 후에 html에 집어넣어보십시오 (데이터바인딩하세요) 변수에 잠깐 데이터 저장하고 html에 {데이터바인딩}도 할 수 있다고 했는데 중요한 데이터를 저장할 땐 변수 대신 state를 만들어씁니다. state는 왜 쓰는지, state는 어떻게 만들어서 데이터를 저장하는지 알아봅시다. 일단 블로그 글 레이아웃을 만들어봅시다 function App(){ let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } (App.css) div { box-sizing : border-box } .list { text-align.. 2024. 4. 10. 이전 1 ··· 12 13 14 15 16 17 18 ··· 46 다음 728x90 반응형
