HTML - 블록 레벨(Block level)요소와 인라인(inline) 요소 (HTML5에서는 완벽하게 사용되는것은 아니지만, css를 사용할때 반드시 알고 넘어가야한다.) 1. 블록 요소 1.DIV, H1, P 2.사용가능한 최대너비를 사용한다. 3. 크기를 지정할 수 있다. 4. (width: 100%, height:0; 로 시작) 5. 수직으로 쌓임 6. margin, padding 위,아래,좌,우 사용가능하다. 7. 레이아웃 2. 인라인 요소 1.SPAN, IMG 2. 필요한 만큼의 너비를 사용한다. 3. 크기를 지정할 수 없다. 4. (width0; height:0;로 시작) 5. 수평으로 쌓임 6. margin,padding 위,아래는 사용할 수 없다. 7. TEXT ※ 줄바꿈있고 없고 차이..
(위 스샷은 스프링 부트(gradle)를 VSCODE에 셋업했을시 기본적으로 딸려오는 마크다운 문서이다.) VSCODE 는 마크다운 편집기로도 아주 좋다. 별도의 플러그인을 설치하지 않아도 기본적으로 마크다운 뷰어를 제공하기때문이다. 화면을 한쪽으로 분할해놓고 실시간으로 마크다운 문법을 연습해볼수가 있다. 이것을 좀더 편하게 쓰기위해서 단축키를 변경해보자. 왼쪽하단의 설정 모양 클릭 ->바로가기 키 클릭 필자세팅 : 왼쪽 탐색기영역을 닫기 Ctrl + B (기본) 뷰 편집기, 창, 분활화면 닫기 Ctrl + W (기본) 측면에서 미리보기(마크다운) Ctrl + K 로 설정 오른쪽으로 화면분할 Ctrl + T 로 설정 마크다운 문서는 깃허브에서도 사용할수 있고 티스토리 블로그에서도 지원된다. 티스토리 글쓰..
Live Server 는 필자가 가볍게 화면단 코딩을 하는데 유용하게 쓰고 있는 플러그인이다. + 소개 Shortcuts to Start/Stop Server [NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.] Open a project and click to Go Live from the status bar to turn the server on/off. Right click on a HTML file from Explorer Window and click on Open with Live Server. . Open a H..
Beautify VSCODE에는 이클립스처럼 코드를 자동으로 정리해주는 기능이 기본 탑재가 아니기 때문에 플러그인을 설치 해야한다. 단, 설치만 한다고 해서 바로 사용할수 있는 것이 아니라 키 설정을 해주어야 한다. 하단 설정 - > 바로가기 키 -> Beautify file 은 전체 Beautify selection 은 드래그한 영역만 * 필자는 Beautify selection 만 Ctril + l로 바인딩했다. div 가 제멋대로 마음에 안 든다. 영역을 선택후 Ctrl+l를 누르면 이렇게 정렬되는것을 볼 수 있다. 이와 같은 기능을 하는 플러그인은 필수적으로 필요하지 않나 싶다.
+ VSCODE 테마 설정 단축키 Ctrl + , 입력 + Color Thema 에서 테마 변경 + Color Customizations : setting.json 클릭 아래는 필자가 즐겨쓰는 블루갬성 테마이다. 참고로 필자가 사용하는 키보드와 노트북도 블루색상이다. 내맘도 블루 블루해~~~~ + 위 테마 코드는 아래와 같다. { "editor.fontSize": 20, "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "files.exclude": { "**/.classpath": true, "**/.project": true, "**/...
VSCODE 한글 플러그인 설치방법이다. Ctrl +Shift +X (확장) 에서 korean을 검색 korean Language Pack for Visual Stuido Code 를 설치한다. 한글이 나오는것을 볼수가 있다. 한글 만세 !
VS CODE 필자가 가장 애용하는 IDE 툴이다. 장점은 공짜에다가 지원하는 언어와 플러그인들도 많고 가볍고 빠르다. 이클립스를 사용하다가 VSCODE나 InteliJ를 쓰게 되면 이클립스는 두번다시 쓰고싶지 않아진다. VSCODE에서도 아파치 톰캣 & 자바 스프링 개발환경을 구축할 수 있다. 스프링엔 InteliJ가 좀더 좋은것 같은데,, 커뮤니티 버전은 한계가 있고 상용툴로 구매를 해야한다는 단점이 있다. 대학생이면 유료버전을 무료로 사용할수 있지만, 학생이 아닌관계로 결국 VSCODE다. 단점은 초기설정하는것이 은근히 귀찮다는점이고 setting.json을 만져야할때가 생기고 종종 사용하다보면 각종 플로그인과 설정파일들이 충돌나서 엉킬때가 있다는 점이다. ( C/C++, C#, JAVA, 파이썬,..
CSS는 원리를 제대로 모르면 이게 왜 이렇게 되는지 헤매면서 많은 시간을 허비하게 되는것같다. 그래서 기초가 중요하고 항상 WHY? 라는 질문을 던져보아야 한다고 느낀다. 이번주제는 요소의 수평화이다. 먼저 예제를 보면서 이해하길 바란다. html A B C css .container{ border: 2px solid red; } .container .item{ width: 100px; height: 100px; border: 2px solid; border-radius : 10px; } 결과. A B C div 태그의 default 값이 block이기에 특별히 다른요소로 지정해주지 않는이상 block으로 정의되어 있기에, 위에서부터 아래로 쌓인다. HTML에서는 기본적으로 inline 요소와 bloc..