DDOstory

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 코드를 작성하기 전에 styled-components 패키지 설치npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴웹 브라우저의 창이 열리면서 포트에 접속이 됨화..

React 리액트 스타일링🍿 CSS웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것Cascading Style Sheets스타일링을 위한 일종의 언어여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음🍿 CSS 기본 구조Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀..

🖼️  @import 규칙CSS 파일에서 다른 CSS 파일을 추가하는 방법CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리link 태그의 숫자를 줄일 수 있는 방법 @import url(StyleSheetA.css);@import url(StyleSheetB.css);🖼️  @font-face 규칙웹 폰트를 생성할 때 사용하는 규칙 font-family폰트 이름을 지정src폰트 파일 지정 font-weight폰트 두께 지정font-style폰트 스타일 지정🖼️  @media규칙다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙   🖼️  반응형 웹 징치를 구분하고 장치의 크기나 비율 구분 가능width..

⏱️  원시 데이터 타입객체가 아니면서 메서드도 가지지 않는 데이터string, number, bigint, boolean, undefined, null, symbol⏱️  숫자 데이터 타입정수와 부동소수점 숫자를 나타내는 타입typeof (타입오브) 라는 데이터 타입을 알려주는 연산자를 사용const number = 123;console.log(typeof number);bigint (빅인트)라는 데이터 타입은 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어서는 아주 작은 숫자나 큰 숫자를 표현할 때 사용되는 타입별도의 데이터 타입으로 지정됨빅인트 타입으로 지정하기 위해서는 일반적인 숫자와 구분하기 위해 숫자를 쓰고 뒤에 소문자 n을 붙이면 됨const number = 123n;console.log(..

CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨HTML 페이지 구성  hover 상태 선택자와 active 상태 선택자를 사용마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용 transition-duration 속성 사용구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용 변형 속성은 다음 스타일 속성과 함께 사용 가능위치 속성 : top, left, bottom, right크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, border-r..

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..

HTML(Hyper Text Markup Language)웹 페이지를 생성하기 위한 표준 마크업 언어웹 페이지의 구조를 설명일련의 요소로 구성요소를 사용하여 브라우저에 콘텐츠를 표시하는 방법을 알려줌콘텐츠 조각에 레이블을 지정      웹 표준웹 사이트 제작할 때 지켜야 하는 약속을 정리한 것웹 표준을 지켜 사이트를 제작하면 장소나 브라우저 상관없이 쉽게 웹 사이트 연결 가능웹 표준으로 문서를 만들면 어떤 기기에서든 볼 수 있기에 웹 개발자와 디자이너의 시간 절약HTML5로 문서를 만드는 것 = 웹 표준 지킨 문서를 만드는 것HTML5를 공부해야 하는 이유웹은 주인도 국적도 없는 모두에게 공개된 기술이므로 모든 디바이스에서 사용할 수 있음HTML5를 공부하여 알고 있다면, 안드로이드 애플리케이션 개발을 ..

웹 개발웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아님웹사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 함서버 vs 클라이언트서버인터넷에 연결된 컴퓨터웹 요소와 여러 정보가 저장클라이언트사용자가 웹 사이트에 접근할 때 사용하는 기기웹 브라우저프론트엔트 개발 vs 백엔드 개발프론트엔드 개발웹 브라우저 화면에 보이는 부분 개발 -> 웹 사이트 제작HTML, CSS, JS 사용백엔드 개발사용자 뒤 보이지 않는 영역, 서버를 다룸데이터베이스를 설계하거나 데이터 처리자바, 파이썬, PHP 등 프로그래밍 언어 사용 웹 개발의 기본웹 문서의 뼈대를 만드는 HTML 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속HTML에서 약속한 표기법을 사용하여 문서 작성해야 함웹 문서를 꾸미는 CSS..