'coding' 카테고리의 글 목록 (26 Page)

[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. 테이블에..

coding/html + css · 2020. 11. 24. 07:30

[css] 도형을 회전시키는 애니메이션을 만들어보자

css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다. 신기하죠? 그럼 바로 시작해볼까요? 1. transform div:hover{ transform: rotate(45deg); } transform 기능을 이용해 도형을 회전시켜보겠습니다. 사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다. div:hover{ 변형 : 회전 (45도) } 영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠. 2. 실제 적용 See the Pen WNxWMyz by ..

coding/html + css · 2020. 11. 22. 07:30

[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자

html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다. 2. ! + Tab !(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다. html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다. 3. 수정할 부..

coding/editor · 2020. 11. 21. 07:30

[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자

안녕하세요. 개자이너 씸플레이입니다. 랩은 음식을 먹고 위에 씌우는 그 랩과 같은 단어입니다. 래핑 역시 같은 의미로 음식을 랩으로 포장해준다는 뜻이죠. 코딩에서의 래핑도 같은 의미입니다. 그러니 래핑이라고 하면 어떤 코드를 포장해준다고 생각하시면 됩니다. vs code에서 단축키를 이용해 래핑을 해보겠습니다. 1. 모든 명령어 보기 래핑 할 코드를 블럭지정 해줍니다. 그냥 주르륵 드래그로 잡아주시면 됩니다. Ctrl + Shift + P 단축키를 누르면 모든 명령어 보기라는 창이 뜹니다. 여기서 검색해주시면 됩니다. 최근에 사용한 적이 있어서 이미 뜨기는 하는데 같이 검색해보겠습니다. 2. wrap wrap이라고 검색하면 Emmet: 약어로 래핑이라는 명령어가 나올 겁니다. 최근에 사용한 항목이라 맨 ..

coding/editor · 2020. 11. 19. 07:30

[vs code] 비주얼 스튜디오 코드 wrap! 래핑! 감싸기를 해보자

[vs code] 비주얼 스튜디오 코드 화면 분할을 해보자

비주얼 스튜디오 코드에서 화면 분할을 해볼게요. 1. 분할하기 가장 간편한 방법입니다. 현재 코드를 작성하는 파일의 탭에서 오른쪽 클릭을 한 뒤 분할하고 싶은 영역을 클릭해줍니다. 위 아래 왼쪽 오른쪽이 있는데 오른쪽을 선택해보겠습니다. 오른쪽에 분할을 눌렀던 창이 하나 더 생기는 것을 볼 수 있습니다. 어느 위치에 분할하는지 정해진 것은 없습니다. 그냥 자신이 편한 분할 화면을 사용하시면 됩니다. 파일 이름 옆에 X 버튼을 누르면 분할된 화면을 닫을 수 있습니다. 2. 단축키 사용 단축키가 있다면 단축키를 사용하는 것이 인지상정! 화면 분할의 단축키는 Ctrl + \(역슬래시)입니다. 좌우로 분할하는 단축키입니다. 수직 분할은 아래 표를 참고 바랍니다. 이름 단축키 화면 분할 Ctrl + \ 화면 수직..

coding/editor · 2020. 11. 18. 07:30

coding 263