1주차
-
https://junghwan1106.github.io/mypage/ 스파르타코딩클럽 | 부트스트랩 연습하기 영화URL 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 junghwan1106.github.io 내 생애 최고의 영화들 영화 기록하기 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠
Ch1주차) 결과물https://junghwan1106.github.io/mypage/ 스파르타코딩클럽 | 부트스트랩 연습하기 영화URL 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 junghwan1106.github.io 내 생애 최고의 영화들 영화 기록하기 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠 영화 제목이 들어갑니다. 여기에 코멘트가 들어갑니다. ⭐⭐⭐ 여기에 나의 의견을 쓰면 되겠죠
2023.05.20 -
Ch1-13) 부트스트랩 사용하기 1. 부트스트랩이란 남이 만들어 놓은 CSS(꾸미기) 템플릿을 모아둔 사이트를 말한다. 연필로 선을 긋는 법은 알아도, 연필로 그림을 잘 그리는 것은 다른 영역이기에, 이미 만들어진 템플릿을 사용해서 꾸미는 것도 하나의 방법이기 때문에 많이 사용한다. 부트스트랩 사이트 2. 부트스트랩 사용하는 방법 이걸로 시작해보죠! 2.1 Index.html 파일을 새로 만든다. 2.2 Open with Live Server 클릭 2.3 부트스트랩 사이트에서 원하는거 선택 2.4 body 란에 붙여넣는다. 가져와서 원하는대로 꾸미는데 또 CSS파일을 만들어야되기는 하지만, 템플릿을 쓰는 것으로 코드를 줄일 수 있다.
Ch1-13) 부트스트랩 사용하기Ch1-13) 부트스트랩 사용하기 1. 부트스트랩이란 남이 만들어 놓은 CSS(꾸미기) 템플릿을 모아둔 사이트를 말한다. 연필로 선을 긋는 법은 알아도, 연필로 그림을 잘 그리는 것은 다른 영역이기에, 이미 만들어진 템플릿을 사용해서 꾸미는 것도 하나의 방법이기 때문에 많이 사용한다. 부트스트랩 사이트 2. 부트스트랩 사용하는 방법 이걸로 시작해보죠! 2.1 Index.html 파일을 새로 만든다. 2.2 Open with Live Server 클릭 2.3 부트스트랩 사이트에서 원하는거 선택 2.4 body 란에 붙여넣는다. 가져와서 원하는대로 꾸미는데 또 CSS파일을 만들어야되기는 하지만, 템플릿을 쓰는 것으로 코드를 줄일 수 있다.
2023.05.20 -
Ch1-10,11,12) 구글 폰트 사용, 파일분리 하는 법 1. 구글 폰트 사용법 구글 웹 폰트 사이트 1.1 원하는 폰트 클릭 1.2 우측에 @import 클릭 1.3 스타일 태그 안에 있는 부분 복사 1.4 자신의 html 스타일 태그에 넣어준다 1.5 *{ } 를 쓰고 안에 CSS rules to specify families 의 폰트패밀리도 가져온다. 2. 폰트 변경하는 방법 구글 웹폰트 들어가서, 우측 remove all 하고 다시 원하는 폰트 선택하고 동일하게 진행한다. 3. CSS 파일 분리하는 방법 이유1. CSS파일 특성상 꾸미기 시작하면 길어지기 때문에 따로 분리해서 링크를 head에 가져오는 식으로 많이 쓴다. 이유2. CSS파일은 남이 만들어놓은 걸 쓰는 편이 좋기도 하다. 남이 ..
Ch1-10,11,12) 구글 폰트 사용, CSS 파일분리 하는 법Ch1-10,11,12) 구글 폰트 사용, 파일분리 하는 법 1. 구글 폰트 사용법 구글 웹 폰트 사이트 1.1 원하는 폰트 클릭 1.2 우측에 @import 클릭 1.3 스타일 태그 안에 있는 부분 복사 1.4 자신의 html 스타일 태그에 넣어준다 1.5 *{ } 를 쓰고 안에 CSS rules to specify families 의 폰트패밀리도 가져온다. 2. 폰트 변경하는 방법 구글 웹폰트 들어가서, 우측 remove all 하고 다시 원하는 폰트 선택하고 동일하게 진행한다. 3. CSS 파일 분리하는 방법 이유1. CSS파일 특성상 꾸미기 시작하면 길어지기 때문에 따로 분리해서 링크를 head에 가져오는 식으로 많이 쓴다. 이유2. CSS파일은 남이 만들어놓은 걸 쓰는 편이 좋기도 하다. 남이 ..
2023.05.20 -
Ch1-8,9)CSS 연습하기(1),(2) 1. 만들어야 하는 예시 2. 준비물 스파르타 이미지 URL 3. 알아둘 것 - 박스는 div 로 감싼다. - 박스 안에 로그인 페이지(h1), 아이디, 비밀번호를 입력해주세요.(h5) 를 사용 4. 실습 4.1 div(박스) 안에 로그인, 아이디 비번 입력해주세요를 넣는다. 4.2 div 태그를 CSS로 연동시키기 4.3 CSS 꾸미기 4.4 여백 만들기 여백 만드는 방법 margin 안쪽으로 여백 padding 바깥쪽으로 여백 각각 시계방향으로 위, 오른쪽, 아래, 왼쪽 값을 줄 수 있다. padding 30px 0px 0px 0px 둘 다 써보면서 이해하기. 4.5 이미지 넣기 background-image: url('이미지 가져오기'); 중앙으로 이미지 ..
Ch1-8,9)CSS 연습하기(1),(2)Ch1-8,9)CSS 연습하기(1),(2) 1. 만들어야 하는 예시 2. 준비물 스파르타 이미지 URL 3. 알아둘 것 - 박스는 div 로 감싼다. - 박스 안에 로그인 페이지(h1), 아이디, 비밀번호를 입력해주세요.(h5) 를 사용 4. 실습 4.1 div(박스) 안에 로그인, 아이디 비번 입력해주세요를 넣는다. 4.2 div 태그를 CSS로 연동시키기 4.3 CSS 꾸미기 4.4 여백 만들기 여백 만드는 방법 margin 안쪽으로 여백 padding 바깥쪽으로 여백 각각 시계방향으로 위, 오른쪽, 아래, 왼쪽 값을 줄 수 있다. padding 30px 0px 0px 0px 둘 다 써보면서 이해하기. 4.5 이미지 넣기 background-image: url('이미지 가져오기'); 중앙으로 이미지 ..
2023.05.20