css7 [ Radio Button ] 라디오 버튼 구현 ✨ 결과물 HTML * input 타입을 라디오로 설정해 줌으로써 생성된 버튼 중 하나는 선택이 되어 있다. CSS * { margin: 0; padding: 0; font-family: sans-serif; } body { display: flex; /* 화면 구조 설정 */ align-items: center; justify-content: center; background-color: #ABABAB; /* 화면 뒷 배경 */ height: 100vh; /* 화면 높이 설정 */ gap: 10px; /* 버튼 간격 설정 */ } .radioButton { appearance: none; /* 라디오 모양 보이지 않게 설정 */ display: flex; /* 버튼 구조 설정 */ align-items.. 2024. 1. 31. [ KTP ] CSS 프로젝트 회고 Clone-Coding Share Space 프로젝트 기간: 2022.1.6 - 2022.1.12 프로젝트 S.A. KEEP 1. 노션을 활용한 프로젝트 관리 프로젝트 일정, 기능 개발, 참고자료 등 꼼꼼한 문서화를 통해 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow로 작업 진행 Main, dev, feature로 브랜치를 나누고 feature는 기능별로 브랜치를 계속 생성해서 dev에 병합하며 작업했는데 기능에 따라 브랜치를 나누니 한 눈에 파악하기도 쉬웠고 작업하기 훨씬 편리했다. 3. PR 시 화면 공유를 통해 기능 구현 한 것 .. 2023. 1. 30. [ 스파르타 / Web ] 웹개발 종합반 2주차_#1 (영화 후기 사이트) 2주 차에서는 jQuery, AJAX를 이용해 몇 가지 간단한 프로젝트를 만들었다. jQuery란 HTML의 DOM 조작과 이벤트 제어 그리고 Ajax 등 웹 화면을 다루는 자바스크립트 라이브러리이다. 우리는 JavaScript 를 기반으로 화면을 그려낼 때가 있다. 물론 JavaScript만 써도 충분히 화면 작업이 가능 하지만 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리가 존재하는데 이게 바로 JQuery이다. JavaScript 를 보다 쉽게 쓰기 위해 사용하는 쿼리라고 보면 된다. jQuery 사용방법 내 생애 최고의 영화들 영화 기록하기 영화 URL 별점 --선택하기-- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 Movie .. 2022. 11. 3. [ 스파르타 / WEB ] 웹개발 종합반 1주차 후기 오늘 스파르타코딩 웹개발 종합반을 시작했다. 당장 다가오는 주 월요일에 내일배움 캠프가 시작이라 그전에 이 종합반을 완강해야 한다. 일단 1주차를 들어본후 후기는 전체적으로 빠르게 HTML, CSS, JavaScript, Bootstrap을 공부할 수 있는 시간이었다. 필요한 링크와 코드들이 강의 영상 바로 하단에 제공됨으로써 빠르게 필요한 요소들을 이용해 공부에 임할 수 있어서 좋았다. 아래는 강의를 들으며 만든 프로젝트들 이다. HTML & CSS을 사용한 로그인 페이지 # 결과물 # 코드 로그인 페이지 ID: PW: 로그인하기 BootStrap을 이용한 사이트 만들기 # 결과물 # 코드 BTS 팬명록 닉네임 응원댓글 응원 남기기 새로운 앨범 너무 멋져요! 1호팬 새로운 앨범 너무 멋져요! 2호팬 새.. 2022. 11. 2. [CSS] background 와 background-color의 차이점 결론 적으로 background와 background-color 모두 배경 색상을 지정할 수 있다. 다만 background-color은 background 의 속성 중 하나이다. background-color 는 색깔만 지정할 수 있는 반면, background 는 color 이외의 다른 background 옵션들까지 지정해줄 수있다. color 글씨 색깔 background 다양한 백그라운드 속성을 부여할 수 있다. background 속성 background-color: color | transparent | initial | inherit; 요소의 배경색을 설정한다. TIP! 요소의 배경은 padding 과 border 을 포함한 요소의 전체 크기이다. ( margin 은 포함하지 않는다.) ba.. 2022. 3. 27. [ 웹 기능 구현] Hover me 효과 넣기 목표 마우스를 text위로 올릴때 hover 효과 나타나게 하기 html 1 2 3 4 5 6 7 8 9 10 11 12 13 Hover Me Hover Me Colored by Color Scripter cs html 파일은 간단하게 태그로 Hover me를 만들어 주었습니다. css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 h1::before { transform: scaleX(0); /* resizes an element along the x-axis (horizontally) */ transform-ori.. 2022. 3. 19. [CSS] box-sizing 속성 box-sizing padding 과 border 을 width 와 height 에 속하게 할지 설정해주는 기능입니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : box-sizing의 기본값으로 content 영역의 너비만 포함합니다. border-box : content , padding , border 영역이 너비에 포함됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성 값을 상속받습니다.. 예제 box-sizing 의 content-box , border-box 차이점. See the Pen box-sizing by heerachoi (@heerachoi) on CodePen... 2022. 3. 5. 이전 1 다음 728x90
