Today Hailie Learned

사이즈 용량 줄이기가 아니라 svg 크기 줄이기 방법입니다. 기존 svg 코드 preserveAspectRatio="none" 을 넣고 width와 height를 수정하면 됩니다. svg 관련 추천 사이트 코드 입력시 svg 를 볼 수 있습니다. https://www.svgviewer.dev/

제가 개발할 때 조금이라도 편하게 하게끔 기록해 놓은 css 모음집 입니다. ✔️ 버튼 기본 css 지우기 button { border: 0; background-color: transparent; } ✔️ 내용물을 가운데로 만들기 display: flex; flex-direction: column; justify-content: center; align-items: center; ✔️ 배경색 그라이데이션 효과 주기 background: linear-gradient(180deg, #f3f186 0%, #f5c96b 100%); height: 100vh; ✔️ 이미지 가운데로 꽉차게 입히기 background-position: center; background-size: cover; ✔️ 링크 태그에서 밑..

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .form-control.invalid input { border-color: red; background: rgb(246, 197, 197); } .form-control.invalid label { color: red; } 결과 입력없이 버튼을 클릭하면 글씨와 인풋창이 css 효과대로 스타일이 변경됩니다. 유저가 바로 인풋에 입력을 하면 원래대로 돌아옵니다. 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

fontawesome 의 공식 문서를 참고했습니다. 👇리액트에서 fontawesome 사용하기👇 https://fontawesome.com/docs/web/use-with/react/ 1. 각종 패키지를 install 을 해줍니다. npm i --save @fortawesome/fontawesome-svg-core # Free icons styles npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons # Pro icons styles npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-sv..

html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리합니다. 하지만 이 둘의 차이점이 존재합니다. ID를 불러올때는 #ID명 앞에 # 샾을 씁니다. #ID명 CLASS를 불러올때는 .CLASS명 앞에 . 마침표를 씁니다. .CLASS명 ID는 중복으로 사용할 수 없습니다. 한 개의 ID는 페이지에서 딱 한번만 사용해야 합니다. CLASS는 중복 사용이 가능하여, 동일한 CLASS명을 페이지의 여러 곳에 사용해도 상관없습니다. CLASS 속성을 둘 이상 사용할 때는 class="class1 class2" 와 같이 띄어쓰기로 구분해야 합니다. 그리고 CSS내에서 가장 마지막에 작성한 스타일이 적용되는 점을 유의해야합니다.

문제사항 아래 표에서 사진 - 내용 - 체크표시를 담고 있는 전체 영역의 justify-content 를 space-between으로 설정했다. 그랬더니 가운데의 내용 영역에 따라 가운데 배열이 되서 전체적으로 깔끔하지 못한 인상을 주고 있다. 내가 만들고 싶은 것 가운데 내용 영역의 글자 길이에 영향을 받지 않고, 제목은 왼쪽에 붙이고, 아이디와 날짜는 오른쪽으로 붙이고 싶다!  해결과정 1. 개발자 도구에서 영역을 확인한다. 👇 내용이 1줄이 안되는 부분에는 보라색으로 빗금이 있다. 이 부분을 없앤다면 내가 원하는 대로 만들 수 있다는 것을 알았다!! 2. 사진 - 내용 - 체크표시를 담고 있는 전체 영역의 크기를 내가 임의로 설정해주자! (맨 위 사진에서 파랑색 영역) width, heigh를 설..

와이어프레임(Wireframe)이란? 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계이다. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이고, 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다. 목업(Mock-up)이란? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것. => 와이어프레임과 목업 작업은 js로 넘어가기 전, 설계도와 같다. 키포인트 display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야한다. flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. justify-content 와 ali..

CSS (Cascading Style Sheets)란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. CSS는 웹사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 즉, 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)를 만든다. 직관적이고 쉬운 UI 제작은 (user interface: 사용자 인터페이스) 프론트엔드 개발자의 기본 소양이다. 웹 프론트엔드 개바자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 그래서 애플리케이션과 소통에 필요한 UI제작은 프론트엔드 개발자의 기본 소양이다. 버튼을 만들고, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 ..

HTML = 웹페이지 구조를 담당하는 마크업 언어, tag들의 집합 (*tag = 부등호로 묶인 html의 기본요소) CSS = 디자인 요소를 시각화하는 스타일시트 언어 Javascript = 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어 = 한 줄 모두 차지 = 컨텐츠 크기만큼 차지 이미지 삽입하기 **이미지 주소는 마우스 우클릭 후 따올 수 있다. (크롬 기준) 링크 삽입하기 리스트화 시키기 ul - il (unordered)/ 순서가 없는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없는 소스 ol - il (ordered) / 순서가 있는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없..

HTML(Hyper Text Markup Language) = 웹을 구성하는 가장 기초가 되는 뼈대 HTML을 구성하는 기본 단위는 태그입니다. 여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의 element(엘레먼트 혹은 요소)라고 부릅니다. : 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. : 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다. : 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 이미지 주소 얻는 방법 1. 웹에서..