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

[vs code] 비주얼 스튜디오 코드 아이콘으로 새파일 만들기

아이콘을 이용해서 새파일을 만들어볼거에요. 1. 폴더 생성 ① 폴더 - 먼저 작업을 위한 폴더를 하나 생성해주세요. - 왼쪽 탐색기에서 보인다면 오케이입니다. - 탐색기가 보이지않는다면 더 왼쪽에 있는 종이가 겹쳐진 아이콘이 보이시나요? 맨 위에있는거요. 그걸 눌러주세요. 2. 새파일 만들기 ① 마우스 올리기 - 폴더 이름에 마우스를 올려보겠습니다. - 폴더 이름 오른쪽으로 여러개의 아이콘이 나타나는게 보이시나요? - 여기서 맨 첫번째에 있는 아이콘을 클릭해줍니다. 이렇게 새 파일이라고 이름도 뜹니다. ② 파일 이름 정하기 - 아이콘을 클릭하면 이렇게 파일 이름을 적을 수 있는 칸이 나타납니다. - 여기에 파일명을 적어주시는데 주의할점은 확장자명도 같이 적어주셔야하는 것입니다. - 확장자가 뭔가요? 점 ..

coding/editor · 2021. 8. 10. 09:30

[css] 미디어쿼리 max-width 사용시 주의점

지난 포스팅에 이어서 max-width에 대해 주의해야 할 점을 몇 가지 적어보겠습니다. 1. 적용 영역 ① 최댓값 - 미디어쿼리에서 max-width를 설정한다는 것은 0부터 설정값까지 적용을 시키겠다고 하는것입니다. - 위 이미지의 값은 브라우저의 사이즈가 0~800px 일 때 적용한다는 뜻과 같습니다. - 결국 브라우저 사이즈가 1200px 일 때는 적용되지 않으니 이런 효과를 이용해 반응형 웹을 만드는 것입니다. 2. 겹치는 영역 ① 순서 - 이번엔 코드로 살펴봅시다. 설명대로라면 0~1000px 적용, 0~600px 적용되는 미디어 쿼리가 두 개 있죠. - 그런데 0~600px 영역은 겹치는 영역입니다. - 이럴 때는 아래에 있는 코드가 적용됨으로 작은 영역을 아래에 적어주시면 됩니다. 3. 기..

coding/html + css · 2021. 7. 19. 09:30

[css] 미디어쿼리로 반응형웹 제작하기

css에서 미디어 쿼리를 이용해 반응형 웹을 제어해볼게요. 1. html 반응형 ① html - 일단은 간단하게 html을 작성해봤어요. - 예시로 사용할 거라 간단하게 하나만 만들었습니다. - [! + Tab]을 누르면 html 기본 구조를 간단하게 불러올 수 있습니다. 자세한 사항은 아래에 링크로 달아둘게요. 2. pc 사이즈 css *{ margin:0; padding:0; } .reactive{ width:100%; height:300px; background:lightcoral; text-align: center; line-height: 300px; font-size: 24px; color:white; } ① 기본 css - pc 사이즈는 그냥 평소대로 코딩을 해줍니다. - 저는 보기 좋게 간단..

coding/html + css · 2021. 7. 13. 09:30

[vs code] 비주얼 스튜디오코드 html에서 emmet(에밋) 사용하기

에밋(emmet)은 html, css 등 문서를 편집할 때 빠른 코딩을 지원하는 플러그인이에요. 이것만 알면 코드를 더 빨리 짤 수 있답니다. 와우 신난다! 1. 자식 태그 만들기 ① 꺽쇄(>) - > 이런 모양의 꺽쇄를 사용하면 안쪽에 자식 태그를 넣을 수 있습니다. - 사용 방법은 div 태그 안쪽에 ul 태그를 넣고 싶을 때 [div>ul]이라고 적고 [Tab] 키를 눌러주세요. ② Tab - 위에서 설명한 대로 [Tab] 키를 눌러주세요. - 표시된 ul 태그가 div 태그 안쪽에 들어간 것을 확인할 수 있습니다. 2. 병렬로 태그 만들기 ① 플러스(+) - 이번엔 +를 이용해 적어줍니다. - 적다 보면 플러그인이 자동으로 뜨는 게 보이시죠? 이럴 때 그냥 엔터를 누르셔도 됩니다. - +를 사용하..

coding/editor · 2021. 7. 9. 09:30

[vs code] 비주얼 스튜디오코드 html에서 emmet(에밋) 사용하기

[vs code] 비주얼 스튜디오코드 찾아서 바꾸기

한 번에 동일한 문자를 바꿀 때 사용하면 좋은 기능입니다. 1. Ctrl + Shift + L ① 드래그 - 갑자기 코드가 보인다고 너무 당황하지 마시고요 바꾸고 싶은 단어만 드래그해봅시다. - 저는 email이라는 단어를 드래그했어요. - 어렵지 않죠? ② Ctrl + Shift + L - 드래그가 잘 되었나요? - 그렇다면 이 상태에서 [Ctrl + Shift + L] 단축키를 눌러주세요. 2. 바꾸기 ① 커서 확인하기 - 단축키를 누르면 같은 단어가 모두 선택이 되면서 커서도 생기는 것을 볼 수 있습니다. - 저 email이라는 두 단어 모두 커서가 있는 것 보이시죠? - 여기까지 왔다면 끝난 겁니다. 그냥 바꾸고 싶은 단어로 다시 써주면 됩니다. ② 바꾸기 - 하나만 바꿔도 전체 단어가 모두 바뀌..

coding/editor · 2021. 7. 8. 09:30

coding 263