전체 글128 1-11 포스팅박스 만들기/ 모바일 최적화 크기 코드: HTML : 별점 --선택하기-- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 Dark Secondary CSS : .commentbox { box-shadow: 0px 0px 3px 0px gray; padding: 20px; width: 500px; height: 500px; margin: 20px auto 10px auto; } .input-group { margin-top: 10px; height: 40px } .buttons { margin-top: 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .buttons>button { margin-right: 5px; ⭐️모바일 최적화.. 2022. 5. 11. 1-10 Bootstrap_Card / 이모티콘 모음 코드: 영화 제목이다 ⭐⭐⭐ 코멘트를 써주세요 Card: 1. 카드섹션에서 원하는 카드코드 붙여넣기 2. 이미지 넣고 갯수 조절. row-cols-md-3 → row-cols-md-4 로 바꾸기 →화면사이즈가 중간정도 되었을때 한줄에 4개 보임. 이모티콘 모음 https://kr.piliapp.com/facebook-symbols/ 2022. 5. 11. 1-9 CSS 속성(이미지 어둡게 / border/가운정렬) 이미지 어둡게 CSS 에 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url(””) ↑ 이미지 주소 입력 Border 순서: border: 사이즈 스타일 색상; border: 1px solid white; 내용 가운데 정렬 CSS에 display: flex; flex-direction: column; align-items: center; justify-content: center; ⭐️ display(화면에 어떻게 나타낼지/ 요소크기 결정) 속성 display:~~; None - 화면에서 사라짐. 크기차지도 하지 않음 block- 태그의 기본값. width가 자신의 컨테이너의 100%가 됨. inline.. 2022. 5. 11. 1-8 부트스트랩 시작 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 부트스트랩: 예쁜 CSS 모음집. 이미 작성 되어 있는 CSS를 가져다 사용하는것. 2022. 5. 11. 1-7 폰트, 주석 구글 웹폰트 넣기 구글 폰트에 접속 https://fonts.google.com/ 원하는 폰트를 클릭후 [ + Select this style ] 우측상단 모음 아이콘 클릭 Embed 클릭 link 태그를 복사해서 사이에, CSS를 복사해서 사이에 넣기 👉 *{~~~} 를 사용하면 웹페이지 전체에 CSS 적용 주석달기 주석은 언제 사용? 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 코드에 대한 간단한 설명을 붙여두고 싶을 때. 👉 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시) 2022. 5. 11. 1-6 자주쓰이는 CSS margin과 padding margin은 바깥 여백을, padding은 안쪽 여백을 조정 화면가운데 정렬하려면 ✅ width를 주고, margin: auto를 사용 그래도 안되면 display:block을 추가 이미지관련 태그 ✅ background-image: url('사이트'); - 이미지 넣어주기 ✅ background-position: center; - 이미지 위치 설정 ✅ background-size: cover; - 이미지 뒷배경 설정 ** 뒷배경 속성 1. contain : 이미지가 잘리거나 찌그러 지지 않는 한도 내에서 제일크게 설정. (이미지가 원본그대로 나타나며 따로 설정하지 않으면 이미지가 반복됨) 2. cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가.. 2022. 5. 11. 1-5 CSS 기초_사용방법( 파일분리,인라인) CSS 사용방법 3가지 ✔️ 태그안에 - 인라인 CSS ✔️ 안에 로 공간을 만들어 작성 ✔️ style.css 파일을 같은 폴더아래 만들고, head 태그에서 불러오기 → 2022. 5. 11. 1-4 로그인 페이지 만들기 코드 : 로그인 페이지 ID: PW: 로그인하기 결과: 2022. 5. 11. 1-3 HTML/CSS 기본내용, 태그들 "HTML 은 뼈대 CSS 는 꾸며주는일" 👉 HTML은 크게 head와 body로 구성 head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 구역을 나누는 태그: ▶ 구역나눔 ▶ 문단나눔 ▶ 리스트로 나눔 구역내 콘텐츠 태그: ▶span: 특정 글자를 꾸밀때 사용 예) 내가 에린 이다. ▶a 태그: 하이퍼링크 ▶img 태그: ▶input 태그: 텍스트 / 버튼 등을 넣는다. 이 외에도 아주 많은 태그가 있는데 필요할 때 마다 찾아서 쓰면 된다고 한다. 2022. 5. 11. 이전 1 ··· 11 12 13 14 15 다음
