https://www.nextree.co.kr/p8622/ CSS : 반응형 웹(Responsive Web)태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제www.nextree.co.kr 쉽게 말해서 현재 사이트를 보고 있는 기기에 따라 최적의 화면을 제공한다는 것이다.사람이 늘 pc로만 웹사이트를 보는게 아니다. pc도 해상도가 다 다르고, 태블릿, 모바일로도 웹사이트를 많이 보기 때문에반응형웹에 대한 관심이 생겼다.내가 만든 개인홈페이지나 포트폴리오를 모바일에서 보면 당연히 레이아웃이 원하는 대로 출력되지 않는다.pc - 크롬 웹 기준으로 제작했기 때문이다. ..

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는inpa.tistory.com 학원 수료 시절 다른 팀의 파이널 프로젝트를 테스트해봤는데 드래그앤 드롭 기능이 있었다..박스안에 일정목록이 쌓여있는데 원하는 일정을 다른 공간에 드래그하고 드롭할 수 있도록 만들었다.웹사이트를 보면 사..

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com Tailwind CSS Utility-First 컨셉을 가진 CSS 프레임워크 Utility-First란 미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것을 뜻 한다. CSS의 각 속성들을 직관적인 className으로 표현하여 효율적으로 사용할 수 있게 된다. ..

목차 -dom -jquery_extend -css -jquery library 따라해보기 DOM 더보기 /** * 새로운 태그 객체를 생성하는 방법 */ $(btn1).click(()=>{ const $area = $(area1); // const $h3 = $("안녕~"); //memory상에 태그객체 // $area.html($h3);//화면상에 추가 //or const $h3 = $(""); $h3.append("ㅎㅇ"); $area.html($h3); }); let char=66;//B /** * 기존 요소 기준 삽입메소드 * -append 마지막 자식요소로 추가 * -prepend 첫번째 자식요소로 추가 * -after 다음 형제 요소로 추가 * -before 이전 형제 요소로 추가 */ // ..

https://thecatapi.com/ The Cat API - Cats as a Service. A public service API all about Cats, free to use when making your fancy new App, Website or Service. TheCatAPI.com 랜덤 고양이 사진을 제공하는 API promise, axios 예제를 다룰 때 사용했다. 해당 api의 키 값을 사용해 url을 통하여 이미지를 랜덤으로 받을 수 있는데 사용 방법은 아래와 같다. 1.사이트 접속 2.메인에서 get your api key - 본인 이메일로 api 키를 발급받는다. 나는 개인 스터디용이라 Signup for free를 선택함. 대강 내 이메일과 함께 이유에는 js 공부한다..

1127은 시험/실습으로 진도를 나가지 않았다. input 태그 id:해당 페이지에서 유니크한 변수명 name:실제로 전송에 필요한 속성값 첫글자는 반드시 영소문자 아이디의 길이는 4-12길이 =>첫글자제외하고 3,11 addEventListener onSubmit return false(); return false(); x e.priventDefault(); 유효성 검사 코드는 submit핸들러 호출 시 실행한다. 여기서 유효성검사를 통과하면 실제 제출/ 아니면 prevent로 막는다. http://latentflip.com/loupe http://latentflip.com/loupe/ latentflip.com

클로져,구조분해할당 과제 리뷰 完 prototype:예전타입 class: prototype을 개선 목차 19.WINDOW객체 20.BOM(Browser Object Model) 21.EVENT처리 19.WINDOW객체 window -브라우저 최상위 객체 -탭 별로 하나씩 존재한다. -BOM: Browser Object Model - navigator,history,screen.. -DOM: Document Object Model - document(내가 만든 html문서) -Javascript object(객체) -등등.. open -새 창(탭/팝업)을 여는 함수. -새 창의 window 객체를 반환. 해당 창에 대한 제어 가능. const newWindow = open ("01_hellojs.html"..

16실습과제 리뷰 사진갤러리 만들기 flexbox or float 안겹치고 배치되는것 static relative , absolute등을 사용해서 원본이미지와 겹쳐서 큰 이미지 출력 position:relative 부모의 left top이 기준->offset 적용 동일한 이미지 두개를 준비하여 하나는 갤러리리스트처럼 두고, 나머지 하나는 크기n배/숨겨서 마우스 호버시에만 나오게 하기. visibility:hidden; :hover 형제 이미지 visibility:visible; ----- 컨테이너에서는 width:900px이런식으로 너비 고정함. --- float 띄워서 왼쪽/오른쪽으로 보내기 float:left float:right footer clear:both(float무효화 both) float과..

목차 01_hellocss.html 02_selector.html 03_selector_priority.html 04_font.html 05_alignment.html 06_text.html 07_layout_boxmodel.html 08_border.html 09_layout_display.html (각 html별 css파일도 있음) 01_hellocss 태그에서 직접 스타일을 지정하는 것은 지양한다. ex) inline style 속성 아래처럼 css 파일을 따로 만들면 사용/관리하는데 용이하다. 02_selector 1.자식 , 후손 선택자 2.형제 선택자 3.가상 클래스 선택자 4.가상 요소 선택자 03_selector_priority(선택자 우선순위) https://velog.io/@sophia..

오전:어제 강의 복습 -file - save workspace as - 내가 사용할 프로젝트 폴더 경로에 파일 저장. 해당 파일 실행하면 그 경로에 있는 (생성/실행했던) 프로젝트들이 editor list에 나옴. =>매번 vsc 실행 하지 않고 파일만 실행하면 됨. -gitignore:설정하지 "않을" 파일들 작성(무시할 파일만) -branch 생성 시 보통 목적/이름 이런식으로 네이밍하는게 보기 편함. ex) bugfix/texttest -3-way merge : base / commit1 / commit2 - true merge 이 개념이 좀 헷갈리는데.. 기존의 master에서 작업이 2가지로 분리 됨 master-master / master - feature/animal 이런 경우엔 빨리감기 병..