웹 (37) 썸네일형 리스트형 flex 디펜스 flex 디펜스는 flex 개구리를 이어서 flex를 연습할 수 있는 간단한 게임이다. 정답을 정리했고, 풀었을 때 조금 시간이 걸렸던 것만 부가적으로 글을 적었다. flex 디펜스 링크: http://www.flexboxdefense.com/ 1단계.tower-group-1 { display: flex; justify-content: center;} 2단계.tower-group-1 { display: flex; justify-content: flex-end;}.tower-group-2 { display: flex; justify-content: center;}.tower-group-3 { display: flex; justify-content: flex-end;} 3단계.tower-group-.. AJAX AJAX 간단 요약Asynchronous JavaScript And XML서버와 비동기적으로 데이터 주고받는 자바스크립트 기술을 의미 AJAX 이해에 필요한 사전지식: 서버서버: 데이터 요구하면 데이터 보내주는 프로그램필수 요구 정보: URL, 요청방식(GET, POST ), 파라미터, 리턴값 타입 새로고침없이 서버와 비동기 통신하는 JS코드비동기 통신: 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식장점: 새로고침이 없어 웹페이지 전환이 부드러워짐 사용예시1. 바닐라 JSdocument.getElementById('loadData').addEventListener('click', function() { const xhr = new XMLHttpRequest(); xhr.op.. 플로우 차트 웹5 수업페이지 기획, 스토리, 설계, 디자인 선택할 것디자인에 중점?기능에 중점? 눈에 잘 보이는 것불편한 것을 개선하는 사람 // 1차스터디모임 전용앱사교X, 공동의 목표에 집중하는 시간목표 달성 및 진행 공유기간 정해서 집중마음 잘 맞는 동료 구하기대면 or 비대면 선택 하나의 서비스를 만들어보고 싶은 욕심 + 개발 ▼ 신입) 개발 포폴 경력) 서비스 개발 최종 포폴 후반까지 보는 것이 좋긴 하지만 당장 지금 진행하고 있는 수업에 영향을 주지 않는 선에서 진행ㄴ전반적인 서비스를 담은 포폴 제작 그 내에서 구현 가능한 부분만 구현 // 2차(불편한 점) 단순하게 스터디모임 구하려고 하면 카톡 오픈채팅이나 앱들이 있으나 사교적인 목적에 더 집중되는 느낌이 강함 (크게 생각하는 기능) 스터디모임 전용앱사교X.. 깃허브 연동하기 연동하고 깃허브에 내 히스토리를 저장하고 불러오는 것까지 알아보자.나머지 자세한 정보는 깃허브 공식 홈페이지 가이드를 참고하고, 아래 나와있는 것 외의 명령어는 깃허브 문서를 참고하도록 한다. 1. 깃 설치깃허브를 이용할 때 git-bash를 사용해야 하기 때문에 깃을 설치해준다.윈도우라면 오른쪽 박스를 눌러 간단하게 설치하고, 다른 운영체제라면 왼쪽 박스를 눌러 본인에 맞는 깃을 설치하자. 2. 깃 저장소 생성부터 로컬 저장소에 저장하기 까지1) 본인이 프로젝트를 생성하고 싶은 디렉토리로 경로 이동$ cd /c/User/project 2) 깃 저장소 생성$ git init 3) 계정에 대한 정보 설정$ git config --global user.name "깃허브사용자이름"$ git conf.. 웹4 수업페이지 💎1일차 스와이퍼 페이지 넘김 버튼 커스텀하기📘코드펜: 커스텀 1단계(버튼 구조 밖으로 빼기) 2단계(relative설정 후 버튼 위치 조정) 3단계(버튼 좌우 여백 설정) 4단계(버튼 디자인 새롭게 하기, 버튼 반절 걸치기) 📗숙제: 팝업 복습 💎2일차 스와이프 페이지네이션 커스텀하기📘코드펜: 커스텀 1단계 2단계 💎3일차 반응형 사이트📘코드펜: 반응형 이미지 최소 높이 고정된 반응형 이미지 미디.. 웹4 3일차 {**Tip**}언스플래쉬: 무료 이미지 사이트핀터레스트: 이미지 참고 사이트 [반응형과 고정형] 반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다. 반응형 사이트는 특정한 상황을 제외하고 대부분 퍼센테이지로 구현된다. [앱과 반응형 사이트] 앱은 플레이스토어나 앱스토어에서 판매하는 상품 반응형 사이트는 플랫폼에서 판매하는 앱이 아닌 url주소로 접속하는 모바일 기기에 반응할 수 있는 사이트 이 두가지는 개발되는 방식이 완전히 다르다. [반응형 이미지] 이미지는 기본 고정형으로 작동 이미지 기본 display 속성값이 inline으로 하단 여백 있음 => 여백 제거: display: block;으로 설정해서 사용. 반응형 이미지는 정말 특정한 경우를 제외하고 wi.. 웹4 2일차 [id 선택자 VS class 선택자]HTML의 id 선택자는 특정 요소를 식별하는 데 사용된다. id는 문서 내에서 고유해야 하고, 각 요소에는 하나의 id만 할당할 수 있다. 아래는 사용 예시이다.HTML내 요소CSS id선택자 사용예시#myElement {color: red;}JS id선택자 사용예시var element = document.getElementById("myElement"); [스와이퍼 페이지네이션 커스텀하기]1. 커스텀하는 이유?스와이퍼는 기본 페이지네이션이 있다. 디자인을 예쁘게 하고 싶을 때나,텍스트를 넣어 사용자에게 편리하게 할 때와 같은 상황에서 페이지네이션을 커스텀할 수 있다. 2. 커스텀하는 방법텍스트로 되어있는 페이지네이션을 만들어 보자. 1) 스와이퍼 공식 .. 이전 1 2 3 4 5 다음
