전체 글

어느덧 프론트 VOD가 끝나가고 있다.. 오늘부터 리액트 학습을 시작했다! React vs Javascript 리액트는 HTML과 자바스크립트를 혼합해서 사용할 수 있는 JSX를 사용하며, 명령형인 자바스크립트와는 달리, 선언형으로써 UI state만 설정해주면, 과정은 알아서 해준다! JSX JSX(JavaScript XML)는 리액트(React)에서 사용되는 자바스크립트의 확장 문법이다. HTML과 비슷하게 생겼지만, 실제로는 자바스크립트로 변환되어 실행됩니다. JSX는 브라우저가 바로 읽을 수 없는데, 브라우저에 도달하기 전에 개발서버에서 사용가능한 코드로 변환된다. JSX는 트리 모양의 코드 구조로 리액트에게 각 컴포넌트들이 어떻게 연관되어 있고, UI는 어떻게 보여져야 하는지 알려준다. 그리고,..

Javascript 학습 마지막날! CSS framework도 마지막에 살짝 다루었다. Javascript 동등 연산자 (== vs ===) ✓ == (Equality) : 값만 비교 ❗️암묵적으로,형번환(type casting)이 일어나기 때문에, 자칫 위험할 수 있다! '1'==1 //true 1==true //true 0==false ✓ === Strict Equality :타입, 값 모두 비교 '1'==1 //false 1==true //false 형변환으로 완벽하게 하는것이 안정적이다! Truthy / Falsy 조건문이나 논리 연산에서 사용되며, 특정 값이 참과 거짓으로 간주되는 조건을 나타낸다. ✓ Truthy : true, "0", "false", infinity, -infinity, {}..

오늘 드디어 길고 길었던 CSS 학습을 마치고, javascript에 대해 학습하였습니다! 🙂 어제 배운 Form 학습을 기반으로, 다음과 같은 페이지를 만들어보는 챌린지를 진행하였습니다. 🤔 오늘의 챌린지를 진행하면서 CSS에서 어려움을 겪었던 부분이다. radio , checkbox의 흐트러진 정렬을 위해, flex box로 만들고, 수직정렬을 맞추면 되겠다고 생각했다. 또 다른 문제는, input요소가 label 앞이 아닌 뒤로 이동해버리는 문제였다.. 💡 .inline-control { display: flex; } .inline-control input { width: auto; } .inline-control label { margin: 0; margin-left: 0.5rem; } 앞서, i..

오늘은 웹사이트에서 자주 사용하는 form HTML에 대해서 학습하였다. 대표적으로 많이 사용하는 태그들과 속성들을 정리해보고자 한다. inherit ✓ html HTML 문서의 최상위 요소 ✓ :root 문서의 최상위 요소를 나타내는 의사 클래스입니다 ✓ * 모든 요소를 선택하는 유니버설 선택자입니다. html,root선택자는 하위로 상속되어 적용되고, * 선택자는 바로 모든 요소에 적용된다! transition 요소의 특정 속성이 변할 때 해당 변화를 부드럽게 처리하는 데 사용한다. transform 요소의 변환(이동, 회전, 크기 조절 등)을 지정하는 데 사용한다. 2D, 3D 변환 모두 다룰 수 있다! ⭐️ 전환을 구현하는 코드는 transtition을 트리거하는 이벤트가 아니라, 요소의 초기 상..

오늘은 반응형 웹사이트 만들기에 대해 배웠다. 이 또한 중요한 개념들이 많으니 한번 정리해보자 데스크탑 뿐만 아니라 태블릿, 스마트폰 등 다양한 기기에서 접속할 수 있기 때문에 기기의 화면에 맞춰 유동적으로 웹 화면을 구성해야한다. 이렇게 만드는것이 반응형 웹사이트 만들기이다! Unit 저번 시간까지만해도 고정적인 px단위를 사용하였다. 반응형 웹페이지를 만들땐, 고정값인 px은 별로 적합한 방법은 아니다. 왜냐하면, 고정적인 px은 화면의 크기가 변하거나, 브라우저 설정에서 아무리 글꼴 설정을 크게 작게 변경하여도 변경되지 않는다. px pt % em rem vh, vw CSS의 Unit의 종류는 다음과 같다. % (퍼센트) Parent element 기준 상대 크기 유동값 Grid 잡기 & 미디어 개..

오늘은 지금까지 배운 CSS 레이아웃, positioning을 사용하여, 다음과 같은 두 페이지를 완성하였습니다. Header의 레이아웃이 조금 어렵다고 느껴서 다시 한번 정리해보고자 합니다. header { display: flex; justify-content: space-between; align-items: center; padding: 15px 60px; position: absolute; box-sizing: border-box; width: 100%; } 먼저, 확실히 짚고 넘어가야할 것이 있다. width:100%라는것은 부모요소의 크기(border,margin,padding)을 포함한 값이 아니라, content의 크기만을 상속받는다. 이걸 혼동하여 알고 있었다...🙀 위 사진과 같이 h..

오늘은 Git에 대한 나머지 학습들과, CSS의 꽃이라고 생각하는 flexbox에 대해 학습하였습니다. branch: 브랜치란 모든 커밋,스냅샷, 작업하고 있는 다양한 브랜치를 담고 있는 일종의 폴더로써, 브랜치를 통해 개발 작업을 분리하고 관리할 수 있도록 도와줍니다. $git branch : 현재 브랜치 $git checkout 브랜치명: 브랜치 이동 $git branch -D 브랜치명: 브랜치 삭제 github에서 repository를 생성하면, 다음과 같은 화면이 나타난다. add: 관리 대상 등록 & 저장소 연결 수정사항, 파일 및 폴더를 스테이징 영역으로 옮기도록 해준다. git이 적용하고자 하는 파일, 수정사항들을 적용하고자하는 다음 커밋에 인지하도록 돕는다. $git add . $git r..

어느덧 1주차의 마지막 3일차 TIL입니다. 오늘은 여태 배운 HTML과 CSS를 적용하여 웹사이트를 만들고, 호스팅,배포와 git에 대한 학습을 하였습니다. Text-align 어제 배운 text-align의 적용을 해보았습니다. 자주 사용되는 css인 만큼 꼭 기억해야하는 개념입니다. text-align은 텍스트처럼 취급되는 인라인 콘텐츠나 텍스트를 정렬합니다. 내부의 텍스트= 인라인 요소 ex. header에 text-align을 사용하면 하위 요소들이 인라인 콘텐츠가 되어 중앙에 배치되는것 Margin 겹침 CSS 작업을 하다보면, box model을 내가 생각했던대로 제어가 안될때가 있다. margin 겹침은 그 중 하나의 경우이다. 요소 안의 요소에 브라우저가 기본적으로 margin (34px..