Today Hailie Learned

2중 border를 사용하는데 각도가 맞지 않아서 이리저리 찾아보다가 발견하게 된 CSS 입니다.  overflow-clip-margin overflow-clip-margin = overflow 속성 값이 clip인 경우에만 동작하며, 바깥쪽 범위를 지정합니다.  👀 눈으로 알아보기 기본 HTML 이 내용은 컨테이너를 넘어서지만, 클리핑 마진 덕분에 여유 공간이 있습니다.  .container { width: 300px; height: 200px; border: 2px solid #000;}.content { width: 350px; height: 250px; background-color: lightblue;} 를 적용하지 않았다면, .content의 너비인 350px로 넘어가버립니다.   ove..

사이즈 용량 줄이기가 아니라 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;✔️ 링크 태그에서 밑줄 없애기text-deco..

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .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 삽입 미리보기할 수 없..