본문 바로가기
728x90
반응형

coding124

[css] 그림자를 넣어보자 box-shadow 안녕하세요. 개자이너 씸플레이입니다. box-shadow를 이용해 그림자를 살짝 넣어보겠습니다. 1. 그림자를 넣을 컨텐츠 준비 개인 프로젝트로 진행 중인 사이트입니다. 여기에 그림자를 살짝 넣어보겠습니다. 2. box-shadow li{ box-shadow: 5px 5px 5px rgba(0,0,0,0.55); } box-shadow를 이용해서 그림자를 넣어주시면 됩니다. 값은 순서대로 x-position y-position blur color 입니다. 여기서 x-position이란 x좌표. 즉, 가로 위치를 말합니다. 수학 시간에 좌표를 찍어보신 기억 다들 있으시죠? x는 가로 y는 세로 위치를 의미하고, px단위로 위치를 조정할 수 있습니다. 기준은 그림자를 넣는 컨텐츠가 기준입니다. color에 .. 2020. 11. 29.
[css] 테이블 테두리 한 줄로 만들어 보자 안녕하세요. 개자이너 씸플레이입니다. 테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다. 위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다. 1. 테이블에 테두리 넣기 See the Pen LYZwROL by ssimplay (@ssimplay) on CodePen. table{ border:1px solid black; } th, td{ border:1px solid black; } 일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 2. border-collapse : collapse See the Pen wvWVzOb by ssimplay (@ssimplay) on CodePen. 테이블에.. 2020. 11. 24.
[css] 도형을 회전시키는 애니메이션을 만들어보자 안녕하세요. 개자이너 씸플레이입니다. css를 이용해 애니메이션 기능을 넣어보겠습니다. 1. transform div:hover{ transform: rotate(45deg); } transform 기능을 이용해 도형을 회전시켜보겠습니다. 사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다. div:hover{ 변형 : 회전 (45도) } 영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠. 2. 실제 적용 See the Pen WNxWMyz by ssimp.. 2020. 11. 22.
[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자 안녕하세요. 개자이너 씸플레이입니다. html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않.. 2020. 11. 21.
[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자 안녕하세요. 개자이너 씸플레이입니다. 랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다. 래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다. vs code에서 단축키를 이용해 래핑을 해보겠습니다. 1. 모든 명령어 보기 래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다. Ctrl + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다. 최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다. 2. wrap wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 .. 2020. 11. 19.
[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 화면 분할을 해보겠습니다. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단.. 2020. 11. 18.
[vs code] 비주얼 스튜디오 코드 단축키를 검색해보자 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드에서 단축키를 검색해보겠습니다. 1. 바로 가기 키 vs code를 열어서 파일 > 기본 설정 > 바로 가기 키를 선택해줍니다. 단축키는 Ctrl + K Ctrl + S 입니다. 이 단축키가 조금 생소하실 텐데 어떻게 사용하는지 바로 보여드리겠습니다. 먼저 Ctrl + K 를 누르고 기다립니다. 아래에 메세지가 뜨는데 둘째 키를 잠시 기다렸다가 누르라고 알려줍니다. 키보드에서 잠시 손을 떼었다가 둘째 키인 Ctrl + S 를 마저 눌러줍니다. 두 개의 단축키를 이용해 바로가기 키를 실행시킨 모습입니다. 아래 메세지를 잘 보고 해 주시면 간편하게 열 수 있습니다. 이렇게 바로가기 키를 열어 비주얼 스튜디오 코드의 단축키를 확인해 볼 수 있습니다. 2.. 2020. 11. 16.
[Python] 파이썬 여러줄 주석을 만들어보자 안녕하세요. 개자이너 씸플레이입니다. 파이썬에서 여러 줄 주석을 만들어보겠습니다. [한 줄 주석] [coding/etc] - [Python] 파이썬 주석 처리 하기 1. 여러줄 주석 바로 여러줄 주석 화면을 살펴보겠습니다. 여러줄 주석을 처리하는 방법은 2가지가 있습니다. 1번째 방법은 작은따옴표입니다. '''(작은따옴표 3개)만 있다면 여러 줄 주석처리를 할 수 있습니다. ''' 여기는 주석 처리 ''' 이렇게 따옴표 안쪽의 글은 주석처리가 됩니다. 2번째 방법은 큰따옴표입니다. """(큰따옴표 3개)를 이용해서 동일한 방법으로 주석처리를 할 수 있습니다. """ 여기도 주석 처리 """ 작은따옴표랑 마찬가지로 따옴표 안쪽은 주석 처리가 됩니다. 2. 실행 주석 처리가 잘 되었는지 Run을 통해 확인해.. 2020. 11. 9.
[Python] 파이썬 주석 처리 하기 안녕하세요. 개자이너 씸플레이입니다. 파이썬에서 한 줄 주석 처리를 해보겠습니다. 주석은 사전적 정의로 낱말이나 문장의 뜻을 쉽게 풀이함. 또는 그런 글을 말합니다. 코딩에 익숙하신 분들은 주석이 왜 필요한지 알 수 있지만 처음 접하시면 갑자기 왜 주석이 필요하지? 하는 의문이 드실 겁니다. 코드 중간에 넣는 주석은 메모로도 활용이 가능합니다. 주석 처리를 하면 실제 실행되는 화면에서는 나오지 않으니 한글로 적어도 오류가 발생하지 않고 말입니다. 메모로도 활용 가능하지만, 여러 사람들과 협업일 경우 주석을 이용해 내가 짠 코드를 설명하는 용도로도 쓰입니다. 코드는 한눈에 파악하기 힘들지만 그 코드 주변에 주석으로 이건 이러이러한 코드입니다!라고 적혀있으면 자신이 짠 코드가 아니어도 알아보기 쉽겠죠. 1... 2020. 11. 8.
반응형