roofTopCaat의 코딩노트

- 들어가기 전에 - Lifecycle feature : 인간의 생몰주기와 비슷하게 컴포넌트가 화면에 나타나고 업데이트되고 사라지는 과정을 관리하는 것을 말한다. 대표적으로 `componentDidMount` , `componentsDidUpdate`, `componentWillUnmount` 등의 메소드가 있다 State : 컴포넌트의 데이터, 사용자가 입력한 텍스트나 현재 선택된 탭 등을 말한다 Hook 훅은 React 16.8 버전에서 새로 추가된 기능으로 React의 상태(State)와 Lifecycle feature를 연결해준다 이전까지는 동일한 효과를 내기 위해 클래스 컴포넌트를 사용해야 했다 제일 기초적이고 중요한 UseState 'UseState'는 가장 기본적인 Hook으로 함수 컴포넌트..

React.js 리액트 없이도 웹사이트는 만들 수 있지만, 웹사이트의 UI가 복잡해지면 복잡해질수록 리액트를 사용하면 훨씬 수월하게 만들 수 있다 React 컴포넌트 Java가 class로 시작해 class로 끝나는 것처럼, React는 컴포넌트가 거의 전부라고 할 수 있다 컴포넌트란 HTML / CSS / JavaScript가 합쳐진 하나의 블록이라고 생각하면 편하다 이는 현대 웹개발에서 절대 빼놓을 수 없는 API와 비슷한 개념이기도 하다 React는 재사용성 / 분산성 면에서 유리하다는 점에서 (대부분의 프로그래밍 방식에서 공통된다) 컴포넌트 방식을 채택해 프론트엔드에 도입시켰다 컴포넌트 빌딩 JSX 문법 React는 기존 JS문법에서 탈피한 JSX문법을 사용한다 JSX문법은 javascript와 ..

시맨틱 HTML 이란 시맨틱 HTML은 HTML문서를 작성할 때 다수의 사람이 직관적으로 이해가 가게끔 설정된 명칭의 모임이다 1. / navigation header 태그는 웹 페이지의 탑 섹션, 특히 메인 타이틀 / 로고 / 링크 내비게이션등으로 구성되며 웹 페이지에 처음 방문하는 유저들이 페이지의 목적성을 파악할 수 있는 부분이다 nav 태그는 주로 웹 페이지 메뉴 항목을 탐색하는 곳에 쓰인다 roofTopCaat hello, my name is roofTopCaat # my github repo # my tistory blog # my skill stacks 2. main 태그는 웹 페이지의 주요 내용을 담당한다 About my Blog Welcome to my Tistory Blog! 3. ar..

Media Query 컴퓨터, 스마트폰, 태블릿 등의 다양한 디바이스 환경에 맞춰 변화하는 UI 셋을 만들어 주기 위한 CSS 기술이다 미디어 쿼리는 미디어 유형과 미디어 특성을 기반으로 동작한다 미디어 유형은 장치의 종류가 어떤 것인지를 말하며 미디어 특성은 장치 속성이나 상태를 기반으로 하며 화면 너비 / 장치 방향 / 픽셀 밀도등을 포함한다 미디어 유형 , 쿼리 연산자 , 쿼리 조건은 다양하나 대표적으로 쓰이는 것은 screen이며 생략가능하다 추후 필요에 따라 검색하면 되기에 깊게 들어가지 않는다

CSS 포지셔닝의 종류 Static (정적 포지셔닝) Relative (상대적 포지셔닝) Absolute (절대적 포지셔닝) Fixed (고정적 포지셔닝) 1) Static(정적) 포지셔닝 고정적 위치값을 가지며 left나 top값을 추가할 수는 있지만 기능하지 않는다 2) Relative(상대적) 포지셔닝 고정적 위치값을 지니나 left나 top 등으로 위치값을 상대적으로 변화시킬 수 있다 3) Absolute(절대적) 포지셔닝 가장 가까운 ancestor의 위치와 상대적으로 관련된다 참고할 ancestor가 없다면 좌측 상단에서부터 값이 적용된다 4) Z - index z 인덱스는 가로세로 xy축 다음의 3차원적 포지션이다 일반적으로 -1과 0값으로 위치를 조정한다 5) Fixed(고정적) 포지셔닝 ..

1) Group (복수 지정) h1, h2, ...임의값 { background-color:blueviolet; color:red } 2) Parent > Child (내부 자식이 한 단계 아래일 때만) .Parent div > Child div { color:firebrick; } ABC ㄱ ㄴ ㄷ .box > "done" { } 이나 .box > "list" { } 로 선택가능하다 3) Descendant (손자선택기) (하나의 최상위 항목에서 중위를 생략하고 하위 항목을 선택한다) (이 값에 부모자식 > 를 넣어서 하면 작동되지 않는다) .최상위 div li { color:blue; } 4) Chaining (선택기 연결) (모든 선택기가 참일 때 적용) (사이 띄어쓰기가 없다) element.di..

css cascade position -> Specificity -> type -> importance position 아래쪽에 위치할수록 우선된다 Specificity 범위가 좁아질수록 우선된다 element 4순위 class 3순위 attribute 2순위 id 1순위 Type(유형) 외부에서 내부, 내부에서 인라인으로 갈수록 우선된다 외부 CSS 3순위 내부 CSS 2순위 인라인 CSS 1순위 최고 순위 !Important;(중요도 키워드) !important;의 유무에 따라 우선된다 color: red; 2순위 color: green !important; 1순위

1) Element Selector 하나의 요소를 통으로 고름 2) Class Selector 클래스는 어떤 html의 요소에든 적용가능하다 Red Blue Green paragraph 3) ID Selector 클래스 선택기와 비슷하나, 클래스 선택기는 다중으로 적용가능하지만 ID 선택기는 단일로만 적용가능하다 Red Blue Green 4) Attribute Selector (특성 선택기) true, false를 통해 원하는 요소에 css값을 넣을 수 있다 Drag me Don't Drag me Don't Drag me 이렇게 하면 Drag me가 빨간색이 되고 Drag me Don't Drag me Don't Drag me 이 경우엔 Don't Drag me가 빨간색이 된다 5) Universal ..

● css는 ● js는