웹개발 종합반 개발일지 (1주차)_html, css
_
시작 전_사진네컷 강의를 먼저 들었다.
시작 후_사진네컷 강의 덕분에 이해하기 수월했다.
1주차_로그인 페이지와 영화목록 페이지를 만들 수 있게 되었다.
_
- 컴퓨터(서버)의 창구(API)에 요청을 하면 데이터를 받는다. 서버와 소통할 때 코드를 쓴다. 코드를 쓰기 쉽게 만든 프로그램이 Visuaul Studio Code.
- !+enter 또는 html : 5
쉽게 시작할 수 있게 코드가 자동으로 완성된다. - html=뼈대, css=꾸미기, javascript=움직이기
html=head+body로 구성. 머리와 몸통.
head에는 css코드를 넣어 꾸밀 수 있다.
4.body에서 뼈대를 먼저 잡는다.
<!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>- '속성' : class와 id
class는 어떤 특성이 있어 분류해 놓는 반이다.
id는 신분증처럼 유일값으로 지정해 놓는 것이다.(아직 모르겠음)
<style>
.mybtn {
margin-left: 150px;
}
</style>class 이름을 부여하고 head의 style 안에 '.(점)'으로 class를 지정한다.
<body>
<div>
<button class="mybtn"> 로그인하기 </button>
</div>
</body>-
코딩은 복사와 붙여넣기라고 한다. 다른 사람이 만들어놓은 예쁜 코드가 library에 있다. 이번에 알게된 곳은 Bootstrap. 찾아서 쪼금만 바꿔 쓸 줄 아는 게 능력이겠다.
-
외울 필요없이 '내가 저번에 어떻게 했더라?'하고 파일에 저장해놓은 코드를 복사하고 붙여넣으면 된다.
-
그래도 알아두면 좋을 코드들
/* 내용물을 가운데 정렬하고 싶을 때 */
display: flex;
flex-direction: row 또는 column;
align-items: center;
justify-content: center;
/* 박스(<div>) 안에 이미지를 딱 맞게 넣고싶을 때 */
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
/* mytitle 밑에 있는 button에 적용하겠다. */
.mytitle>button {
}박스 만들고 background-color먼저 넣어서 범위를 확인하자.
코드정렬 : shift+alt+F
/* 구글폰트 넣을 때 2가지 이렇게 넣기 */
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}혼자 다시 영화목록 페이지 만들어봐야겠다...
May stay healthy ;-)