2022.12.13 - [7.스파르타코딩클럽] - [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 1주차 1일차 후기
[스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 1주차 1일차 후기
#스파르타 #스파르타코딩클럽 #코딩 #코딩인강 #후기 #강의 #웹개발 1. 프로그램 설치 PyCharm을 4개월 이용 가능한 라이센스를 주는데 내가 PyCharm이 아닌 PhpStorm에 라이센스를 사용해버려서 사용을
mizz.tistory.com
프로그램 설치과정에서 문제가 있었는데 코드를 다시 받을수가 있었습니다. 답변도 빨리왔습니다. 하지만 이전 계정에는 이미 코드를 사용해서 다시 사용할수가 없었습니다. 그래서 새로운 계정을 만들어 코드를 등록하여 사용하였습니다.
1. css기초
지난 시간에 html로 만든 로그인페이지를 CSS를 이용해서 모양을 만들어주었습니다.
background-image(배경이미지삽입), background-size(배경사이즈 조절), background-position(배경위치조절), color(글자색상), width(너비), height(높이), border-radius(모서리), margin(외부 여백), padding(내부여백)에 대해서 실습을 했습니다.
2. 폰트, 주석, 파일분리
(1)구글 웹폰트 입히기
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글폰트에서 사용할 폰트를 선택후
<head>에 삽입
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">CSS에 사용할 곳에 붙여넣기
font-family: 'Nanum Brush Script', cursive;(2)주석 사용하기
<!--구역 내 콘텐츠 태그들--> html주석처리
/*구역 내 콘텐츠 태그들*/ -->CSS주석처리
//라인 콘텐츠 태그들 -->javascript주석처리
/*구역 내 콘텐츠 태그들*/ -->javascript주석처리(3)파일분리
html파일이 있는곳에 CSS파일과 javacript파일을 만든 후 추가합니다.
<link rel='stylesheet' href='css/style.css'>
<script src="script/script.js"></script>3.부트스트랩
부트스트랩은 CSS를 쉽게 사용할수 있는 방법을 제시하고 있습니다.
4.부트스트랩을 이용해서 예제 만들기
앞에서 배운내용과 부트스트랩을 이용해서 상단 를 만들고 그아래 card를 넣었습니다.
주로 예제를 만들면서 진행을해서 이해가 쉽고 빨리되는게 장점입니다.
#스파르타 #스파르타코딩클럽 #코딩 #코딩인강 #후기 #강의 #웹개발 #르탄이 #pycham #CSS기초 #구글폰트 #googlefonts #부트스트랩 #bootstrap
댓글