You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🎨 Aspect Ratio - 이미지 크기 비율 간단 제어
Aspect Ratio 종횡비 속성 과거에는 css에서 비율로 영역을 조절하게 할 수 있는 css 프로퍼티가 존재하지 않았다. 그래서 있는 속성으로 편법으로 하여 스크린 비율을 지정하여 사용하였다. 그렇지만 이제 css에서 최신 기능으로 드디어 aspect-ratio 라는 종횡비 전용 속성을 지원하게 되었다. aspect ratio 속성은 이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용된다. 매우 직관적이라 다루기도 편하다. 다만 우리의 주적 IE 브라우저에는 지원이 안되기 때문에, 과거에서 사용되었던 간접적으로 비율을 구현하는 방법과 더불어, aspect ratio 속성 사용법을 소개할 예정이다. 과거 종횡비 조절법 1. 단순 지정 가장 간단한 방법은 직접 width와 height를 지정해서 하는 ..
🔮 BootStrap5 클래스 이름 익혀보기
부트스트랩 클래스명 총정리 중단점 클래스명 Breakpoint Class Dimensions X-Small None position-sticky top, left, right, bottom top-0, 50, 100 start-0, 50, 100 property : top - top position start - left position (in LTR) bottom - bottom position end - right position (in LTR) position : 0 - for 0 edge position 50 - for 50% edge position 100 - for 100% edge position translate top-50 start-50 으로 하면 중앙으로 갈것 같지만, 중앙에서 살짝 ..
🔮 BootStrap5 아이콘 사용법 정리
BootStrap 5 icons 대표적인 폰트 아이콘으로는 폰트어썸(FontAwesome), XEIcon, Google Icon Fonts 등이 있습니다. 부트스트랩 아이콘(Bootstrap Icons)은 폰트 어썸처럼 사용하기 매우 쉽습니다. 더불어 svg 아이콘을 이미지로 다운로드 받을 수도 있고, svg 코드를 사용할 수도 있도록 다양하게 편의를 제공합니다. Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com NPM > npm i bootstrap-icons CDN 부트스트랩 아이콘 적용법 태그로 적용 방법 하나씩 알아보도록 하겠습니다. 에서 bi- 다음의 아이콘 명을 적어주시면 그 아이콘..
📑 JSON 관련 유용한 사이트 모음
JSON 비교 웹 사이트 JSON 끼리 비교해야할 경우가 있는데, 그럴 때 유용한 사이트이다. JSON Diff - The semantic JSON compare tool www.jsondiff.com JSON 이쁘게 정렬 직렬화된 JSON 코드를 이쁘게 정렬한다. Json Beautifier - Json Formatter | Json Viewer | Json Editor Online best free JSON Beautifier tool used as JSON editor, Json viewer, Json Validator and Json formatter to display data in a tree view and plain text. jsonbeautifier.org Best JSON Viewer..
📑 자바스크립트로 JSON 다루기
자바스크립트 JSON 문법 JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷입니다. 그런데 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어서, JSON을 데이터 교환 목적으로 사용하는 경우가 많습니다. 특히 클라이언트 측 언어가 자바스크립트일 때 말이죠. 서버 측 언어는 무엇이든 상관없습니다. 자바스크립트가 제공하는 JSON 관련 메서드는 아래와 같습니다. JSON.stringify 객체 -> JSON JSON.parse JSON -> 객체 let student = { name: 'John', age: 30, isAdmin: false, courses: ['html', 'css', 'js'], wife: null }; let json = JSON.strin..
📑 JSON 기초 문법 정리
JSON 이란? JSON은 JavaScript Object Notation의 약자입니다. JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준입니다. 이러한 JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습니다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다. JSON의 특징 JSON은 자바스크립트를 확장하여 만들어졌습니다. JSON은 자바스크립트 객체 표기법을 따릅니다. JSON은 사람과 기계가 모두 읽기 편하도록 고안되었습니다. JSON은 프로그래밍 언어와 운영체제에 독립적입니다. JSON vs XML XML 문서는 XML DOM(Document O..
🎨 클릭 이벤트 방지 pointer-events 속성
pointer-events 속성 css를 사용하여 클릭이벤트를 제어할 수 있는데, 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events 이다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있다. none : 클릭 이벤트를 적용하지 않음 auto : 브라우저 자동으로 선택함 inherit : 상속 되어짐 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 관련된 효과 (click, :hover) 역시 동작하지 않게 된다. 예를들어 아래와 같이 파란색 박스 영역과 하늘색 박스 영역이 있는데, 하늘색 영역이 파란색 영역을 위에 덮어 일부분을 가리고 있는 상태이다. 이 상태에서 가리고 있는 일부분 영역을 클릭하면 파란색 영역에 등록된 cli..
🎨 CSS 요소 숨김 처리 속성에 따른 특성 차이
숨김 처리 속성에 따른 특성 차이 요소를 숨길때 사용하는 CSS 속성은 여러 가지가 있다. 그러나 이들 방법 마다 제각기 고유의 특성을 지니고 있다. 이번 글에서는 이러한 방법들의 차이점에 대해 살펴보겠다. 숨김 css 속성 공간 점유 이벤트 탭 접근 opacity : 0 점유 활성 가능 visibility : hidden 점유 비활성 불가능 visibility : collapse 점유 (테이블 안에서만 비점유) 비활성 불가능 display : none 비점유 비활성 불가능 opacity: 0 투명도 처리 그러나 요소는 여전히 공간을 차지하게 되므로, 다른 요소들과의 간격이 유지된다. 요소가 보이지 않는 것뿐이지, 여전히 이벤트를 받을 수 있음 visibility: hidden 요소를 숨김 이 경우에도 ..
🔮 BootStrap5 여러 웹 스타일 컴포넌트 소개
Bootstrap 컴포넌트 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합 입니다. 컴포넌트는 클래스만 사용해도 동작하는 유형과 특정 태그와 함께 사용해야 하는 유형이 있습니다. 각각의 컴포넌트 문서와 사용예를 보고 적용하면 됩니다. Accordion 접고 펼치는 메뉴 Alerts 브라우저의 alert()랑 상관없음. 텍스트 메시지를 포함하는 알림 박스 Badge 버튼과 유사한 모양으로 텍스트와 숫자 뱃지로 구성. 버튼은 아닌데, 버튼같은 모양 스마트폰 아이콘에 숫자 뱃지와 유사 Breadcrumb 웹사이트에서 현재 페이지의 위치 정보를 표기 home > board > 자유게시판 형식 Buttons 다양한 색상과 디자인의..
🔮 BootStrap5 반응형 시스템 - 거터/간격(gap)
Gutters 거터는 열 사이의 패딩으로, Bootstrap 그리드 시스템에서 콘텐츠의 간격을 맞추고 정렬하는 데에 사용됩니다. 거터는 가로 padding에 의해 생성되는 열 콘텐츠 사이의 간격입니다. 각 열에 padding-right 및 padding-left를 설정하고 음수 margin을 사용하여 각 행의 시작과 끝에서 이를 오프셋하여 콘텐츠를 정렬합니다. 수평 거터 .gx-* 클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. .container 또는.container-fluid 부모는 일치하는 패딩 유틸리티를 사용하여 원하지 않는 오버플로를 방지하기 위해 더 큰 거터를 사용하는 경우 조정해야할 수 있습니다. 대안은 .overflow-hidden 클래스로 .row 주위에 래퍼를 추가하는 것입니..
🔮 BootStrap5 반응형 시스템 - Column 행렬 정렬
Columns 행렬 시스템 행렬 정렬 flexbox 정렬 유틸리티를 사용하여 가로나 세로로 열을 정렬합니다. 수직 정렬 One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns 수평 정렬 One of two columns One of two columns One of two columns One of two colum..
🔮 BootStrap5 반응형 시스템 - 그리드
부트스트랩 그리드 시스템 그리드는 테이블과 유사하게 화면을 분할해 원하는 레이아웃을 잡기위해 정의된 것으로 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며 6개의 화면크기와 관련된 옵션을 제공 합니다. 12개의 그리드 컬럼 화면을 12개의 컬럼으로 분할할 수 있으며 필요에 따라 컬럼을 묶어 더 큰 크기의 컬럼으로 사용할수도 있습니다. 그리드 작동 원리 그리드는 여섯 개의 반응형 중단점별로 컨테이너 및 열 크기 및 동작을 제어할 수 있습니다. (예: .col-sm-4는 sm, md, lg, xl, xxl에 적용됨) 컨테이너는 콘텐츠를 중앙에 놓고 가로로 채웁니다. 반응형 픽셀 너비에는 .container를, 모든 뷰포트 및 디바이스에서 width: 100%에는 .container-fluid를, 유동..
