기획자에서 개발자로

비전공자 코딩 교육 선택 과정

코딩을 교육 받는 방법에 대해 공부한 결과 교육을 받는 방법과 독학하는 쪽의 두 가지의 방법으로 나뉘었다. 부트캠프, 유료교육, 무료국비교육, 스터디, 독학 정도로 나뉘는 것 같다. 하나씩 개념을 정리하자면 1. 부트캠프는 항해99, 코드스테이츠 처럼 등 다양한 사업체들에서 진행하는데, 몇백만원(?)에 상당하는 금액을 지불하고 몇달동안 들어온 팀원들끼리 정말 강하고 타이트하게 진행하여 순식간에 레벨을 올리는? 전직을 하는 가장 빠른 방법으로 보였다. 각 업체마다 다르겠지만 업체들에서도 서로가 시너지를 내고 짐이 되면 안되기때문에 어느 정도 코딩에 대한 실력이나 기술에 대한 이해는 되어있어야되는 것 같았다. 사기업에서 잘 알려주고 취업도 잘하는 것으로 보이며, 코딩에 대한 일반 지식과 비용이란 장벽을 넘기..

개발자로 전향한 이유

경영 학도로서 효율과 효과를 중시하는 나에게 IT는 항상 관심의 대상이었다. 직전에 몸을 담았던 디자인 에이전시에서 맡았던 브랜딩, 홍보물 등 기획 및 프로젝트 관리 일은 야근을 불사하며 프로젝트들을 해낼 때마다 결과물로서 성취감은 있었지만, 추후 많은 부분들이 새로이 작업되고, 단발성으로 버려지는 것이 많아서 많이 아쉬웠다. 그런데 다양하게 작업하던 프로젝트들 중에서 웹 관련한 자료들은 한번 만들어두고 일정 수준의 유지 보수를 하면 잘 유지가 되어 많은 부분에서 효율적이였고, 가격 대비 효율, 효과도 상당했다. 그렇게 관심을 행동으로 변경하여 입문 강의들을 보며, 코드 한 줄, 한 줄이 실제 컴퓨터에서 구현되고 출력되는 것을 보며 재미를 느끼다, 이런 성취감을 매일 느끼면 어떨까 하는 생각으로 학원에 ..

CSS 기본 선택자

기본 선택자 종류 * (전체 선택자(Universal Selector)) : 모든 요소를 선택 * { color: green; } 태그 선택자(Type Selector) : 태그 이름이 요소 00 선택 00 { color: green; } 클래스 선택자(Class Selector) : HTML Class 속성의 값이 xx인 요소 선택 .xx { color: green; } 아이디 선택자(ID Selector) : HTML id 속성의 값이 xx인 요소 선택. #xx { color: green; }

CSS 선언 방식

1. 내장 방식 : 의 내용(Contents)로 스타일을 작성하는 방식. 2. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) 유지 보수 측면에서 안좋아 비추천, 스타일 바꿀 때 CSS가서 바꾸는게 좋음. 3. 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식. 병렬 방식으로 볼 수 있음. main.css 파일의 내용 div { color: green; margin: 50px; } 4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식. 직렬 방식으로 볼 수 있고, 연결이 지연됨. main.css 파일의 내용 @import url("./box.css"); div { color: green;..

CSS 정의 및 기본 문법

CSS(Cascading Style Sheets, 종속형 스타일 시트) 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어로, 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 표현함. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있음. 선택자{ 속성 : 값; } ※ 선택자 : 스타일(CSS)를 적용할 대상(Selector) ※ 속성 : 스타일(CSS)의 종류(Property) div { color : red; } color은 글자색의 속성이고, red는 색상의 값임. div 의 색상을 레드로 하라는 의미. div { margin: 20px; } margin은 요소 외부의 여백이며, 20px는 값임. div 요소 외부 여백을 20픽셀로 하라는 의미. 인지하기 좋게 보통 아래와 같이 배치. ..

HTML 전역 속성

HTML 전체 영역에서 사용할 수 있는 태그 body 전체 영역에서 사용 가능함. 1. 요소의 정보나 설명을 지정 2. 요소에 적용할 스타일(CSS)을 지정 3. 요소를 지칭하는 중복 가능한 이름 4. 요소를 지칭하는 고유한 이름 5. 요소에 데이터를 지정

HTML의 주석처리

주석 : 수정사항이나 설명 등을 작성하는 것으로 브라우저는 이 태그를 해석하지 않기 때문에, 코드 위에 있어도 화면에 내용이 표시되지 않음. 식으로 하며, 영역 선택 후 윈도우 기준 Ctrl+/ 맥 기준 Cmd+/ 로 가능하다. ※ CSS의 주석처리는 /* */ 지만 단축키는 대부분 같으니 단축키만 알아도 된다.

HTML 자주 사용하는 태그2

1. 인라인(글자) 요소 특별한 의미가 없는 구분을 위한 요소 2. (Break, 인라인(글자) 요소) 줄바꿈 요소. 3. 인라인(글자) 요소, 블록(상자) 요소 사용자가 데이터를 입력하는 요소. type : 입력받을 데이터의 타입. 여기서 데이터 text 타입에 value="안녕하세요" /> 를 입력시 미리 칸에 입력되어있음. placeholder="이름를 입력하세요" /> 를 입력시 미리 칸에 표시되나 사용자가 활성화시키면 사라짐. 데이터 힌트를 줄 때 사용 ex) 생년월일을 입력하세요! , 번호를 입력하세요!(-제외) disabled /> 를 입력시 입력 요소가 비활성화됨. 여기서 데이터 checkbox 타입에 여기서 checkbox" /> 포도 여기서 checkbox" /> 딸기 하게되면 체크 박..

HTML 자주 사용하는 태그 요소

1. (Division, 블록(상자) 요소) 특별한 의미가 없이, 그저 구분을 위한 요소라 자주 사용 2. (Heading, 블록(상자) 요소) 제목을 의미하는 요소. 1 ~ 6번까지 있다. 3. (Paragraph, 블록(상자) 요소) 문장을 의미하는 요소. 1번 div로 대체 가능하나, p태그가 갖는 특성으로 좀 더 직관성이 생김. 4. (image, 인라인(글자) 요소) 이미지를 삽입하는 요소. 필수 속성인 src과 alt는 각각 src : 삽입할 이미지의 경로(source) alt : 삽입할 이미지의 이름(alternate) 5. (Unordered List, 블록(상자) 요소) 순서가 필요없는 목록의 집합. ※ 순서필요시 태그 활용, 사용 빈도 적음 ul 태그의 자식으로는 li 태그가 한개이상나..

HTML 글자와 상자

내용(컨텐츠, 요소)이 화면에 출력되는 특성 2가지 1. 인라인(inline) 요소 : 글자를 만들기 위한 요소들 2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들 1번의 인라인(inlone)의 대표적인 태그는 이 있음. 본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임. 인라인 요소는 보통 수평으로 쌓인다. 줄어들려는 성질을 가짐. hi bob 출력 화면은 hi bob 으로 띄어쓰기가 된 상태로 나옴. 단을 내리는 것 자체가 띄어쓰기로 확인되기 때문이며, 단을 안내리면 띄어쓰기가 안된다. - 불가 - 가능 이유는 span은 인라인(글자) 요소인데, div는 상자(블록) 요소이기 때문이다. 2번 블록(Block)의 대표적인 태그는 이 있음. 본질적으로 아무 것도 나타..

HTML 빈태그

vs 는 편리하고, HTML 1/2/3/4/5 에서 사용 / 열리는 태그로 착각할 수 있다. 는 안전하고, XHTML/HTML5 에서 사용 빈태그의 예시로 태그는 줄바꿈을 주는 기능을 하는 태그로, 빈태그임. 이미지를 불러오는 태그로, 닫는 태그가 없음. 대신 src를 써야한다.

HTML 부모와 자식 요소

내용 위와 같은 내용에서 태그1에게 태그2는 자식이고, 태그 2, 3은 결국 태그 1의 후손이다. 태그1에 속한다고 볼 수 있음. 종속되는 관계이다.