Outputor

3D 애니메이션 transform을 쓰면 3D 스타일 회전이 가능함 각각 X,Y,Z축 회전이 가능함 (X축은 가로줄, Y축은 세로줄, Z축은 얼굴과 모니터 간의 가상의 줄) transform-style: preserve-3d; 이 속성이 있어야 어떤 요소를 회전시킬 때 3d 사물처럼 동작함 backface-visibility: hidden; 이 속성이 있어야 뒷면에 비치는 그림자를 안보이게 처리함 See the Pen Untitled by output777 (@output777) on CodePen.

position : sticky Edge 이상에서 사용가능함 position : sticky 는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성이 있음 스크롤을 할 만한 부모 박스가 있어야함 top 등 좌표속성과 함께 써야 제대로 보임 부모 박스를 넘어서 스크롤 되면 이미지도 같이 사라짐 더보기 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas asperiores deleniti fuga qui voluptate. Dicta, magnam blanditiis nam nisi cumque quis omnis, mollitia vero corrupti eius in ab veritatis porro. Lorem ipsum d..

Grid 격자를 만드는 레이아웃임 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열됨 grid-template-columns는 가로 격자의 개수임 grid-template-rows는 세로 격자의 개수임 fr: 몇배만큼 차지할지를 나타내는 값임 grid-gap: 그리드 사이 간격을 줌 grid-template-rows에서 fr단위를 줄 때는 height값을 설정해줘야 함 큰 레이아웃을 잡을 때보다 자잘한 부분에서 엑셀같은 격자가 필요할 때 쓰면 효과적임 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px; } G..

transform https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org @keyframes 복잡한 animation 구현 가능함 형태: @keyframes 이름 { } https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes @keyframes - CSS: Cascading Style Sheets | MDN @keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있..

@mixin 1. 스타일 여러줄을 한 단어로 치환해서 사용가능함 2. 형태: @mixin 이름 ( ){ 스타일 } 3. @mixin을 사용하려면 @include 이름( )을 작성해주면 됨 4. @mixin 이름 ( $bgColor ) { background-color: $bgColor } 이렇게 함수처럼 사용가능함 @mixin box-style ($bgColor) { width: 150px; height: 100px; margin:auto; margin-top: 20px; background-color: $bgColor; } .box { @include box-style(blue); } 5. @mixin 이름 ( $bg ) { #{bg}: blue } 처럼 스타일 이름에도 사용가능함 @mixin box-..

SASS와 SCSS 1. SASS와 SCSS 차이: SASS는 코드짤 때 중괄호 생략이 가능하고 SCSS는 중괄호 생략이 안됨 클래스를 확장하는 @extend 1. %를 사용해서 이름을 적어주면 파일 자체에서 적용되지 않고 @extend를 해줘야만 적용됨 2. 기존 클래스도 @extend 가능함 3. @extend를 사용한 후 복사할 클래스명을 뒤에 적으면 클래스명에 있던 모든 내용이 복사됨 셀렉터 대신 쓰는 Nesting 1. .box p { } 이렇게 쓰는 대신 아래처럼 사용 가능함 ⬇ 2. hover를 사용할 때 &를 쓰지않으면 h3 :hover처럼 뛰어서 작성되어 작동안됨 더보기 더보기 HTML Sass Sass Sass Sass 더보기 더보기 SCSS $bg-color: #f06595; $fon..

변수 1. 값을 저장해놓고 쓸 수 있음 2. $기호를 사용한 다음 이름을 적고 값을 넣어주면 됨 3. root를 사용하지 않고 변수를 저장할 수 있어서 편리함 사칙연산 1. calc를 사용하지 않고 바로 계산이 됨 2. px 단위는 px 단위끼리, % 단위는 % 단위끼리 맞춰져야 함 3. 곱셈 나눗셈은 보통 뒤에 단위를 쓰지 않음 (괄호 안에 작성해야 잘먹음) 더보기 더보기 더보기 HTML .scss 파일을 만든 다음 Watch Sass 버튼을 누르면 같은 이름을 가진 .css파일이 만들어 지는데 이걸 연결해줌 Sass Sass Sass Sass 더보기 더보기 더보기 SCSS $bg-color: #f06595; $font-color: #fff; $font-size: 50px; body { width: 1..

SASS 개발환경 세팅 (VScode 이용) 1. extension 메뉴에서 Live Sass Compiler 검색해서 높은 버전을 설치함 (5.0.0 버전 이상) 2. 하단에 Watch Sass 버튼이 생기는데 누르면 현재 작성한 SASS 파일을 자동으로 CSS 파일로 변환해줌 (하단 바가 안보이면 View - Appearance - Status bar 클릭하면 됨)