맨 땅에 프론트엔드 개발자 되기

VS Code로 코드 작성시에 코드 작성을 편하게 도와주는 Extension 몇 개를 소개해볼까한다. 1. Indent-rainbow indent는 들여쓰기라는 뜻으로 코드를 작성할 때 들여쓰기 단계에 따라 4가지 색상으로 구분해서 코드 작성을 도와주는 기능이다. 코드의 길이가 짧을 때는 별 유용함을 느끼지 못하지만, 코드가 길어지면 포함관계를 구분해서 작성해야할 때 위치를 잘 찾을 수 있도록 도와준다. 2. Auto Close Tag / Auto Rename Tag HTML/XML 태그의 닫힘 태그를 자동으로 완성해주는 기능이다. 태그 명을 수정할 때에도 닫힘 태그를 자동으로 수정해준다. 꼭 필요하고 없어서는 안 되는 기능이라고 생각한다. 정말정말!!! 3. Color Highlight 색을 많이 다루..

CSS 문법에서 크기를 설정하는 방식은 크게 3가지가 있다. 1. 고정 단위 - px, cm 등 단위로 입력하는 방법 2. 상대적 단위 - %, em, fr 등으로 입력하는 방법 3. 화면비 - vh, vw 으로 입력하는 방법 고정 단위 px는 우리가 알고 있는 컴퓨터의 픽셀 단위를 의미한다. 예를 들어 height: 200px 이면, 높이를 200픽셀로 설정하겠다는 의미다. px, cm, mm 등은 우리가 실생활에서 익숙하게 쓰는 고정된 단위로 px이 컴퓨터와 호환이 가장 높은 단위기 때문에 주로 cm, mm 보다는 px이 많이 쓰여지게 된다. 상대적 단위 %, em, fr은 모두 부모 요소에 따른 상대적 단위를 의미한다. %는 선택자가 속해있는 부모 요소 중에서의 비율을 의미하고, em도 동일하다. ..

CSS 문법에서 컬러는 입력하는 방법은 4가지가 있다. 1. Color Name 2. RGB 3. HEX 4. HSL Color Name 제일 쉽고 직관적인 방법으로, 컬러 이름으로 지정하는 방법이다. 그러나 세상의 모든 색을 이름으로 불러 지정하기 어렵듯이 CSS 기본 문법에서 제공하는 컬러 이름은 가짓수가 한정적이다. 어떤 컬러 이름이 제공되고 있는지 궁금하다면 아래 링크 클릭! https://www.w3schools.com/colors/colors_names.asp HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering po..

CSS (Cascading Style Sheets) 기존의 html 문서는 디자인 요소를 넣으려면 html 문서마다 디자인 요소를 적용해줘야했다. 그러나 디자인 요소가 변경될 때마다 그 방대한 문서를 모두 수정하는 것은 불가능한 일이었고, 디자인 요소를 가진 파일만 CSS라는 문법으로 따로 분리하여 관리하니 유지 보수가 매우 쉬워졌다. CSS 파일은 .css 라는 확장자를 가진 파일로 html 문서와 연결되어 사용된다. link 태그를 head 영역에 넣어주며, rel 속성으로 stylesheet이라는 것을 알려주며, href 속성에 연결할 css파일의 주소를 적어준다. CSS 파일 안에는 보통 '선택자'라고 부르는 CSS를 적용할 요소를 지정해서 중괄호{} 안에 적용할 요소를 적는다. Selector ..

HTML 문서는 보통 HTML 태그로 문서 구조를 짠 뒤에 CSS로 HTML 문서에 디자인 속성을 넣어주고, JAVASCRIPT로 동적 구현을 하는 시스템으로 이루어져 있다. 보통 확장자를 .html .css .js 로 문서를 3개 만들어 css파일과 js파일을 html파일과 연결시켜 주는데, css파일과 js파일에서 html 문서의 어떤 것을 선택해 속성을 지정해주고 싶을 때 id와 class가 필요하게 된다. 말로 설명하려니 어렵네.. 바로 예제를 보자. 예제 연습 div로 지정된 4개의 네모가 오른쪽 브라우저에 표시된다. 4개의 div에는 class가 지정되어 있고, 맨 마지막 div에만 id가 지정되어 있다. example.css 문서를 보면 background 컬러가 지정되어 있는데 각기 다른 ..

폼 태그와 인풋 태그 : 폼 태그는 어떤 입력 값을 받는 폼을 말하며, 보통 하위 인풋 태그들과 함께 쓰인다. : 입력 값을 받는 태그를 말한다. 속성 값으로 text, button, color, range, date 등 어떤 입력값을 받을 것인지 지정할 수 있다. 예제 연습 : input type="text"와 비슷하게 글자 내용을 입력받을 수 있는 태그. : input type="button"과 비슷하게 버튼 클릭을 받을 수 있는 태그. : 드롭다운 형식의 선택 입력값을 받을 수 있는 태그. : select 태그의 옵션을 만들 수 있는 태그. : select 태그의 옵션 중 그룹을 만들 수 있는 태그. : input 태그 혹은 다른 입력값을 받는 태그 앞에 쓰여 라벨을 만들 수 있는 태그. 예제 연습..