1. 학습내용
CSS 기초부터 여러버전의 코드배우기
코드를 입력하세요 ```<head> <meta charset="UTF-8"> <title>로그인페이지</title> <style> .mytitle { color: red; font-size: 40px; } </style> </head> <body> <h1 class="mytitle">로그인 페이지</h1> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </body>```
-body 안에 class="mytitle" 을 넣은 후 head 안에
<div class="mytitle"> <h1>로그인 페이지</h1> <h5>아이디, 패스워드를 입력해주세요</h5> </div>
ID:
PW:
로그인하기```✔백그라운드배경버전 만들기 : backgorund-color / width / height
✔글자색과 중앙정렬 color / text-align: center;
✔이미지넣기 : background-image: url("") / background-size / backgournd-position
✔모서리둥근정도 : border-radius
✔여백만들기 : 바깥으로 여백 [margin] / 안으로 여백 [padding] / 자동으로 여백 [margin : auto]
✅꿀팁! margin: (위) (오른쪽) (아래) (왼쪽) px
✔화면을 가운데로 옮기는 방법 :
로 묶어서 옭기기
✔박스를 가운데로 그대로 옮기지 말고, 글속성을 강제로 박스속성으로 옮긴다. : display:block;
✔박스를 가운데로 그대로 옮기지 말고, 글속성을 강제로 박스속성으로 옮긴다. : display:block;
<title>로그인페이지</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet"> <style> * { font-family: 'Gothic A1', sans-serif; }``` ✔<title> 밑에 두고 폰트코드링크를, <style> 밑에 *(모든태그에 다먹인다) {} 안에 폰트명을 넣는다.
✔주석처리 : 주석처리하고 싶은 라인들을 선택 > ctrl + /(슬래시) 한번 더 누르면 원상복구!
✔부트스트랩 시작할땐 템플릿을 가지고 시작한다.
예쁜부트스트랩 컴포넌트 사이트 - https://getbootstrap.com/docs/4.0/components/alerts/
✔ 모르는 CSS코드는 구글링한다.
2. 학습소감
오늘 CSS코드를 여러개 사용하는 걸 배워서 그런지 좀 따라하는 게 힘들었지만, 튜터쌤이 나중에 익숙해진다고 하니깐 지치지 않는 마음으로 한번 더 복습해줘야되겠다.!!!^^
신입개발자가 되기 위한 노력 프로젝트