ctrl + shift + N : 새창열기 (수업시간에 계속 사용하세요) shift + alt + ↑↓ : 1개의열을 위로 복사 혹은 아래로 복사하기 shift + alt + f : 나열되어 있는 코드를 세로형으로 보기 ctrl + b : 좌측 폴더를 접고 열때 alt + ↑ : 작성코드 1열을 위로 이동 alt + ↓ : 작성코드 1열을 아래로 이동 alt + F4 : 비주얼 스튜디오 종료시키기 (창닫기) ================================================== html 스페이스의 실행을 하는 단축키 입니다. html:5 + tab ! + tab 단축키는 사용자의 편의성에 따라 키를 변경할 수도 있습니다. 위에 있는 내용은 default설정값이며, 이를 내가 편한 키보..
간혹 폴더내 파일을 연결할 때 어려움을 경험하시는 분들이 있습니다. 이 폴더 경로란 매우 중요합니다. 예를 들어 제 사이트인 https://fullmooncomputer.tistory.com/12 라고 한다면 절대 경로입니다. 8_웹디자인 기능사 필기 문제은행 웹디자인 필기도 문제은행 방식입니다. 최대한 많은 문제를 풀어보는 것이 좋겠죠? 다른 문제집을 사시는 것보다 문제은행에서 문제를 풀어보시는 것을 추천드립니다. 현장에서도 PC로 시험을 fullmooncomputer.tistory.com 단 상대 경로는 현재 파일의 위치를 기준으로 연결되는 파일의 상대적인 경로를 기술하는 것을 의미합니다. 상대 경로는 주소나 프로젝트 디렉토리 위치가 바뀐다해도 내부 구조만 그대로라면 수정없이 그대로 사용할 수 있다는..
7_Google Fonts & 눈누
다양한 웹디자인을 위해서는 폰트를 가져오는 것이 중요합니다. 웹상에 올려진 웹 폰트를 css에 연결하여 폰트서식을 지정합니다. 구글폰트에 있는 모든 폰트는 무료이니 상업용이 가능합니다. filter를 통해 본인이 원하는 스타일의 폰트를 지정하여 검색할 수 있습니다. 폰트를 웹디자인을 위해 Download하여 디자인 파일에 지정하여 디자인을 사전 작업을 할 수 있고, 웹 사이트에 게시를 할 때에는 select를 통해 웹폰트 연결링크를 받습니다. 구글웹사이트에 구글폰트라고 검색하면 됩니다. googlefont라고 검색해도 자연스럽게 연결됩니다. 1) 구글폰트 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful,..
5_@charset "utf-8";
charset은 문자, 기호, 숫자 데이터를 부호화하는 것도 인코딩(encoding)한다고하며 이 인코딩 방식 중 전세계 문자와 기호를 원활하게 하는 인코딩 방식이 utf-8입니다. CSS작업을 하실 땐 꼭 최상단에 @charset "utf-8"; 을 작업해야만 합니다. 시험에 나오는 utf-8을 정의하는 이유에 대해 알고있다면 더 좋을 것 입니다. @charset 'utf-8'; 해당과 같이 외따옴표로 작업하는 경우에는 W3C CSS에서 오류로 간주됩니다. 간단한 부분으로 보이지만 정확히 명기하는 것을 잊지마세요.
W3C[ World Wide Web Consortium ] 월드와이드웹컨소시엄은 서버기술의 표준화를 추진하고 있는 교육,연구기관 및 관련 회사들의 단체입니다. www컨소시엄 또는 w3c라고 부르고 있습니다. 해당에서 제작된 웹 표준화 검사 사이트에 최종 작업하신 파일을 올려보시기 바랍니다. 웹디자인 기능사 시험에서는 W3C 유효성 검사에 준수하는 웹사이트 구조를 제작할 것을 명시하고 있습니다. 시험 고사장에서는 웹연결이 끊겨있으므로 유효성 검사가 불가하지만, 집에서 최종 파일을 확인하실 땐 아래 페이지에 직접 업로드하여 확인해보시기를 바랍니다. HTML 유효성 검사 : https://validator.w3.org/#validate_by_input CSS 유효성 검사 : https://jigsaw.w3.o..
3_Emmet 기능
모든 코드를 직접 입력하여 진행하는 것을 하드코딩이라고 합니다. 하지만 최근엔 프로그램이 워낙 좋아져, 언어를 빠르게 퍼블리싱 할 수 있도록 Emmet기능이 활성화되어 있습니다. 특히나 VS는 기본적으로 해당 기능을 탑재합니다. 시험은 물론 알아둔다면 실무작업시에도 빠른 속도로 제작이 가능할 것입니다. 단, 편한것에 익숙해지면 내부환경에 따라 Emmet이 불가한 프로그램을 이용하게 된다면 어려움이 있을 것 입니다. 때문에, 하드코딩이 어느정도 익숙하고 각 코드명이 명확히 숙지되었을 때부터 Emmet을 이용하기를 권장합니다. 에밋(Emmet)단축키 https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 d..
2_비주얼스튜디오 코드정리
깔끔한 코드는 기본중의 기본입니다. 웹사이트 작업은 혼자 끝내는 것이 아닌 협업입니다. 때문에 코드를 깔끔히 정리하여 다음 작업자에게 넘기는 것이 중요하겠죠? 막상 작업 후 폴더를 전달하려했을 때, 정리되지 않은 코드를 하나씩 엔터를 쳐서 작업을 하기엔 너무 어렵습니다. 시간적인 단축과 효율성을 높이는 방법을 소개합니다. (단축키와 정리법을 알아두면 좋지만 가장 좋은 것은 처음부터 스스로 작업하며 위계를 만들어 진행해주는 것 입니다:)) 1) 단축키로 정리하는 방법 코드 자동정렬 단축키 (Code Formatting, Prettier) - OS마다 상이 Windows : Shift + Alt + F Mac : Shift + Option + F 2) VS 우클릭으로 자동 정렬하는 방법 우측버튼클릭 -> [..
1_비주얼스튜디오코드(VS) 익스텐션 기능
비주얼스튜디오 다운로드 https://code.visualstudio.com/ 비주얼스튜디오 익스텐션 기능이란 사용자가 어떤 목적으로 Editer를 사용하지 모르기 때문에 가장 기본적 기능만 프로그램에 넣어두고, 나머지 필요기능은 필요한 때마다 추가하여 사용할 수 있게 해놓은 것입니다. 우리가 흔히알고있는 플러그인 개념과 동일하다라고 보면 됩니다. Visual Studio Extension 프로그램 Color Picker - 퍼블리셔와 디자이너에게 너무도 좋은 툴입니다. 컬러값을 rgb로 파악하여 세세하게 원하는 컬러를 지정할 수 있습니다. 때문에, 퍼블리싱에서 디자인이 동시에 일어난다 하더라도 보다 명료한 디자인을 완성시킬 수 있습니다. Korean Language Pack for Visual Stud..