목록전체 글 (259)

코딩과 결혼합니다

javascript(2) 글자 바꾸기

웹개발 종합반 2주차 - javascript(2) 마술을 부려보겠습니다. 이 평범하디 평범한 '테스트'라는 글자를 무려 '사과'라는 단어로 바꾸어보겠습니다. 2. 리스트 테스트 HTML function checkResult(){ let a = '사과' $('#q1').text(a) } Javascript 간단한 함수를 샤뢀라~~ [결과 확인하기!] 버튼을 눌렀을 때 q1의 아이디 값을 가진 '테스트'라는 문자를 변수 let a = '사과' 로 변경! O.M.GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOD!! 정말 놀랍네요. 이렇게 코딩의 세계는 놀라움의 연속이랍니다. 응용하기 function checkResult(){ let a = ['사과','배','감','귤'] $('#q1').tex..
2세/기타 2023. 5. 6. 22:21
javascript(1)

웹개발 종합반 2주차 - javascript 맛보기 button에 onclick="hey()"를 넣어서 영화 기록하기 버튼을 클릭하면 '안녕하세요!' 라는 문구가 나오도록 함 function hey(){ alert('안녕하세요!') } 내 생애 최고의 영화들 영화 기록하기 javascript 기초 문법 alert( )가 아닌 console.log( )를 넣으면? function hey(){ console.log('안녕하세요!') } 검사 기능 - console 탭에서 내용을 볼 수 있다. >> 개발자들이 코딩을 했을때 맞게 출력되고 있는지 확인 하는 것! console.log('안녕하세요!') function 기능 없는 console.log( )는 클릭하지 않고도 검사 기능으로 데이터가 맞게 출력되는지 ..
2세/기타 2023. 5. 6. 21:50
css 이미지 넣을 때 tip, div안에 내용물 가운데 정렬

이미지 tip background-image:url(''); background-position: center; background-size: cover; 내용물 가운데 정렬 display: flex; flex-direction: column; (세로 정렬) align-items: center; justify-content: center; flex-direction: row; (가로 정렬)
2세/기타 2023. 5. 6. 20:41
부트스트랩 코드 + 웹사이트

https://getbootstrap.com/docs/5.0/components/buttons/
2세/기타 2023. 5. 6. 20:38
부트스트랩 + CSS [div 안에 있는 내용을 가운데로 위치 시키기]

웹개발 종합반 1주차 - 부트스트랩 + CSS [div 안에 있는 내용을 가운데로 위치 시키기] 부트스트랩이란? HTML, CSS, JS 프레임 워크 미리 정의된 HTML, CSS. JS(Javascript)를 모아 놓은 것이다. >>웹사이트를 빠르게, 예쁘게 만들 수 있다. https://getbootstrap.com/docs/5.0/getting-started/introduction/ ♥부트스트랩 사이트♥ 영화 제목 영화 코멘트 ⭐⭐⭐ 나의 의견 부트스트랩에서 가져온 카드 중 1개. card-title, card-text를 보기 쉽게 한글로 간단히 바꾸고 별과 나의 의견을 추가하였다. row row-cols-1 row-cols-md-4 g-4 ★ 여기서 row-cols-md- 에 3이라 적으면 한 줄..
2세/기타 2023. 5. 6. 20:18
구글 폰트 사용하기 + 주석달기

구글 웹폰트 https://fonts.google.com/?subset=korean 먼저 원하는 폰트를 고르고 클릭 폰트 사이즈 고르기~ @import 체크해주고 안에 있는 코드 복사 --> 아래에 바로 붙여주기~ css 부분도 복사 후에 *{ } 안으로 붙여넣기 * = 모두 다! @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding&family=Song+Myung&display=swap'); * { font-family: 'Nanum Gothic Coding', monospace; font-family: 'Song Myung', serif; } window에서 vscode 주석 쉽게 다는(and 없애는) 방법 주석 처리 한 곳..
2세/기타 2023. 5. 5. 17:17
자주 쓰이는 CSS 연습하기

웹개발 종합반 1주차 - 자주 쓰이는 CSS 연습하기 자주 쓰이는 css 태그들이다. .mytitle { background-color: green; width: 300px; height: 200px; border-radius: 10px; color: white; text-align: center; padding-top: 30px; background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg'); background-position: center; background-size: cover; } .wrap{ width: 300px; margin: 20px auto 0px ..
2세/기타 2023. 5. 5. 16:49
간단한 로그인 페이지 만들기 + css

웹개발 종합반 1주차 - 간단한 로그인 페이지 만들기 + css기초 간단한 로그인 페이지를 만들어 보았다. 제목 태그 태그로 문단을 나눠 옆으로 바로 붙지 않고 아래로 나란히 위치하도록 함. 태그는 무언가를 입력할 때. text 형식을 입력할 수 있게 만들었다. 태그는 말 그대로 버튼을 만들어준다. 다음은 간단한 로그인 페이지를 css로 꾸며주기! css를 적용시켜주려면 1. 꾸밀 태그에 이름을 달아준다. class="이름" 2.태그 안에 .이름{} [ class가 아닌 id값 지정시 #이름{} ]
2세/기타 2023. 5. 5. 16:17
이전 Prev 1 ··· 29 30 31 32 33 Next 다음