html7 [ 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. [ 스파르타 / 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. [ 자바스크립트 ] <script> 태그는 어디에 위치하는게 효율적일까? 태그는 어디에 위치하는게 가장 효율적일까? 를 적는 크게 4곳을 정리해 보았습니다: 1. parsing HTML Blocked parsing HTML fetching js executing js 태그 안에 가 있는 경우 parsing HTML fetching js executing js parsing HTML Blocked parsing HTML fetching js executing js parsing HTML executing js fetching js parsing을 하다가, script에서 defer을 보면, "main.js를 다운 받자" 명령만 시켜두고 나머지 HTML을 끝까지 parsing 한다. parsing이 끝난뒤에 다운로드 되어지 JavaScript 파일을 실행한다. 2022. 9. 30. [ 웹 기능 구현] 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. [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 포트폴리오를 만들다 보면 연락처 부분이 필요하게 됩니다. 이때 백엔드 없이 HTML안에서 만든 form으로 당신에게 이메일을 보낼 수 있는 두 가지 방법이 있습니다. 1. FormSubmit을 사용하기 2. Get form을 사용하기 https://formsubmit.co/ FormSubmit | Easy to use form backend - form endpoints for your HTML forms FormSubmit is a form backend, API and email service for HTML forms. It sends your site's form submission directly into your inbox without a need for any backend code or .. 2022. 2. 28. [ 웹 기능 구현 ] Boxicons 사용해서 무료 아이콘 사용 방법 웹 개발을 하다 보면 메뉴 바가 접혔을 때 사용할 아이콘 또는 무언가를 넘길 때 사용할 화살표 아이콘 등 아이콘을 사용할 일들이 생깁니다. 많은 사이트들이 무료로 아이콘을 제공해줍니다. 오늘은 그중 Boxicons를 사용해 봅시다. Boxicons Boxicons : Premium web friendly icons for free Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines boxicons.com STEP 1 위에 제공된 링크로 들어가서 "Usage"를 눌러주세요. STEP 2 왼쪽에 "Import the C.. 2022. 2. 27. 이전 1 다음 728x90
