목록프론트엔드 국비교육 (98)
안녕하세요
프랜차이즈 주제입니다. 제과를 선택했습니다. [ 220811 ops 웹코딩 ] [ html / css / js ] flex-wrap: wrap; Flex 아이템이 Flex 컨테이너의 끝에 닿으면 줄 바꿈합니다. flex-wrap: nowrap; 줄 바꿈하지 않습니다. 한줄로 표시합니다. 초기 값입니다. flex-wrap: wrap-reverse; 줄바꿈을 하며 순서를 반대로 배치합니다. table을 만드는 방법입니다. # 구분 가격 1 오뎅 1억 .SubContent .table01 { width: 100%; line-height: 40px; border-top: 2px solid var(--mc); text-align: center; } .SubContent .table01 tr { border-bot..
MPA(milti page application)을 위한 준비를 시작합니다. 1. FileZilla를 설치합니다. brave는 굳이 설치안합니다. 2. 설치 후 서버 실행시키는 방법(그대로 따라하기) 사이트관리자 > 새 사이트 > 이름 짓기 이름 > 호스트 > youngentry.pe.kr 주소입력 로그온 유형 > 비밀번호 묻기 사용자 > ftp 아이디 입력 연결 > 비밀번호 저장 여부 선택 > 비밀번호 입력 > 확인 3. 파일은 html 폴더에 업로드합니다 우클릭 > 디렉터리 만들기 > 폴더생성(무조건 영어로 합니다. 한글 절대 금지.) 4. 서버에 업로드할 파일은 index.php 입니다. html이 아닙니다. index.php 파일을 만들고 나서 html 폴더 안으로 이동시키거나, php파일을 더블..
리액트에서 component가 될 부분의 class 명은 첫 글자를 대문자로 합니다. jquery에서 css 속성을 {}로 변경하는 방법입니다. $('.TopBanner').css({ display: 'none' }) js로 class를 toggle하는 방법입니다. function closeBanner() { document.querySelector(".TopBanner").classList.toggle("on"); } 함수선언식으로 표현하는 방법입니다. var closeBanner = () => { document.querySelector(".TopBanner").classList.toggle("on"); } jquery로 slideToggle을 적용하면 편리하게 슬라이드 애니메이션을 구현할 수 있습니..
리액트로 만들어진 페이지는 router 로딩에 딜레이가 없습니다. 리액트 앱을 실행시키려면 npm install로 설치를 먼저 해야합니다. npm build를 하면 index.html 파일이 만들어집니다. float 사용방법입니다. div.top : 100%, 아래에 위치한 div.left, div.right : 각각 50% .About02 .top { float: left; width: 100%; } .About02 .left { float: left; width: 50%; } .About02 .right { float: left; width: 50%; } 한 이미지를 클릭하면, 다른 태그에 있는 이미지를 클릭한 이미지로 바꾸는 기능을 구현합니다. [ 페이지주소 ][ js ] jquery에서는 attr..