도담도담

개발자 공부를 시작하면서 개발자 도구라는 것을 처음 알게 되었다. 근데 보면 뭐가 되게 많다. 개발자 도구를 보고 문제를 찾아서 수정하면 된다는데 어떻게 사용하는지 머리가 혼란스러워져 왔다. 그래서 내가 사용해본 기능들만 조금씩 정리를 좀 해보려 한다! 개발자 도구란? 일단 간단한 내용만 정리하고 넘어가자면, 개발자 도구란 웹 개발을 도와주는 다양한 도구들로써 HTML, CSS, JavaScript 등의 기능들을 확인해 가며 작업할 수 있어서 효율을 극대화 할 수 있다. 개발자 도구 열기 기본적으로 윈도우에서 사용할 때는, ctrl+shift+I 혹은 F12 를 클릭하면 개발자 도구 창이 나타난다. 자주쓰는 탭 우선 가장 자주 눌러보게 되는 탭들이다. 검사도구 : 검사하고 싶은 영역을 선택 디바이스 모드..

IntelliJ (인텔리제이) 배경이미지 세팅 별건 아니고 작업하다보면 어둡기만한 곳에서 눈이 심심할수도 있을 것이다 (아마도) 그래서 가끔 코드가 안떠오를 때 기분전환으로 툴의 배경화면을 설정해 주는 방법이있다. [File] - [Setting] 혹은 Ctrl + Alt + S 를 눌러서 Settings 로 들어간 다음 [Appearance & Behavior] - [Apperance] - [Background Image] 를 클릭한다. Image -> 원하는 이미지 경로 Opacity -> 이미지의 투명도 배열 종류 -> 원하는 배열 종류 선택 이 [Background Image] 창을 좀 늘리면 이렇게 미리보기도 가능하다! 설정된 이미지를 아예 삭제하고 싶으면, 우측 하단에 있는 [Clear and..

VCS란? → 우리는 파일 특정 파일들을 관리 할 때 파일의 이름을 조금씩 변경해서 (ex. test1.txt / test2.txt 등등) 관리할 수 있게 된다. → 그러한 경우 파일이 적은 경우에는 관리 할 때 용이할 수 있으나 점점 파일이 많아지게 될 경우 → 파일 관리가 어렵게 되는데, 그것을 조금이라도 손 쉽게 관리하기 위해 사용 하는 것이 → 버전 관리 시스템 이라 하고 다른 말로는 형상 관리 시스템이라 한다. → 버전관리 시스템에는 CVS, SVN, Mercurial, Git 등 다양하게 존재함 → VCS는 버전 관리 시스템이라는 뜻을 가지고 있음 Git이란? → Git은 로컬저장소의 버전 관리 시스템 (VCS)을 이야기하고, 소스코드나 파일의 버전을 관리하는 시스템을 뜻 함 GitHub란? ..

ol 태그 ol 태그는 Ordered List 의 약자로 기본적으로 순서를 나타내며, 기본형식은 아래의 형식을 따른다. 간단한 목록 설정또한 바로 적용할 수 있는데, 'type' 속성을 통해 리스트 설정을 할 수 있다. (설정하지 않을 시에는 숫자를 기본 값으로 사용한다) See the Pen ol by lsj5634 (@zinisang) on CodePen. ul태그 ul 태그는 Unordered List 의 약자로 기본적으로 순서없는 리스트이며, 기본형식은 아래의 형식을 따른다. 간단한 목록 설정또한 바로 적용할 수 있는데, 'list-style-type' 속성을 통해 리스트 모양을 설정하거나 없앨 수 있다. (설정하지 않을 시에는 기본인 disc 값으로 사용된다) See the Pen ul by l..

기본 테이블 만들기 가장 기본적으로 테이블을 만들기 위해서는 , , , 이렇게 4가지 태그를 사용한다. 은 지금부터 테이블이라고 선언해 주는 태그이다. 은 table header 의 줄임말로 테이블 위에 카테고리 이름을 나타낼때 주로 쓰인다. 은 table row 의 줄임말로 한줄, 엑셀에서의 하나의 행을 나타낸다. 은 table date 의 줄임말로 한칸, 엑셀에서의 하나의 셀을 나타낸다. 그래서 종 구성을 나타낼 때는 보통, ~~ ~~ ~~ 이런 형태로 구성된다. 테이블 선 / 제목 추가 그냥 테이블만 만들어 놓으면 글씨들만 보이지만, 만들어놓은 테이블의 구성을 눈으로 확인하고 싶다면 border="1" 을 추가해주면 눈으로 테이블의 선을 확인할 수 있다. 또한, 태그를 사용하면 그 테이블의 제목을 ..

시멘틱 태그 (Semantic tag) 란? Semantic 이란 사전적으로 "의미의, 의미론적인" 이라는 뜻을 가지고 있다. 그러므로 시멘틱 태그는 의미있는 태그들이라는 뜻 정도가 될수 있다. 기본적으로 안에 들어가는 이름으로 그 역할을 알 수 있다 하면 semantic 일 것이고의미를 알 수 없다하면 non-semantic 이라고 할수 있다. non-semantic semantic , , , , , , , 등등 기존에는 에 id 나 class 를 부여해서 사용해야만 했다면, HTML5 에 들어와서 다양한 시멘틱 태그들이 생기면서 보기에 더 명확하게 의미를 표현할 수 있게 되었다. 예) 으로 사용하던 내용을 로 사용 할 수 있게 되었다.

프로젝트를 작업할때 하이퍼링크를 걸어주는 [a href] 는 많이 사용할 것이다. 그런데 기본적으로는 늘 파란글씨에 밑줄이 그어져 있어 별로 안예뻐보인다 (제일중요) 그래서 우선 기본적으로 해 두어야 할 것은 보통 글씨 밑에 줄을 삭제하는 것을 우선으로 한다. See the Pen a href by lsj5634 (@zinisang) on CodePen. 위와같이 text-decoration-line 이라는 속성을 통해 밑줄을 없앨수도 있고, 밑줄의 위치를 바꿀 수도 있다. 하이퍼링크를 동작에 따라 글자색이나 형식을 변경하는 방법도 있다. See the Pen a href2 by lsj5634 (@zinisang) on CodePen. a:link { color :~~; text-decoration: ~..

html 내부에서 아무리 엔터를 쳐서 글을 정렬한다고 해도 막상 프로젝트를 실행시켜보면 글이 그냥 쭉 이어져 있다. 이를 위해 우리는 html 태그들을 활용하여 글을 작성해야 한다. preformatted 의 약자로, 내부에 엔터를 사용하여 평소에 쓰는 것 처럼 문장을 정리할 수 있다. See the Pen by lsj5634 (@zinisang) on CodePen. break 의 약자로, 원하는 구간에서 엔터를 사용하듯이 사용할 수 있다. 태그를 사용하는 만끔 줄 넘기기가 가능하다. See the Pen by lsj5634 (@zinisang) on CodePen. paragraph 의 약자로, 문장을 쓰면 문장별로 구간을 나눈다. See the Pen by lsj5634 (@zinisang) on ..