React 프론트엔드 공부

퇴사하구..인강신청해서 듣는중이다.. 입문반으로 신청했어서 그른가..앞에 기본적인 부분은 웬만하면 다 알던거라1.5배속으로 다 들었다.. 듣고싶으면서도 빨리빨리 넘어가고 싶어서 빠르게 했보았는데 1.5까지 해도 무리가 없었다. 

빠른만큼 엄청 딱 집중해서 들었다 필기도 빠르게 모르는거나 필요한거만 슈슈슉 적고.. 최근에 회의록 말고는 이렇게 많이 써본적이 없어서 그런가 오랜만에 뭔가 많이 끄적이니 손이..흠 학교 수업 듣고 복습할때나 열심히 썼던거 같은데....아무튼 열심히 적었다! 근데 작은 노트북에 강의 틀어놓고 반쪽은 에디터 열어놓고.. 하니까 답답해졌다.. 듀얼 모니터 맛을 몰랏었을 땐 불평도 없이 썼는데ㅠㅋㅋㅋㅋㅋ 강의 듣다가 너무 답답해서 급 모니터 하나 샀따.. 얼른와라..!!>ㅂ< 구매 해놓고 다시 인강 열심히 재생~~~

근데..블럭요소랑 인라인요소 정확한 차이 이번에 알았다..대박...아무튼 정리 시작!~

​

block요소,inline요소

●블럭요소

- div,h1,p,nav,header,article,footer,section.....

- margin,padding 위,아래,좌,우 사용ok

- 레아아웃 잡는 용도

- 사용가능한 최대 너비를 사용

- 크기지정 가능

- width:100%;height:0;으로 시작(필요한 만큼의 높이를 가져감)

- 수직으로 쌓임

​

●인라인요소

- span,img,p

- margin,padding 위,아래 사용 X

- 필요한 만큼의 너비를 사용

- 크기지정안됨(가로,세로 사이즈 지정해도 반응 X)

- text잡는 용도

- width:0;height:0;으로 시작

- 수평으로 쌓임

<span>A</span><span>B<span> 이렇게 작성시 AB C 로 출력(띄어쓰기가 들어감)

<span>C<span>

​

content 구분 & 문자콘텐츠

●ul,li

정렬된 목록 ol 순서가 필요한.. 숫자로 표시됨

정렬 안 된 목록 ul 순서가 필요없는.. 점으로 표시됨

li단독으로 사용 불가. 부모로 ol,ul이 있어야함.

ul,ol태그 안에 ul,ol태그 사용 -> 다음 ul,ol은 들여쓰기 되어서 나타남.

<ul>

<li>메뉴</li> //메뉴들을 리스트화

<ul>

​

●header

메뉴,로고,로그인,회원가입,검색차 등이 일반적으로 헤더에 있음

헤더안에 헤더,푸터 태그 넣을 수 없음.

​

●h1~h6

<h1>전체</h1>

<h2>상세</h2>

<h2>상세2</h2>

이러한 형태는 ok

​

<h1>전체</h1>

<h3>상세2</h3>

이런식으로 숫자를 건너띄우는 건 X(권장사항)

​

●article

독립적으로 구분되거나 재사용 가능한 영역을 사용

​

●section

문서의 일반적인 영역을 설정(제목을 포함해서 의미가 있음 but div는 의미가 없음)

​

●aside

문서의 별도 콘텐츠를 설정

(별도 콘텐츠 : 광고, 기타링크 등 보통 우측 사이드 영역)

​

●nav

네비게이션 약자, 다른페이지 경로를 제공하는 영역 설정

home,about,contact,목차,색인 등 설정

ol,ul이 같이 사용되기도 함

​

●address

body,article,footer 등에서 연락처 정보 제공 위해 사용

<a href="mailto:이메일">~~</a>

matilto:실제 윈도우나 맥 같은 환경에서 프로그램이 열리는 등 동작이 일어남.

​

●div

꾸미는 목적으로 사용, 본격적으로 아무것지 나타내지 않는 콘텐츠 영역을 설정

​

●a

인라인 요소로 수평으로 나옴, 링크 연결

​

●dt,dd,dl

용어 dt와 정의 dd 쌍등의 영억dl을 설정

<dl>은<dd>,<dt>만 포함해야함

key / value 형태 표시할 때 사용.

블럭요소.

<dfn>용어 하나 정의시 사용하는 태그

​

●p

블럭요소, 하나의 문단(문장,단락..)을 설정

​

●hr

문단의 분리 => 수평선이 생김.

주제 기준으로 분리, 그냥 시각적으로 쓰는건 X.

​

●pre

서식이 미리 지정된 text를 설정

text의 공백,줄바꿈을 유지해서 표시가능.

기본적으로 monospace 글꼴 계열로 표시됨

(monospace : 모든글자의 너비,띄어쓰기 너비가 x로 같다.)

​

●blockquote

일반적인 인용문 설정,블럭요소

<blockquote cite="인용한주소">~~~</blockquote>이런식으로 사용.