coding 97

배경 이미지 넣기 공식

2022.04.26 배경에 이미지를 넣을때 공식이 대략 있는듯 이미지 주소(이미지) 배경 사이즈 : 커버 배경 위치 : 센터 .mainImg { background-image: url("https://cdn.pixabay.com/photo/2018/08/27/00/07/toy-3633751_960_720.jpg"); background-position: center; background-size: cover; width: auto; height: 500px; } 이렇게 넣으면 이쁘게 크기에 맞게, 중앙에 잘 들어감 +====+ 2022.05.03 배경이미지 반투명으로 넣기 * { margin: 0; padding: 0; } .container { position: relative; height: 100v..

coding/CSS 2022.04.26

js 반복

2022.04.26 자바스크립트의 반복문 기본 형태는 for (변수선언; 끝날조건; 루프하고 뭐 할지){ 콘솔로그에 "hi"를 찍어라 } for (let i = 0; i < 10; i++){ console.log("hi") } 식으로 사용함 맨처음 i =0 인데 10보다 작으니까 콘솔을 찍고 i++ i에 1을 더함 그럼 이제 i는 1이 되고 10보다 작으니까 콘솔을 찍고 i에 1을 더함 ... i는 10이 되면 10보다 작지않으니까 반복문이 종료댐 보통 이렇게 딕셔너리가 들어있는 리스트인 mise_list를 돌면서 조건문과 함께 미세먼지가 40 초과 이면 구 이름과 미세먼지를 찍어라 하면서 돎 for (let i = 0; i < mise_list.length; i++){ let gu_name = mise..

coding/JS 2022.04.26

구글 웹폰트

2022.04.26 구글 웹폰트 사용법 https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사이트에서 원하는 폰트 클릭 오른쪽 중앙 Select this style 누르면 장바구니(?) 같은 곳에 들어감 맨위 오른쪽 Hide selected family 누르면 오른쪽 에 내가 선택한 폰트들이 나옴 /* CSS에 이 부분을 추가하면 완성! */ * { font-family: 'Nanum Gothic', sans-serif; }

coding/CSS 2022.04.26

css 중앙 정렬

2022.04.26 웹 css 전체 중앙 정렬 index.html 로그인 페이지 아이디와 비밀번호를 입력해주세요 ID: PW: 로그인하기 mystyle.css .container { /*background-color: green;*/ width: 400px; margin: auto; text-align: center; } margin:auto 는 구역들이 중앙 정렬 되는거고 text 같은 요소들은 기본 정렬댐 ----- text-align:center 해주면 글 요소들도 가운데 정렬이 댐 ----- 크기를 볼라면 배경색을 넣어보고,(전체 다 잡혀 있으면 크기 조절) 크기를 정해주면 양옆으로 동등한 마진이 들어가서 중앙정렬이 댐 ----- button 중앙 정렬 .Btn{ margin: auto; disp..

coding/CSS 2022.04.26

부트스트랩 사용법 2

2022.04.26 앞에 쓴 글과 똑같은것 같지만, 제대로 이해가 안대서 다시 작성 중 https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 이 부트스트랩 사이트 에서 DOCS 배너에서 왼쪽 맨위 Getting started 를 들어가면 css, js CDN을 받을 수 있다. CSS는 head 태그에 js의 script는 bo..

coding/CSS 2022.04.26

부트스트랩 사용법

2020.04.26 부트스트랩은 누군가 만들어 논 템플릿을 가져와서 사용하는데 그걸 모아둔 곳이라고 한다. 부트스트랩을 설치해서 적용할수도 있고, CDN으로 사용 할수 있는데 난 CDN밖에 아직 사용 못한다. 이걸 쓸려면 head 태그에 css js 코드를 넣어서 임포트 처럼 사용하고, 원하는 템플릿 코드를 복사해서 내 body에 넣으면 그 스타일이 적용된다.(이때 CDN을 가져와야지만 적용이 댐) 위에 링크에서 잘 알려주고 있지만, 내가 정리하자면 를 head 태그에 넣어 준다. www.bootstrapcdn.com/bootswatch/?theme=11 Bootswatch The recommended CDN for Bootswatch www.bootstrapcdn.com 이곳에서 템플릿을 가져오는데....

coding/CSS 2022.04.26