JavaScript의 기초자바스크립트자바스크립트는 웹페이지에서 보조 기능을 위해 개발된 프로그래밍 언어- HTML, CSS를 프로그래밍적으로 제어 가능- 웹 브라우저가 실행할 수 있는 유일한 프로그래밍 언어 (과거)- 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 됨- 서버 프로그래밍, 모바일 웹, 게임 프로그래밍 등 다양한 분야에서도 사용 자바스크립트의 등장과 변천사- 1995년 넷스케이프 사(현 모질라)에서 브랜든 아이크가 개발되었으며, 초기 이름은 모카(Mocha)에서 라이브 스크립트(LiveScript)로 변경되었다가, 최종적으로 자바스크립트(JavaScript)로 출시- 자바스크립트와 자바는 관계가 없음 자바스크립트로 동적인 기능 추가하기- 데이터 처리  ◽ 데이터 저장 : 다양한 형..

Figma피그마란?- UI / UX 디자인을 위한 클라우드 기반 협업 웹 어플리케이션- 웹을 기반으로 디자인 편집을 작업- 웹 링크 공유를 통해 편리하게 협업한느 디자인 툴 주요기능- 디자인 시스템 구축- 서비스 웹 / 앱 UXUI 디자인- 카드뉴스 제작- 교안 이미지 제작- 책 표지 디자인반응형 이미지반응형 이미지가 필요한 이유- 웹페이지는 다양한 디바이스 환경을 고려하여 적절한 이미지를 제공해야함 해상도 전환- 단지 크기만 다른 동일한 컨텐츠의 이미지를 보여주고 싶을 때 사용하는 방법- 큰 이미지가 필요없는 좁은 화면에서 더 작은 이미지를 제공하고 싶을 때- 선택적으로 다양한 해상도의 이미지를 고밀도/저밀도 화면에 제공하고 싶을 때 srcset- 브라우저가 네트워크, 메모리, 성능, 시간 등을 고려하..

Tailwind- HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트- CSS 문서로 가지않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것 Tailwind의 장점- 쉽고 빠르게 웹사이트 구축이 가능함- 오직 HTML문서만 보면 됨- 클래스 이름 고민 X / 협업 문제없음- 유지보수 용이 Tailwind의 주요 속성 hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world h..

Git= 분산 버전 관리 툴 / 소스코드 및 파일의 변경내역을 저장하는 분산 버전 관리 시스템GitHub= 분산 버전 관리 툴인 Git을 관리해주는 웹 호스팅 서비스 GitHub에 파일 올리는 과정1. GUI, CLI를 이용하여 GitHub에 올리기2. Repository 내 하위폴더 생성하기BranchBranch의 사용목적- Branch는 독립적인 작업을 할 수 있는 공간- 개별적인 작업 공간을 만들고 거기서 각각의 기능 개발을 진행- 작업이 완료되었을 때, 코드를 합침 기본 브랜치명- master (GitHub은 main)핵심 명령어$ git clone 레포이름- 레퍼지토리(폴더)를 내 컴퓨터로 받아옴- ex) 구글드라이브에서 폴더 하나 가져오는 것 $ git pull- 레퍼지토리(폴더)를 내 컴퓨터..

Animationanimation-fill-made- 실행 전과 후, 대상에 스타일을 적용하여 방법을 지정- normal : 기본값 / 스타일 적용 없음- forwards : 요소의 기존 스타일로 시작 / 애니메이션 마지막 속성값 유지- backwards : 첫 번째 정의된 애니메이션 값으로 시작 / 요소의 기존 스타일로 돌아감- both : 첫번째 정의된 값으로 시작 / 마지막 값 유지 ( forwards + backwards )div{ width:100px; height:100px; background-color: skyblue; animation: test 3s 2s backwards;}0% { margin-left: 40%; background-color: royalblue;}50% { ..

속성선택자[속성이름]- 해당 속성을 가진 요소 모두 선택[title] { text-decoration: underline;} [속성이름 ~= "속성값"] 선택자- 찾고자하는 단어를 포함하는 요소를 모두 선택[class~="btn"] { text-decoration:underline;}class="btn"class="btn reset"class="reset btn"class="btn-negative"class-"btn-positive"[속성이름 |= "속성값"] 선택자- 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈 기호가 있는 태그[class~="btn"] { text-decoration:underline;}class="btn"class="btn reset"class="reset btn..

Grid- display: grid- 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정함- 부모요소를 grid-container / 자식요소를 grid-item- 그리드 레이아웃은 웹페이지를 위한 2차원 레이아웃(x, y축) 시스템 grid-container에 사용하는 속성 grid-template-columns- 열방향 그리드 트랙의 사이즈를 설정 grid-template-rows- 행방향 그리드 트랙의 사이즈를 설정.container { display: grid; width: 300px; height: 300px; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 100px;}  fr - frac..

flex flex-shrink- 아이템의 크기를 고정하거나 축소할 때 사용- 값 = 0일 경우, 줄어들지 않음 align-self- 부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여- 기본값 = stretchalign-self: stretch; align-self: center; align-self: start;  align-self: end; order- flex-item들의 순서를 수의 크기로 결정- 수가 작을수록 더 우선순위를 받음- 음수도 가능- 정렬이 될 때, order값이 없는 것이 먼저 정렬 후, order값이 있는 것이 그 후로 정렬됨 flex- 단축속성- flex-grow flex-shrink flex-basisflex: 1 1 10..

Z-index- position이 static외의 값을 가진 박스에 대해서 z축의 위치를 지정- 값이 클수록 제일 위로 배치- 부모가 z-index를 높여 자식 앞으로 나올 수 X- 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있음- 유지보수를 위해 100단위로 작업 권장float- float : 떠가다, 뜨다- 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌측/우측에 배치되게 함  ◽ left : 왼쪽으로  ◽ right : 오른쪽으로  ◽ none : 기본값- float 해제  ◽ clear 주의사항자식 요소들이 모두 float속성을 가지게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의해결방법- 부모에게 높이 값 지정- overflow:hidden...

BOX Modelborder-radius- 단축속성- 상자의 모서리를 둥글게 처리 [실습]div { width: 100px; height: 100px; background-color: blueviolet; margin-bottom: 10px;}.box1 { border-radius: 50%;} div { width: 100px; height: 100px; background-color: blueviolet; margin-bottom: 10px; } .box2 { border-radius: 10px;} div { width: 100px; height: 100px; backgr..