본문 바로가기

전체 글109

자바스크립트 JavaScript 자바스크립트(JavaScript) 자바스크립트의 특징 객체 기반의 스크립트 언어 대소문자 구별 문장 끝에 ;(세미콜론)을 사용(생략이 가능) 자바스크립트의 출력 Web API Console 을 통해 브라우저 Console창에 출력 자바스크립트 삽입 방법 1. 자바스크립트의 실행 순서는 인터프리터 해석 방식이므로 위에서 아래로 실행 주석문 // : 한줄 주석 /* 내용 */ : 여러줄 주석 익스텐션 설치 JavaScript (ES6) code snippets 변수 데이터를 저장한 레터럴을 가리키는 메모리 공간 값이 변경될 수 있음 자바스크립트의 변수는 타입이 없음 let 키워드를 사용하여 변수를 선언 파이썬 name = '김사과' 자바스크립트 let name = '김사과'; 아주 옛날 옛적 변수 선언 va.. 2024. 4. 15.
CSS 우선순위와 Custom Properties, 애니메이션 CSS 우선순위 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 수선시 적용 우선순위 계산 inline: 1000점 id: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0 순위 CSS 우선순위 div 1번(인라인 스타일 우선) div 2번(id 우선) div 3번(class 우선) div 4번(같은 속성의 경우 나중에 적용한 것이 우선) div 5번(같은 속성의 경우 나중에 적용한 것이 우선, 외부 스타일 시트 적용) li 1번(점수가 높은 속성이 적용) div 6번(!important 우선) div { background.. 2024. 4. 12.
과제 CSS에 애니메이션 적용하기 @keyframes moving{ from { padding-top: 100%; transform: rotate(720deg); } to { padding-top: 0%; transform: rotate(0deg); } } @keyframes rolling { from { left: 70px; /* 초기 위치: 부모 요소의 왼쪽 끝 */ transform: rotate(0deg); } to { left: calc(100% - 120px); /* 최종 위치: 부모 요소의 너비에서 요소의 너비를 뺀 값만큼 이동 */ transform: rotate(2880deg); } } #icon1 { animation: rolling 5s linear infinite alternate; animation-delay: 4.. 2024. 4. 12.
CSS 미디어 쿼리 미디어 쿼리(media query) 반응형웹 하나의 웹사이트에서 pc, 스마트폰 태블릿 등 접속하는 디스플레이 종료에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 @media 매체유형 and (속성에 대한 조건) { css 코드 ... } 미디어쿼리1 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam magni rem, deserunt, facilis doloremque ab vel dolore veniam laborum nemo voluptatum sequi, velit numquam sit minus. Sint, facilis dicta!Lorem ipsum dolor sit amet.. 2024. 4. 11.

티스토리툴바