본문 바로가기

언어46

[IT] CSS - 애니메이션의 모든 것 ! (html에서 자바스크립트 활용) 자바스크립트 ㅡ 이벤트 : 사용자가 하는 모든 행동 ㅡ 태초부터 웹 UI 를 제어하기 위한 언어였다. 작성법에는 기초적으로는 3가지 순서가 잇다. 1) js로 제어하고 싶은 html태그를 선택 2) 어떤 이벤트가 발생했을 때 제어할 것인지 선택 3) css를 변경 ㅡ . 은 ~ 의 로 해석 가능함 ㅡ 변수의 종류는 var, let, const 가 있음. ㅡ 로 자바스크립트 사용 console.log(""); 로 콘솔 화면에서 실행 가능하다. console.log("안녕하세요"); 아래에서 사용방법에 대해 상세히 알아보자 ! 1) 자바스크립트로 선택하는 HTML 태그 var 박스 = document.getElementById("box"); console.log(박스); ㅡ선택자 예제 ( querySelec.. 2024. 1. 29.
[IT] SASS - SASS의 모든 것 ! SASS란 ? 구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 ! ㅇ SASS 란 ? ㅡ CSS의 확장 언어이다 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 ) ㅡ 변수, 반복문, 가정문 등 이 있다.. ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다. ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 . ( VScode의 사스 확장형으로 사용가능함 ) ㅇ SASS에서 다루는 CSS - nesting 구조 ㅡ html 의 구조에 따라 각각의 요소로 중첩해서 적는다. (보통 2~3개 중첩함, 그 외는 클래스명 새로 지정) ㅡ 예제로 한번 알아보자 ! 1) 예제 scss 파일 bod.. 2024. 1. 29.
[IT] SASS - VScode에서 사용하기 ( VS코드) SASS !! 앞으로 VScode사용법, 구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 ! ㅇ SASS 란 ? ㅡ CSS의 확장 언어 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 ) ㅡ 변수, 반복문, 가정문 등 이 있다.. ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다. ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 .( VScode의 사스 확장형으로 사용가능함 ) ㅇ VScode 에서 SASS 사용해보기 ㅡ 먼저 2가지 확장자 설치 해보자 ㅡ main.scss 파일 생성 후 창의 가장 하단부의 [whatching sass] 누르면 동일한 파일명으로 .css파일이 생성된.. 2024. 1. 29.
[IT] HTML - position 속성이란 ? ㅇ position 이란 ? ㅡ Normal Flow를 따라서 위치가 배치된다. ( cascaing 의 흐름 ) ㅡ top , bottom , left, right 의 값에 따라 최종 위치가 배치된다 . ㅡ 배너의 위치, 아이콘의 위치 등을 지정할 때 사용한다. ㅇ position 의 종류 ㅡ static (기본값) ㅡ absolute 1) 요소를 Normal Flow에서 제거 하고, 2) 가장 가까운 부모 기준으로 동작이 흐른다 . 3) 그런요소가 없으면 최상위 부모 를 기준으로 한다 . 4) float 처럼 둥둥 뜨게 된다 . 5) 주로 기준점으로 잡고 싶은 부모를 기준을 relative를 설정하고, 자식요소에 absolute로 자주 쓴다 . ㅡ relative 1) Normal Fl.. 2024. 1. 27.

티스토리툴바