# 드디어 막이 올랐다
나는 대체 얼마나 코딩을 쉬었던 걸까
작년 10월 쯤 부터 놓았던 것 같으니
반년도 더 지난건가? 엄청 오래됐네
그니까 헤더도 printf 포맷도 까먹어서 구글 검색해서 출력하고 있쥬,,
아무리 생각해도 이건 아니다
싶어 어떻게든 컴퓨터 앞으로 다시 돌아갈 방법을 찾기로 했다
운이 좋게 모집중인 국비지원 프로그램을 찾게 된 것!
동생은 아무래도 오프라인 수업이 더 나을 것 이라고 말했지만
오프라인은 좀 기다려야 하기도 했고
그 시간동안 나는 또 모래사장위에 흩뿌려지는 모래처럼 하염없이 퍼질 것 같아
온라인 강의를 듣기로 결정!
html, css, Java Script 그리고 React를 간단히라도 다 훑고 싶었는데
패스트캠퍼스 라는 교육기관(?)에 이런 커리큘럼이 다행이 있었다
보니 이번에 새로 열린 신규 강의 인듯ㅋㅋㅋ
사실 개발자나 개발자 준비하는 사람들 사이에서 국비 지원은 쓔뤡2다 나랏돈만 받고 퀄은 핵후지다 가 국룰이던데(천 포함,,)
뭐 다 내가 어떻게 마음먹고 어떻게 하느냐에 따라 다른게 아닌가,,,
생각하며 시작해보련다
ㅋㅋㅋㅋ
저는 솔직하게 작성할거니까
만약에 이거 보시는 분들은 광고 또는 거짓말이라고 걱정 안하셔도 됩니다!!!
#react강의1주차
vscode 설치하고 html 구조 간단히 배우고 그정도?
vscode 단축키 몇 개 더 알게 돼서 좋다
ㅋㅋㅋㅋ근데 금방 까먹을듯ㅠ 자주 자주 써봐야지
html css 쪽은 전혀 개념이 하나도 없는 상태였는데
구조적으로 개념 잡아서 설명해주시니까 좋네
그리고 약어 설명해주셔서 외우기 넘!나! 이해하기 편함!
href 이런거 냅다 쓰라고 하면 무슨뜻인줄 알고 어떻게 외우냐구요,,,
배속 설정을 못하는게 좀 답답하긴 한데 배속 설정하면 악용할 케이스가 다분히 많을 것 같아 천천히 다 하나하나 이해하면서 들어봐야겠당ㅎㅎ
인라인 요소(eg.span) 안에는 자식 태그가 들어갈 수 없지만
블록 요소(eg.div) 는 된다네?
블록 - 가/세 지정 및 여백 조정 가능
div [블록요소]
특별한 의미가 없는 구분을 위한 요소. 영역을 잡기 위해 쓰임. 문단의 개념인가보다
h - 블록 요소. heading // 제목. 숫자가 작을수록 중요도가 낮아짐.h1이 대주제
p - 블록 요소. paragraph //문장
img - 인라인 요소. 이미지 삽입용 // 필수속성: src && alt-- alternative 실패했을때 대신 이미지의 이름이 출력 될 수 있게 해줌
ul - 블럭 순서가 없는 목록의 집합 (unordered list) // ul이 있으면 li태그는 무조건 두개 이상 필
li - 블럭 목록 내 각 항목 (listed item) //
a - 인라인 요소 (anchor) // 다른페이지로 이동할 수 있게 하이퍼링크 제공. target=_blank 는 새 창에서 열어줌!
span - 인라인 요소 //의미 없.
br - 인라인 요소 (break) // 개행
input - 인라인 & 블럭 요소 //사용자가 데이터를 입력하는 요소
/input type="text" value = "미리입력된값"/
/input type="text" placeholder = "사용자가 입력해야 할 값"/
input type="text" disabled 입력요소 비활성화
type 의 사용
1) checkbox :: 사용자에게 체크여부를 입력 받음. tick 박스!
Apple
Banana
lable> input type="checkbox" checked/ Apple </label
미리 체크받아놓음!
Apple
2)radio :: name이라는 속성 안에서 1개만 선택 가능
Apple
Banana
table 테이블 요소 // 행과 열의 집합
tr (Table Row) :: tr의 갯수에 따라 행이 결정됨
td(Table Data) :: 열/ cell을 지정하는
table> tr> td> A </td </tr </table 이런 구조로
CSS 문법
기본 선택자 (ID Selector)
1) * :: 전체 선택자 - css 연결된 모든 요소를 선택함
2) 태그 선택자 (eg. div{color:red;} - 태그의 이름으로 요소를 선택
3) . :: 클래스 선택자 (eg. .fruits{})- html class 속성의 값으로 요소를 선택//class 는 항목 당 중복이 가능함
4) # :: 아이디 선택자(eg. #fruits{})- id 속성의 값으로 선택 //id는 중복X
복합 선택자 (Basic Combinator)
1)복합 선택자(ABCXYZ) - 선택자 abc 와 xyz를 동시에 만족하는 요소
(eg. span.orange{color : red; :: SPAN&ORANGE}
2)자식 선택자 (ABC > XYZ) -
선택자 abc의 자식요소 xyz 선택
(eg. ul > .orange{color:red;}
클래스가 orange를 찾아서 부모가 ul인 요소를 선택
3)하위 선택자 (ABC XYZ)- 선택자 abc의 하위요소 xyz 선택
(eg. div .orange {color:red;}
4)인접 형제 선택자 (ABC + XYZ) - 선택자 abc의 다음형제요소 xyz하나를 선택
(eg. .orange+li{color:red;} >> 망고 픽
5)일반 형제 선택자(ABC ~ XYZ) - abc 다음형제요소 xyz 모두 선택
가상 클래스 선택자
(ABC:hover)
abc 요소에 마우스를 올려놓고 있는 동안 동작
(ABC:active)
abc 요소에 마우스를 클릭하고 있는 동안 동작
(ABC:focus)
abc 요소가 **포커스 되면** 동작만약 포커스가 비활성화 되어있는 요소라면 활성화시키기 위해 tabindex = "-1" 을 주어 활성화 시킬 수 있음
(eg. div class = "box" tabindex ="-1" /div)
(ABC:first-child) abc가 형제 요소 중 첫째만 작동
(ABC:last-child) abc가 형제 요소 중 막내만 작동
(ABC:Nth-child) abc가 형제 요소 중 n번째만 작동
(ABC:not(XYZ)) 선택자 xyz가 아닌 abc 요소 선택
JavaScript 파트 갈 때 확실히 빡셀 거라 주차 신경 안쓰고 앞쪽은 미리미리 들어놔야지!!color
커리큘럼 관리하는 전속 매니저 같은 분들이 계셔서 개강?하자마자 바로 슬랙으로 팀짜서 채널에 넣어주신다ㅋㅋ신기하네 싸이때는 이런거 없었는데
오랜만에 슬랙 반가워!!
근데 왜 탭 4 아니고 2 들여쓰기 선호하시는거지?
싸이때 버릇이 제대로 들었나보다
뱌뱌 싸이써울C! 헬로우 React!
