기본 형식 function draw() { const canvas = document.getElementById('canvas'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); } } draw() 모양 만드는 방법 function draw() { const canvas = document.getElementById('canvas'); // browser support if (canvas.getContext) { const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx...

hover 애니메이션 구현 🚩 목표: 이미지 크기를 살리면서 container에 hover시 흰색 border가 보이도록 한다. Title ipsem lorem .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: all 1s; position: absolute; } .overlay:hover { border: 12px solid white; } 완성 but... 우여곡절 끝에 완성! 이미지가 줄어들지 않으면서 hover시 흰색 border가 생기는 애니메이션을 구현했다. 그런데 나는 검정 border로 표시한 .text 영역에 hover를 해도 애니메이션이 동작하게 만들고 싶어졌다. .overlay { widt..

며칠간 강의만 듣고 기록을 안 하니까 금방 까먹을 것 같아서 글을 작성해본다. 몇 개만 더 들으면 반응형 웹 만드는 기능은 다 배울 듯하다. flex랑 grid 연습 많이 해보자고!! 메뉴 메뉴 메뉴 메뉴 기능 기능 기능 기능 페이지를 이동시켜야 하니 a 태그가 많이 들어간다. 메뉴를 만들 때는 보통 ul>li>a>span, 로고는 h1>a>span 와 같은 태그가 많다. 배운 강의 참고해서 알툴즈 홈페이지 클론 코딩 해보고 있는데 어렵..다.... 아직 그리드를 안 배워서 그래^^ 내일부터는 더 잘할 수 있겠지 그래도 teacher 말씀대로 혼자 하는 시간이 많으니까 실력이 빨리 느는 느낌? 감사합니다 코딩애플 선생님 🍎 (자꾸 애플코딩으로 헷갈리네요 ㅈㅅ)

📒 Flexbox - flexbox는 flex-direction을 이용해 주축(main-axis)을 설정 - flex-direction : row / row-reverse / column / column-reverse - 교차축(cross-axis) : 주축에 수직인 축 - justify-content : 주축 방향의 정렬 방식 설정 - align-items : 교차축 방향 정렬 방식 - flex-wrap : 요소가 한 줄에 꽉 찼을 때 다음 줄로 넘기는 속성 nowrap(기본 설정) / wrap / wra-reverse - flex-flow : flex-direction flex-wrap - space between : 요소 사이 간격 띄우기 - space around : 요소 사이 + 주변 간격 띄우..

전체 선택자(universal selector) * { attribute: value } 타입 선택자(type selector) p { font-style: italic; } 클래스 선택자(class selector) .class { border: 1px solid black; } id 선택자(id selector) - 문서에서 한 번만 적용 가능 - 주로 문서 레이아웃 스타일 지정 or 웹 요소에 자바스크립트 프로그램 사용하면서 요소 구별시 사용 #id { width: 100px; margin: 10px; padding: 10px; border: 1px solid black; } 그룹 선택자 h1, p { text-align: center; } CSS 우선순위 - 사용자 스타일 -> 제작자 스타일 ->..

px - 디바이스 화면의 최소 단위 rem - 문서의 최상위 요소(html 태그)에 정의되어 있는 font-size를 기준으로 크기 정함 - 브라우저 기본 설정은 16px, 10px로 변환하여 계산하기 쉽게 사용 가능 em - 부모 요소의 글꼴 크기 - 중첩 단계가 깊어질수록 계산 어려워짐 - 반응형 웹에서 사용시 주의 % - 백분율 단위로 지정된 사이즈 기반해 상대적 크기 가짐 - 요소의 너비나 높이 조절시 사용 출처 청년취업사관학교 웹 풀스택 기술로 일정관리 서비스 만들기 sesac.seoul.kr