Grid Gutters 제거 제거 전 제거 후 gx-*: 수평 gutter gy-*: 수직 gutter g-*: 수평 및 수직 gutter Ref https://runebook.dev/ko/docs/bootstrap/layout/gutters/index Badges 텍스트 정렬 개발자 도구로 웹 상에서 확인했을 때는 수평 정렬이 정상적으로 되어있다...

💡 리팩토링 import용 파일 생성 용도에 따른 js 파일 분리 JSON 데이터 처리 이벤트 처리 chart.js 라이브러리 ` → ` 변경 className, classList.add, setAttribute JSON 데이터 처리 부분 구조 변경 중

🪙 Fintech App 금융앱 화면을 웹으로 구현해보는 프로젝트이다. 5월 6일 저녁부터 시작해서 5월 10일까지, 주말을 제외한다면 약 3일동안 프로젝트를 진행해야 했다. Figma를 통해 받은 디자인 시안을 보고 HTML과 CSS로 화면을 구성했고, Javas

👏 들어가기 전.. 이전부터 요소들을 배치하는 것에 자신이 없었다. 레이아웃을 잡지 않고 항상 요소 위치를 margin-left나 margin-right을 써서 막무가내로 꾸역꾸역 맞추기 일쑤였고, 그래서 화면 비율이 바뀌면 배치해둔 버튼이 화면 끝자락에 가 있거나

💡 Keyword 전환 효과(transition)와 각 속성들 변환 효과(transform)와 각 함수들 속성 perspective와 함수 perspective의 차이점 1. 전환(transition) transition: 속성명 지속시간 타이밍함수 대기시간 요

💡 Keyword position flex 빨간색: 기본 값 파란색: 기본 값 외에 자주 사용되는 속성 1. position 요소의 위치 지정 기준이다. position과 같이 사용하는 CSS 속성들(top, bottom, left, right, z-index

들어가기 전.. 인라인 상자 상하 여백은 적용 ❌ 👉 밀어내지 못한다고 말하는 것이 좀 더 정확, 덧그려진다. 좌우 여백은 적용 ⭕ 블록 상자 상하좌우 여백 적용 ⭕ 📖 예제 1 `를 사용해서 부모 요소 안에 자식 요소를 두 개 만들고, 자식

css를 통해 html의 어떤 부분을 제어할 수 있을까?박스 모델글꼴배경배치플렉스(정렬)전환: 요소의 전, 후 상태를 애니메이션 처리변환: 요소를 회전하거나 이동, 크기 조정띄움애니메이션: 전환보다 조금 더 복잡한 애니메이션을 만들 수 있음그리드: 행과 열의 구조를 가

CSS 선언 방식에는 내장 방식, 인라인 방식, 링크 방식, @import 방식으로 총 4가지의 방식이 있다.유지보수 측면에서 단점이 많다. 직접적으로 코드를 작성 시에 내장 방식을 사용하는 것은 권장되지 않는다.너무 지나치게 우선해서 css를 덮어쓰면서 수정하고 싶어

💡 Keyword Javascript의 함수 웹페이지의 구조 파악 1. Javascript 구조적인 객체를 정적으로 찍어내는 html과는 달리 js는 데이터에 대한 반복, 비교, 평가, 저장 등 일련의 일들을 CPU에 명령할 수 있는 다양한 표현력을 가지고 있다

💡 Keyword 웹 프로그래밍이 무엇인지에 대해 상대 경로와 절대 경로 개발자 도구 CodePen 브라우저 스타일 초기화 1. 컴퓨터의 메모리 컴퓨터는 메모리에 있는 데이터를 CPU가 계산해주는 계산기이다. 메모리는 입력된 신호(주소/데이터)에 대한 전자 상태