본문 바로가기

IT96

[react] CKEditor 라이브러리 활용하여 게시판 구성하기 (최소 높이 설정하기, CSS Module) 프로그래밍 세계를 탐구합시다. CKEditor 라이브러리 활용하여 게시판 구성하기 CKEditor 라이브러리를 활용하여 게시판을 효과적으로 구성할 수 있습니다. HTML, CSS를 전부 활용해서 구현하려면 어려운 게시판 요소를 간편하게 출력할 수 있습니다. 아래는 구현 예시입니다. CKEditor 라이브러리 1. CKEditor 란? CKEditor는 웹 기반의 텍스트 에디터로, HTML로 작성된 문서를 편집할 수 있습니다. 이는 웹사이트의 사용자가 브라우저에서 직접 콘텐츠를 편집할 수 있게 해줍니다. 이 에디터는 JavaScript로 작성되었으며, 다양한 웹 브라우저와 호환됩니다. CKEditor 사이트 URL https://ckeditor.com/ckeditor-5/ CKEditor 5 | Power.. 2024. 1. 9.

[GitHub] 리포지토리 repository 생성하고 VScode에서 연결하기 (Clone URL 방식, Collaborators 초대하기) 프로그래밍 세계를 탐구합시다. 리포지토리 repository 생성하고 VScode에서 연결하기 GitHub는 프로젝트 관리와 협업을 위한 편리한 프로그램입니다. GitHub의 리포지토리를 사용하여 다른 컴퓨터에서도 어디에서든 작업할 수 있으며, 결과물을 팀원과 공유할 수 있습니다. 1. GitHub 로그인 깃허브를 사용하기 위해서는 로그인이 필요합니다. URL은 아래와 같습니다. https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage yo.. 2024. 1. 8.

[CSS] 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 테스트 방법) 프로그래밍 세계를 탐구합시다. 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 사용방법) 웹을 기준으로 코드를 작성한 후 해당 페이지를 모바일에서 보면 CSS가 이상해지는 것을 확인할 수 있습니다. 미디어 쿼리(Media Queries)는 다양한 디스플레이 장치의 뷰포트(Viewport) 크기와 해상도에 따라 웹 페이지의 스타일을 동적으로 적용할 수 있게 해줍니다. 이를 통해 반응형 웹 디자인(Responsive Web Design)이 가능해지며, 사용자 경험을 크게 향상시킬 수 있습니다. 예를 들어, 화면의 사이즈가 작아지면 원래 있던 카테고리 모양을 바꾸거나 글자 크기를 줄이는 등 CSS를 따로 설정하는 것을 미디어쿼리라고 합니다. 미디어쿼리 분기점 1. 노트북 & 태블릿 가로 .. 2024. 1. 7.

[CSS] 버튼 CSS 효과 (입력 input 칸, 드롭다운 dropdown 메뉴 꾸미기) 프로그래밍 세계를 탐구합시다. CSS 효과 (입력 input 칸, 버튼, 드롭다운 dropdown 메뉴 꾸미기) CSS 효과를 활용하여 입력 칸, 버튼, 드롭다운 메뉴를 꾸밀 수 있습니다. 구현 화면 입력 칸에 1955년~2070년 사이의 연도만 입력하실 수 있습니다.를 placeholder로 기본으로 나타나게 했습니다. 입력 칸을 클릭할 시 문구가 사라지고 그림자 효과와 함께 언더바 색이 진하게 변하도록 했습니다. 드롭다운또한 선택했을 때 색이 변하도록 하였으며, 확인 버튼은 마우스를 올렸을 때 hover효과가 나타나도록 구현했습니다. 작성 코드 powerprice.html 확인 powerprice.css .year-dropdown { /* 변경하고자 하는 스타일 추가 */ font-size: 16px.. 2024. 1. 6.

이전 1 2 3 4 5 6 ··· 24 다음

티스토리툴바