coding 89
[비주얼 스튜디오 코드] 정렬 단축키
비주얼 스튜디오 코드의 정렬 단축키를 알아봅시다. 1. 코드 정렬 단축키 ① 맞지 않는 정렬 일부러 정렬을 좀 망가뜨려놨습니다. 단축키를 이용해 이 정렬을 맞춰볼게요. 보통 코드를 복사해 올 때 많이 정렬이 깨져요. 하나씩 맞추려면 오래걸리니 단축키를 사용하는 것이 좋아요. - ② 전체 선택 단축키 [Ctrl + A]를 눌러 일단 코드 전체 선택을 해줍니다. ③ 코드 정렬 단축키 [Ctrl + K + F]를 누르면 한 번에 정렬됩니다. 중요한 부분은 꼭 순서대로 누르셔야 합니다. Ctrl + F 가 찾기 단축키라 K를 꼭 먼저 눌러주세요. 2. 단축키 모음 https://ssimplay.tistory.com/736 VS code 자주쓰는 단축키 모음 제가 보려고 만든 VS code 단축키 모음입니다. 1..
![[비주얼 스튜디오 코드] 정렬 단축키](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/ljIC7/btsp7TCOr6k/652zkH7iU1FKkAgJxucZkk/img.png)
[CSS] 배경 고정하기
css를 이용해 배경을 고정해 보겠습니다. 1. 구현 화면 확인 ① 구현 화면 배경에 귀여운 멍무리가 고정되어 있고 스크롤이 내려가도 따라오지 않는 모습이 보이시나요? 기업에서도 종종 사용하는 기법인데 이 기능을 구현해 보겠습니다. - 2. background-attachment: fixed; div{ background-attachment: fixed; } ① background-attachment [background-attachment: fixed;]를 적용해 주시면 배경화면이 고정됩니다. 기본값은 scroll이에요. https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment background-attachment - CSS: Ca..
![[CSS] 배경 고정하기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/b2a8qi/btspYeAiY51/K5QGe0Yh199BpBkARchHF0/img.png)
[CSS] flex를 이용한 가운데 정렬
flex를 이용해 가운데 정렬을 해보겠습니다. 1. flex display:flex div{ display:flex; } ① display:flex; 먼저 flex를 이용한다는 의미는 display에 flex를 적용한다는 의미입니다. 아마 여러분이 중앙 정렬을 하고 싶은 곳에 위와 같이 display:flex;를 적어도 아무 일도 일어나지 않을 겁니다. 위의 이미지처럼요. flex는 옵션 값을 설정해주어야 가로, 세로 모두 중앙 정렬을 해줄 수 있습니다. 아래에서 같이 옵션 값을 정해봅시다. 2. 옵션 flex 옵션 div{ flex-direction: column; } ① flex-direction direction은 방향이라는 뜻으로 flex-direction옵션은 가로 방향으로 정렬할지 세로 방향으..
![[CSS] flex를 이용한 가운데 정렬](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/dbEwVP/btrIjOCSyYJ/EH6hhKEzc2WCiigB57Jg2k/img.png)
CSS box-shadow 그림자로 음각 효과 내기
css box-shadow를 이용해 음각 효과를 내보겠습니다. 1. CSS box-shadow div{ box-shadow:inset 3px 3px 3px #333; } inset box-shadow 속성에서 inset을 설정해주면 그림자가 안쪽에 생기는데 이것이 들어간 모양으로 보입니다. - box-shadow 속성 값 숫자로 된 속성 값은 순서대로 세로, 가로, 흐리게 값입니다. 흐리게 하는 부분은 생략이 가능하지만 세로와 가로 값은 꼭 적어주셔야 합니다. 마지막으로 색상 코드를 적으면 box-shadow를 사용할 수 있습니다. - 2. box-shadow 예제 See the Pen box-shadow by ssimplay (@ssimplay) on CodePen. codepen에서 보기 그림자가 어..
css 그라데이션 쉽게 넣기
css 그라데이션 쉽게 넣는 사이트를 알려드리겠습니다. 1. CSS 그라데이션 사이트 https://www.colorzilla.com/ ColorZilla - Eyedropper, Color Picker, Gradient Generator and more www.colorzilla.com ColorZilla '컬러질라'라는 사이트로 그라데이션을 css 코드로 사용할 수 있게 해 주는 사이트입니다. 백문이불여일견 바로 확인하러 가봅시다. - 2. CSS 그라데이션 고르기 Gradient 오른쪽의 Gradient 버튼을 클릭합니다. - 그라데이션 선택 그라데이션 기본 제공 팔레트가 여러 개 있습니다. 원하는 그라데이션을 선택해주세요. 만약 원하는 그라데이션이 없다면 조절 바를 이용해 직접 그라데이션을 만들어..
