1. 수업 내용 정리
-웹(web)!
ex. https://naver.com/ > "naver.com" 은행지점, "/" 창구
-HTML은 뼈대, CSS는 꾸미기!
코드 자동정렬 shift + alt + f
주석 달기 ctrl + /
*html
코드화면 > open with live server : 내가 적은 코드가 실제로 보이는 화면
head(meta, script, link, title 등) 페이지 속성 정보 /
body(<div>구역, 한줄 다 먹음:박스는 div <p>문단 <h1>제목 <hr>태그:<butten> 등) 페이지 내용
ex. <div class="mytitle"><h1><h5></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>*css
<head> ~ </head> 안에 <style> ~ </style>, mytitle라는 클래스를 가리킬 때, .mytitle { ... }
검색 예 : "css 모서리 둥글게" border-radius
번호는 자주 쓰는 순서대로 표기
배경관련 1.background-color(구역확인)
7.background-image: url(' '); 8.background-position(center) 9.background-size(cover:꽉맞게/7,8,9 세줄 늘 같이!
사이즈px; 2.width 3.height
폰트 font-size font-weight font-family 4.color
간격 5.text-align(가운데 정렬) margin 6.padding(시계방향 : 위20px 오20px 아래20px 왼20px; ,auto:쭉 밀기)
margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백
로그인 화면 가운데로 옮기기 : 전체를 박스로 <div></div>
파일 분리 : <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 --<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mytitle {
}
.mybtn {
}
.mytxt {
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID: <input type="text"/></p>
<p class="mytxt">PW: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</body>
</html>2.참고 자료, 해당 내용이 활용되는 부분
- 부트 스트랩(예쁜 css모음집) : https://getbootstrap.com/docs/5.0/components/buttons/
- 구글 폰트 넣기 : https://fonts.google.com/?subset=korean
- 내가 만든 웹페이지 배포 : https://github.com/
3. 오늘 새로 배운 내용
Github에서 파일 배포할 때 제목 무조건 index.html
수정할 때 : code > index.html > 연필모양 > 코드변경 > commit changes
4. 개발 중 발생한 이슈/고민 또는 이를 해결한 내용
-한 글자라도 틀렸을 때 오류가 뜨면 틀린 코드를 찾기 힘들기때문에 처음부터 잘 적어야겠다는 생각을 했다..
강의를 보면서 따라하니까 쉬운건지,, 1주차라서 쉬운건지 가늠이 안간다,,
html 뼈대는 가져와서 바꾸는 것인가,, 내가 새로 만들기는 무리,,
-깃허브에서 새로운 파일을 배포할때는..?
>수정하는 것과 같음.
'사전 스터디 일지' 카테고리의 다른 글
| 5주차 미니프로젝트3, 4 배포하기 (0) | 2023.03.25 |
|---|---|
| 4주차 Flask, 미니프로젝트 (0) | 2023.03.23 |
| 강의 3주차 Python, 크롤링, mongoDB (0) | 2023.03.22 |
| 강의 2주차, jQuery, Ajax, API (0) | 2023.03.21 |