[sass] 기초 1편 : 셋팅 및 변수, 사칙연산
sass 셋팅하기 1. 비주얼 스튜디오 코드에서 5버전 이상으로 설치 2. sass 파일 만들기 파일명.scss 💡 웹브라우저는 .css만 읽을 수 있다. scss → css 변환해야 사용 가능 3. 비주얼스튜디오 맨 밑에 Watch Sass 누르면 css로 변환되고 두가지 파일 생성됨 💡 .map파일의 용도 : 크롬에서 작업관리자 창에 css가 아니라 scss 파일로 분석해준다 변수 만들기 어려운 단어 기억해야할 땐 변수문법 사용 (변수는 데이터를 잠깐 보관하는 통) $변수명 : 저장해서 쓸 코드; ex) 자주쓰는 색상코드가 너무 어려워서 기언 안날때 $변수명 : 컬러코드; $변수이름 으로 불러와서 사용 가능하다. 사칙연산 가능 💡 사칙연산할 때 +, - 는 같은 단위끼리 * , / 는 정수만
[CSS] one-way UI애니메이션 만드는 법
UI에 애니메이션 추가할때 가능하면 css로 처리하는게 좋음 (성능때문) one-way 애니메이션 : A상태 -> B상태로 변하는 것 ✔만드는법 1. 시작스타일 2. 최종스타일(시작, 최종 둘다 class로 css에 만들어 놔야함) 3. 내가 원할때 최종스타일로 변하게 코드 짜기 ex)버튼누르면 최종스타일로 변하게 4. 시작스타일에 transition : all 1s; 추가 (최종스타일로 변할때 효과) 애니메이션 할때 visibility : hidden; (display : none; 과 비슷) visibility : visible; (display : block; 과 비슷)
[CSS] - display
🗣 display 속성 : 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가짐 1. 블록(block) 2. 인라인(inline) 1. block : 의 기본값, 한줄에 하나씩 들어가는 상자(css 설정값 주면 적용됨) *block은 원래 width 100% 채워지므로 width 100%값 줄필요 없음(padding 값 제외하고도 알아서 가로폭 꽉참) 2. inline : 의 기본값, 한줄에 span안의 내용에 따라 여러개 들어감(css 설정값 무시) 3. inline-block : 한줄에 여러개 들어가는 상자