항해 사전스터디 시작!
1주차에 배우는 내용은 웹개발의 기본 HTML / CSS / Javascript
쉽게 생각하자! 복잡하게 생각하지 말자!
HTML은 뼈대
CSS는 꾸미기
Javascript는 움직이기
<로그인 구현>
기본적인 로그인 구현하기를 따라해봤다.
우선 HTML은 <head> 와 <body>로 구성되어 있다.
<head>안 <style></style>안에는 CSS(꾸미기)가 가능. ex) .mytitle {} / .warp{}
<body>
<div></div> 태그는 쉽게 생각해 '구역'이라고 생각하자
<p></p> 태그는 '문단'이라고 생각하자
<a> 태그는 '하이퍼링크'
ex)
<img src="xxxxxx"/> 태그는 '이미지'태그
<button> </button> 태그는 '버튼' 구현
<script>
이 부분에서 주석이 된 background-color : green은 <div>구역을 css작업을 할 때 편하게 하기 위한 설정
※박스 (구역)을 꾸밀때는 background-color를 먼저 설정할것
이유 - 구역이 티가 안남 -> 작업이 끝난 후 삭제 및 주석처리
<구글폰트 사용>
아래와 같이 '구글폰트'사용 하려면 import -> <style></style>안 코드 ctrl + c -> 내 <script>안 ctrl +v
※위의 이미지에서 *{} 는 개발에서 *는 전체를 가리킴
☝결과물
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
두번째로 구현한 것은 아래의 이미지와 같이 영화 피디아를 구현
☝결과물
<head>영역
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>자바스크립트 연습! | 부트스트랩 연습!</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) -> 상단 상어이미지 어둡게 하기 */
background-position: center;
background-size: cover;
}
/* class ="mytitle" 밑에 있는 button 을 가리킴 */
.mytitle>button {
width: 250px;
height: 50px;
/* 백그라운드의 컬러를 없애기 */
background-color: transparent;
/* border = 테두리, 1px soild는 1px 실선, */
border: 1px solid white;
color: white;
border-radius: 50px;
margin: 20px;
}
/* mytitle > button:hover 는 button에 마우스를 오버했을때 살짝 강조되는 느낌 주기 */
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: grey;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
</head>
- .mytitle > botton 는 mytitle class를 가진 바로 밑의 버튼을 가리킨다
- .mybtn {} 에서 강조했던 부분
dispaly : flex; --> 선택된 영역안의 요소들을 flex container로 지정
flex-direction: column; --> flex container안의 요소들이 수직방향 (column)으로 정렬
align-items; center; --> flex container 안의 요소들을 수직방향으로 중앙 정렬
justify-content: center; --> flex container 안의 요소들을 수평방향으로 중앙 정렬
-----> 가운데 정렬이라고 보면됨 (외울필요는 없으나 이번에 공부할때 이런게 있다~ 라는걸 인지하고 이해하고 넘어가기)
button : hover --> 마우스를 해당 버튼에 가까이했을때 살짝 진하게 강조되는 걸 구현하기 위함
<body>영역
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>별점</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
</div>
</div>
</body>
아래 이미지는 별점을 추가하는 부분
부트스트랩에서 사용자가 원하는 코드를 가져와 넣는다.
select 태그를 사용해 option태그에 value 값을 1,2,3 순차적으로 넣고 사용자에게 노출되는 이미지는 ★로 표시
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
1주차 소감
공부를 할때 기록하는 습관을 가지기 위해 블로그를 시작했다.
블로그 작성이 낯설고 어떻게 할지 모르겠지만 그냥 내가 공부한 바를 정리하면서 관리를 하는 방향으로 해야겠다.
강의를 볼때 최대한 주석을 사용해서 해당 코드에 설명을 넣는 것이 팀원들과 협업을 할때 도움이 될거라 생각이 되서 앞으로도 계속 이러한 습관을 가지려고 한다.
눈으로만 코딩하는 습관은 버리자 손코딩하는 습관을 갖자.
개념은 어떤 언어든 중요함 개념을 확실하게 잡고 넘어가자.
외우려고 하지말고 문제점이 생겼을 때는 해결능력을 기르자.
