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..

프레임 워크를 위한 기본언어 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 추천 로드맵..

인라인 텍스트 태그 1. span 태그 - 대표적인 인라인 요소 - 본질적으로 아무런 의미를 갖고있지 않음 - 막 사용될 수 있음 - 텍스트의 일부분들을 이 태그로 묶어서 css나 js 입력시 굉장히 많이 활용됨 -div 태그와 굉장히 유사하게 사용 가능 *div 태그는 본질적으로 아무런 의미를 갖지 않고 대표적인 블록요소이다. - div 태그와의 비교 : div 태그는 기본적으로 블록요소기 때문에 한 줄에 하나밖에 표시할 수 있어서 다른 텍스트와 줄이 바껴서 표시됨, 하지만 span 태그는 인라인 요소기 때문에 텍스트 중간에 있는 부분을 딱 명확하게 찝어낼 수 있다. 의미가 없이 스타일을 적용하거나 혹은 js에 적용하는 데만 활용하는 것이면 div보다는 span 태그가 적합하다. 2. br 태그 - 빈..

1. 공모전에 나가게 된 계기 데이터 분석과 프론트엔드 둘다 경험해보고 싶었다. 일단 도전해보자 라는 마음으로 개발팀부터 서둘러 꾸리게 되었는데, 대학교 동기이자 뛰어난 개발자인 내 절친 한엘레나와 함께 하게 되었다. 무엇을 할지 서로 토의해보고 데이터 관련 공모전도 찾아보다가 발견한 것이 전주시 빅데이터 분석 공모전이였다. 좋은 기회라 생각하여 함께 참가하기로 하였다. 2. 준비한 기간 2021년 4월 2일 ~ 2021년 5월 14일 3. 공모전 주제 주제 : 전주시 유기동물 문제 해결 - 이유 : 같이 참가한 친구와 나는 강아지 두마리 이상을 각각 키우고 있어 주제를 정하던 중 자연스레 유기동물 문제가 떠올랐다. 전주시에도 이러한 문제가 잘 해결되고 있는지 확인한 결과 전주시에는따로 동물보호소가 없었..

인라인 텍스트 : 글씨를 다루는 데 특화되어 있는 태그들 다수 포함, h1-h6 태그와 p태그는 예외 1. a 태그 anchor : 기본적으로 현재문서에서 외부의 문서로 내보낼 때 사용하는 태그(링크를 건다) - display : inline; 인라인 요소 - 이미지 파일도 가능 - 버튼형식으로 많이 쓰임 하지만 인라인 요소라 가로 세로 값 지정할 수 없어서 display:block 으로 바꿔서 사용하는 경우가 많다. - 현재문서를 제외한 다른 url로 연결할 수 있는 하이퍼링크 설정 - href, rel, target 속성 중요->가장 많이 사용 - download 속성 : 해당하는 링크가 페이지를 넘어가는 용도로 사용하는 것이 아니라 파일을 다운로드 받는 용도로 사용한다는 것을 명시해주는 것. 실질적..

하루 하루 공부하는 것을 기록하는 것이 더 내가 하루 공부량을 더 파악할 수 있고, 다시 복습할 때도 체계화되어 있을 것 같아 주별로 한번에 몰아 정리하지 않고 하루치 공부한 강의 요약을 블로그에 올리기로 했다. 콘텐츠 구분 태그 정리 1. aside 태그: 문서의 별도 콘텐츠(배너 광고, 기타링크 등 오른쪽이나 바닥에 들어가는 것) 설정 - display:block 요소 - 광고형태로 많이 들어감 2. HTML 화면을 각각의 태그가 가지는 의미로서 구성을 하면 브라우저 측면에서 의미를 부여해서 볼 수 있으므로 그래서 각각의 태그를 적재적소로 적당한 의미로써 사용해야 한다. 3. nav 태그 : 다른 페이지 링크를 제공 영역(header 부분에 들어가는 메뉴들, contact: 연락할 수 있는 정보 등)..

시작하게 된 계기 : 야심차게 프론트엔드 개발자가 되고 싶어 패스트 캠퍼스에서 산 프론트엔드 패키지는 초반에만 열심히 듣고 버려졌다. 다시 시작하려고 킨 순간, 강의는 많은데 뭐부터 해야할 지를 모르고 하루 할당량을 딱히 정해놓지 않아 다시 듣기 싫어졌다. 강제성이 필요하다고 느꼈다. 대학생 신분인 나에겐 큰 돈이지만 미래를 위해서 이 돈쯤은 이라 외치며 제로베이스 프론트엔드 99일을 결제했다. 1주차 후기 : 우선 한줄평은 생각보다 체계적으로 되어 있어서 놀랐다. 앞서 패스트캠퍼스에서 방황한 내자신이 있었기에 기대는 한껏 낮춰져있어서 인지는 모르겠지만, 하루 들어야 할 강의 수와 1주마다 내주는 과제는 불을 지피기에 충분했다. 쉬웠던 과제와 달리 퀴즈는 20문제로 살짝 난이도가 있는 편이었다. 하지만 ..