TIL

HTML(Hyper Text Markup Language)과 CSS(Cascading Style Sheets)는 웹 페이지를 만들기 위해 필요한 언어이다.비유를 들자면 HTML은 뼈대, CSS는 옷이라고 할 수 있다.즉, HTML로는 페이지의 레이아웃을 제작하고 CSS

https://ossam5.tistory.com/111시멘틱 태그란 의미에 맞게 태그를 작성하는 것이다.이 태그를 사용하면 브라우저와 개발자가 사용자가 작성한 코드의 의미를 알 수 있다.과거에는 <div>를 사용하여 레이아웃 구조를 설계하였다.하지만 너무

Position '위치'라는 뜻이며, 태그들의 위치를 결정한다. 속성의 값은 static(기본값), relative, absolute, fixed가 존재한다. static position의 기본값이다. 굳이 설정하지 않아도 자동으로 적용되며, 위에서 아래로, 왼쪽에서

float는 '흐르다'라는 뜻을 가지고 있으며, 요소를 부유하게 하여 정렬하거나 배치할 때 주로 사용하는 속성이다.레이아웃의 일반적인 흐름은 위와 같이 위에서 아래 방향으로 차례대로 나열된다. 이 상태에서 float 속성을 적용하면 어떻게 될까?float의 기본값이다.

난 이제까지 크기나 길이를 지정할 때, px(픽셀)을 많이 사용해왔다. 하지만 px는 고정된 단위이기 때문에 반응형 웹 페이지를 구현할 때는 권장하지 않는 방법이다. 그렇다면 요소의 길이, 폰트 크기 등을 화면에 따라 유동적이게 변하게 해주는 단위에는 어떤 것들이 있

Transition 속성을 서서히 변화시켜 부드러운 모션을 적용해주는 속성이다. 속성값 transition-property : transition을 적용시킬 속성값을 정한다. transition-duration : transition 지속 시간을 정한다. transi

animation animation 효과도 마찬가지로 HTML 요소들을 부드럽게 변화시키는 기능을 한다. animation은 transition을 사용할 때보다 더 유연한 기능을 보여준다. transition 효과는 요소 속성값이 다른 값으로 변화할 때 주로 사용하며

프로젝트를 진행하면서 float를 이용하여 레이아웃 배치를 해보았다.어느정도 이해가 될 법하니 이제는 CSS 레이아웃의 왕중의 왕 grid를 사용해보고 싶었다.Grid는 2차원 레이아웃 시스템으로 두 방향(가로-세로)를 조작할 수 있기 때문에 더 복잡한 레이아웃 표현이

웹 브라우저는 사용자가 참조하고 싶은 웹 페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시한다.웹 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 요청하고 받는다.HTML과 CSS파일은 파서(Parser)에 의해 파싱되어 DOM, CSSO

난 지금 나만의 웹 페이지를 만들고 있다. 노트북의 브라우저에 맞춰 구현을 하고 있는데 이런 세상에! 브라우저의 크기를 줄여서 보니 레이아웃이 망가져버렸다. 마음도 아프고 머리도 아프고... 이럴 때 해결할 수 있는 방법이 바로 미디어쿼리이다.all : 모든 장치pri

HTML5에서 새로 확장된 속성이다.표준 HTML 요소에 추가적인 정보를 저장할 수 있는 유용한 속성이다.data-(사용자 정의)HTML요소.dataset.정의한이름정의한이름에서 data-가 삭제되고 카멜표기법으로 변환된다.data-camel-string -> data

VCS는 버전을 관리하는 시스템이다. 보통 코딩을 하고 코드 파일을 관리할 때 많이 사용한다고 생각하겠지만 이 시스템은 꼭 코드를 관리할때만 사용하는 것은 아니다. 코드 뿐만이 아니라 작업을 할 때 완성되는 모든 문서들을 관리할 수 있다.버전 관리 시스템이 제대로 존재

Git을 사용하려면 먼저 여기에서 git을 설치해야한다.난 애플 M1칩을 탑재하고 있는 맥북 프로를 사용하고 있기 때문에 git 페이지에 있는 가이드라인에 따라 터미널에서 설치를 진행하였다.터미널을 열고 아래의 명령문을 입력하여 설치한다.터미널에서 아래에 나온 명령문을

display 속성은 웹 페이지 안에서 요소들이 어떻게 배치되는지를 결정한다. 여러 개의 속성값이 있지만 대표적으로 많이 사용되는 것은 inline, inline-block, block이다. 지금부터 이 세가지를 알아보도록 하자! inline `, , ` 등이 인라인

컴퓨터에 저장된 정보나 데이터의 집합을 말함사진, 동

🌳 Intro Git과 GitHub를 많이 들어보고 사용도 해봤지만 정작 이 둘의 차이를 명확히 알지 못했다는 것을 알게 되었다. 그래서 오늘은 Git과 GitHub는 무엇이 다른지 알아보고자 한다! Git Git은 문서의 버전을 관리하는 Version Cont

🏅 Today's Goal > 1. Stateless가 무엇인지 알아보자. Request, Response의 구조에 대해서 알아보자. HTTP request Method의 종류와 Method들의 차이점에 대해서 알아보자. 대표적인 Status code의 종류를 알아

웹의 발전으로 웹 애플리케이션도 규모가 커지고 복잡해짐에 따라 더 쉽고 효율적으로 개발하여 생산성을 향상시키기 위한 Web Framework(Library)가 등장하게 됨.가장 많이 쓰이는 3가지로는 Anglar, Vue, React가 존재함이 중에 React는 201

프론트엔드에서 라우팅이란? 다른 경로에 따라서 특정 View(화면)을 보여주는 것이다. React 자체에는 이러한 기능이 내장되어 있지 않다. React-Router : 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리 > 여기에서 '경로'는 URL을 말함 S

CSS를 공부하는 사람이라면 누구나 한 번쯤은 들어봤을 그 이름! 바로 SASS이다. SASS는 무엇이고 어떻게 이용하는지 한 번 배워보자!

🏅 Today's Goal props의 개념을 한 문장으로 설명하기 props의 개념으로 부모 요소의 state를 자식 요소에서 어떻게 반영시킬 수 있을까? props의 개념으로 자식에서 일어난 이벤트로 부모의 state 값을 어떻게 바꿀 수 있을까? props p

🏅 Today's Goals state의 개념에 대해 한 문장으로 설명할 수 있다. state를 이용해서 UI를 구성할 수 있다. 이벤트를 통해 state를 변경할 수 있다. State(상태) 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 화면에 보여줄 컴포넌트의

유저가 이메일과 패스워드를 입력한다.email input, password input의 onChange 함수가 실행된다. input의 value를 setState를 통해 업데이트한다.로그인 버튼을 누르면 onClick 함수를 실행한다.onClick 함수 안에 있는 fe

React에서 CSS 속성은 camelCase로 작성한다.ex) backgroundColor

프로젝트를 진행하면서 비구조화 할당 문법에 대해서 접하게 되었는데 잘 이해가 되지 않아 글로 정리해보면서 다시 복습해보고자 한다.

Spread와 rest 문법은 ES6에서 도입된 문법들이다.'펼치다', '퍼뜨리다'이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다.spread 문법의 핵심은 기존의 것을 건드리지 않고 새로운 객체를 만들 수 있다는 것이다.객체, 배열, 함수의 파라미터에서 사용 가능