본문 바로가기

언어/HTML & CSS35

[IT] HTML - hidden 속성이란 ? (css 글자수 넘어가면 말줄임표 ) ㅇ hidden ㅡ hidden 속성을 넣어주면 브라우저 상에서 숨기는 기능 ㅡ 개발자 도구로 열어보면 코드는 남아 있다. ㅡ 스크린 리더로 읽을 때에도 숨겨지게 된다. ㅇ input 태그의 hidden 속성 ㅡ 브라우저에는 보이지 않지만 결과값을 넘겨주어서 값의 정보가 확인 가능 하다. ㅇ css의 overflow: hidden 속성 ㅡ 넘쳐흐르는 부분을 숨긴다 . * display: none ㅡ 코드는 존재, 레이아웃에서 사라짐 * visbility: hidden ㅡ 문서의 레이아웃을 변경하지 않고 , 숨김 ㅡ 레이아웃에서 숨기지 않고 나옴 ( 요소의 빈 부분만 나옴) ㅡ white-space : nowrap; 속성은 줄바꿈을 방.. 2024. 1. 31.
[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.

티스토리툴바