NOW OR NEVER

CSS CSS 꽃 : Flex box 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다. 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다. 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다. container level : 박스에 적용되는 속성들, container를 꾸며주는 속성들 display flex flex-direction flex-wrap flex-flow : flex-direct..

CSS(Cascading Style Sheet) 의미, 정의 cascading : 정의된 세부적인 정의가 있다면 그것을 쓰고 정의된 게 없다면 다음 기본적으로 정의된 것으로 넘어가는 것을 의미 웹사이트 스타일링 : author style(css) > user style(사용자가 지정한 스타일) > Browser 상에서 기본적으로 정의된 스타일 순으로 적용 !important 쓸 경우 위에서 말한 적용 순서를 무시하고 제일 먼저 적용됨, 나쁜 architecture가 될 수 있으므로 쓰지 않는 것이 좋다 선택자 selectors html의 어떤 태그들을 고를 것인지 규정하는 문법 구체적으로 태그 가까이 설정할 수록 우선순위가 높아짐 종류 * = universal tag이름 = 해당하는 태그만 골라냄 #id..

태그 의미가 있는 symantic 태그 사용하기 element(node): contents Box item들을 sectioning 쉽게 도와주는 태그들 안에 contents가 없으면 사용자에게 보여지지 않음 ex) header, footer, aside, main, section, article, nav, div, span, form div 태그가 아닌 section 태그(header,nav, asiede, main, footer 등)로 구역을 나누는 것이 좋다 article 태그 : 여러가지 item들을 그룹화해서 재사용 가능한 아이들이 모아져 있는 것을 말함, 반복되는 아이들을 묶어준 것 div 태그 : 묶어서 스타일링 할 경우, 혹은 그냥 묶고 싶을 때 아무때나 잘 쓰임 h1태그는 contents를..

html 웹을 이루는 가장 기본적인 블록(파일) Html 없이는 웹사이트 못 만듦 Hyper text markup Language Markup 언어 : 어느정도 태그를 이용해서 구조적으로 보여지는 것 Docktype>html>head>body head : ui 적인 요소가 없음, css 불러오는 역할도 함, meta data만 존재, 상세 설명 body : user에게 보여지는 파일들로 이루어져 있다. heading h1~ w3c 웹의 표준화를 추진하는 단체 여기서 정한 표준에 맞게 브라우저를 구현해야 한다. 브라우저는 유효한 태그를 쓰지 않아 어느정도의 에러가 발생하면 똑똑히 회복해서 유저가 html을 보는데 지장이 없도록 할 수 있다. mdn 지원 가능한 태그들 확인은 mdn에서 확인 할 수 있다. ..

프레임 워크를 위한 기본언어 html,css,js를 잘 배워야지 프레임워크를 바꿔도 금방 이해하고 적용할 수 있음 html,css,js -> typescript(type 때문에 유저 사용시 충돌 일어나는 것 방지, 불린 타입은 불린에만 할당되게 하는 것) html : 구조, css : 디자인 js : 다양한 동작 덧붙여서 구현(basics of js = banilla js) 기본 언어 외 부가적인 것 백엔드 커뮤니케이션을 위해 필요 : fetch api bootstrap은 react 나오고 나서 잘 사용되지 않음 BEM 관련 architect 훑어보기 module bundler - 코드 배포시 간편하게 압축하고 minify해서 최대한 사이즈 줄게 해줌 react-mobx combination 추천 로드맵..