![]()
1. Sprite Image - 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지 - 이미지를 다운받기 위한 서버 요청을 단 번으로 줄일 수 있음(웹페이지 로딩시간 단축) .icon { width: 100px; height: 100px; background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/apple-ipad-app/main/images/sprite_apps.png"); background-position: -200px -100px; /* animation : sprite-icon 3s steps(1) infinite; */ animation-name: sprite-icon; animation-duration: 3s; an..
![]()
1. 라이브러리 [오픈 그래프 / 트위터 카드] - 웹페이지가 소셜 미디어(카카오톡, Slack 등)로 공유될 때 우선적으로 활용되는 정보 지정 - 페이지 title, 설명, image, url 등 [GSAP] - 자바스크립트로 웹 화면을 제어(세밀한 움직임, 동작의 연속성 등)하는 애니메이션 라이브러리 - gsap.to() [ScrollToPlugin] - GSAP 추가기능으로 스크롤 애니메이션 라이브러리 - scrollTo() 사용 ex) 버튼 클릭시, 최상단으로 화면 스크롤) [Swiper] - 슬라이드를 구현하는 라이브러리 [Youtube API] - Youtube 동영상 제어 - onYouTubePlayerAPIReady 함수명은 해당 IFrame Player API에서 사용하기 때문에 다르게 ..
![]()
21. flex-basis - flex item의 공간 배분 전 기본 너비 - auto가 기본 값으로 기본 너비는 content 너비와 같음 - 0으로 하면 기본 값을 무시하고, 비율 값을 사용함 22. transition - transition : 속성명 지속시간 타이밍함수 대기시간; - 요소의 전환 효과를 지정하는 단축 속성 - 전환 효과는 전 상태와 후 상태 말고는 추가적인 애니메이션을 부여할 수 없음 - 지속시간은 필수 - 같은 클래스에 display 속성은 적용 안됨. visibility로 설정해야함. 1) transition-property - 전환 효과를 사용할 속성 이름 지정 - 기본값은 all 2) transition-duration - 전환 효과의 지속시간을 지정 3) transitio..
![]()
1. 단위 px - 브라우저에서는 기본적으로 16px(=1rem)로 설정됨 - 브라우저의 기본 폰트값을 변경해도 픽셀값은 안 변함 rem(반응형 작업에서 권장) - html에서 최상위 요소는 html 태그인데, 해당 태그의 font-size가 기준이 됨 - 주변 상황이 바뀌어도 조금 더 명확하게 단위가 수정되는 일이 없도록 만들어 줄 수 있는 장점 있음 - 어느 페이지에서든 고정된 사이즈를 사용할 때 사용(ex) font-size) em - 부모 요소에 따라 유동적으로 변해야 하는 경우 사용(padding이나 margin같이 화면에 따라 유연하게 변하는 크기) - 유지보수 어려움 2. width, height max-width, max-height : default - none max-width, min..
![]()
1. CSS 선언 방식 1) 내장 방식 - 태그 내용으로 스타일을 작성하는 방식 - 유지보수에 악영향 - 프로젝트를 번들(한데 묶어서 서버에 업로드)하는 과정에선 문제 없음 -> 개발하는 내용을 제품화 시킬때, 이렇게 컴퓨터가 자동으로 사용자가 파일로 분류한 내용들을 내장 방식으로 심는 경우 문제 안됨 2) 인라인 방식 - 요소의 style 속성에 직접 스타일을 작성하는 방식 - 우선순위에서 지나치게 우선돼서 문제 발생 가능 -> 유지보수에 악영향 3) 링크 방식(import보다 권고) - 로 외부 css 문서를 연결하는 방식 - 병렬 방식 연결. 직렬처럼 순서대로 연결이 아니라, 한번에 가져와서 연결. -> 해석이 빨리 끝나는 css가 먼저 연결 4) @import 방식 - @import url("")..
![]()
1. 브라우저 스타일 초기화 CDN reset.css - Chrome, IE, 사파리 등 각 브라우저마다 기본으로 제공하는 스타일이 존재 - CSS default 값이 모두 다르기 때문에 초기화하고, 브라우저 간의 차이를 없앰 - 크로스 브라우징 구현할 때 유용함 -> 즉, 0에서부터 디자인 시작 - reset.css를 수정할 일은 거의 없으므로 경량화 버전 reset.min.css를 Copy HTML - main.css를 link하기 전에 작성 HELLO WORLD * 적용 전 * - margin 자동 생성 * 적용 후 * - 기본 설정 초기화 2. Emmet - HTML, XML, XSL 문서 등 편집할 때 빠른 코딩을 위해 사용하는 플러그인 - VScode에서 사용하는 예시 1) HTML5 boil..
