iPod Video White

css 9
[SCSS] 기본 문법 및 사용 방법

🔥 주의점 - 큰따옴표 사용! (convention 때문과 혹시 모를 오류) 추천 사이트 scss 가 css 로 변환된 코드를 바로 확인할 수 있는 사이트 https://www.sassmeister.com SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com - scss 공식 사이트 모듈 https://sass-lang.com/documentation/modules Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only..
💻 dev/👩🏻‍💻 핀테크 프론트엔드 개발자 과정 2022.05.09

[220412] transition / transform / animation / @keyframs

Transition : 요소의 전환 효과를 지정하는 단축속성(개별속성이 있다는 뜻) transition : 속성명 지속시간 타이밍함수 대기시간 ; transition-property : (all) 전환을 사용할 속성 이름을 지정 * transition-duration : (0) 젼환의 지속 시간 지정 transition-timing-function : (ease) 전환의 타이밍 함수를 지정 transition-delay : (0) 전환을 몇 초 뒤에 시작할지 대기시간 지정 쉼표를 통해 여러개의 속성 입력 가능 div{ transition : width : .5s, color : 2s; } Transform : 요소의 변환 효과 transform : 변환함수1 변환함수2 변환함수3...; 원근법 함수(pe..
📓 TIL 2022.04.12

[220408] Flex

: 수평 정렬을 보다 편하게 하기 위한 레이아웃 방식 (수직정렬도 가능) div{dislpay: felx;} - flex 의 필수는 container 와 item 으로 구성되고 각각 적용 가능한 속성이 구분됌 Flex container 속성 display : flex container 의 화면 출력 특성 - flex - inline-flex flex-direction :주 축 설정(수직, 수평 결정) - * row : 행 축 - row-reverse : 행 축 (우->좌) - column : 열 축 - column-reverse : 열 축 (하 -> 상) flex-wrap : 줄 바꿈 여부 -*nowrap : 줄 바꿈 없음 - wrap : 줄바꿈 justify-content : 주 축의 정렬 방법 - *..
📓 TIL 2022.04.08

[220407]Position

position : 요소의 위치 지정 기준 static (기본값) 기준 없음 relative 요소 자신이 기준 absolute 위치 상 부모 요소가 기준 (positon 속성을 가지고 있는) - absolute가 지정된 요소는 display 속성이 block으로 변경된다. - Trandform perspective filter 속성이 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 한다. fixed 뷰포트가 기준 - fixed가 지정된 요소는 display 속성이 block으로 변경된다. - Trandform perspective filter 속성이 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 한다. sticky 스크롤 영역이 기준 - 가장 가까운 조상 스크롤 박스에 달라붙음..
📓 TIL 2022.04.08

[220406]CSS 속성

🎥 인강 CSS 속성 (Property) - HTML 속성(Attribute) 표현 단위 요 픽셀 % 상대적 백분율 em 요소의 글꼴 크기 (1em = 기본글꼴크기) rem 루트요소(=html) 글꼴 크기 vw 뷰포트(브라우저 화면에 출력되는 영역의 전체) 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율 박스모델 width , height - 인라인 요소 : 콘텐츠 크기만큼 자동으로 줄어든다 - 블록 요소 : 가로는 부모 요소의 크기만큼 자동으로 늘어난다. 세로요소는 콘텐츠 크기만큼 자동으로 줄어든다. margin : 요소의 외부 여백을 지정하는 단축 속성 - 음수사용 가능 - auto 브라우저가 여백을 계산 (너비가 지정되어 있는 요소의 가운데 정렬에 사용) padding : 요소의 내부 여백을 지..
📓 TIL 2022.04.06

[220405] css selector

🎥인강 CSS 선택자{ 속성 property : 값 value; } CSS 선언방식 - 내장방식 :태그를 사용해안에 작성 - 인라인 방식 : 요소의 style 속성에 직접 작성 - 링크방식 : 태그로 외부 css 문서를 연결하는 방식 병렬 방식(한번에 가져와서 연결) - import 방식 : css 파일에 @import로 다른 css 문서를 연결하는 방식 직렬 방식(순서대로 하나씩 가져와서 연결) @import url("./box.css"); CSS 선택자 기본 선택자 * 전체 선택자 : 모든 요소 선택 태그 선택자 : 해당 태그 이름의 요소 선택 . 클래스 선택자 : HTML class 속성이 일치하는 요소 선택 # 아이디 선책자 : HTML id 속성이 일치하는 요소 선택 복합 선택자 일치 선택자 a..
💻 dev/👩🏻‍💻 핀테크 프론트엔드 개발자 과정 2022.04.06

[220403] 기본 개요 / 특수문자

HTML ( Hyper Text Markup Language ) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS ( Cascadig Style Sheets) 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. JS (JavaScript) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. 크로스 브라우징 크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법. viewport : 하나의 webpage가 출력(=렌더링)되는 전체의 영역 특수문자 ` Backtick, Grave ~..
📓 TIL 2022.04.05
1
더보기
반응형

티스토리툴바