드디어 1주차 강의를 완강했다. 강의를 해주신 이범규 튜터님께 많은 것을 배워 정말 감사함을 느끼고 있다.
1주차는 CSS와 html을 이용하여 프론트엔드의 기초를 익히는 과정이었다.
visual studio code를 설치하고 이용하는 부분부터 github를 이용하여 배포하는 부분까지 정말 유익한 시간이었다.
@웹 브라우저의 원리
- 브라우저란? ==> 요청을 보내고, 요청에 따라 받은 HTML 파일을 그려주는 역할
- 요청은 어디에 보내는 건가? ==> API라는 창구에 미리 정해진 약속대로 요청을 보내는 것.
- 항상 HTML파일로 돌려주는건 아니다. 데이터만 내려 주기도 한다. 결국 HTML 파일의 코드도 결국 데이터라 생각할 수 있다.
@필수 프로그램 설치
- VS Code > Live Server > Korean Language 설치 완료하기
@HTML, CSS 기본 내용
- HTML은 웹의 뼈대를 잡아주는 역할.
- CSS는 HTML을 통해 작성된 뼈대의 속성을 예쁘게 꾸며주는 코드
- HTML 내 style 속성으로도 꾸밀 수 있지만 긴 세월동안 썼던 코드들의 묶어 한번에 모아 볼 수 있는 CSS파일이 탄생하게 되었다.
- HTML 코드 내에 CSS파일을 불러와서 적용한다.
- CSS를 사용할 줄 아는 것과 잘 사용해서 예쁘게 꾸미는 것은 다른 영역이기때문에 대부분 웹디자이너나 퍼블리셔에게 의존한다.
- HTML은 크게 head와 body로 구분되는데 head에는 속성 정보를, body에는 페이지의 내용을 담는다.
@CSS 기초
- HTML 태그는 "어느곳 안에 어느게 들어가있느냐"를 이해하는 것이 중요
- head안에 style로 공간을 만들어 작성하게 된다. style 안에는 .mytitle{}같이 클래스를 가리키는 부분을 같이쓰는게 중요하다.
@구글 폰트 사용하기
- https://fonts.google.com/?subset=korean > 원하는 글자와 사이즈를 설정한다. > Use On Web > import >
style 부분을 복사하여 자신이 작업하고 있는 HTML의 style부분에 붙인다. > 전체부분에 적용하기 위해선 CSS rules to specify families부분을 추가적으로 복사하여 붙이면 된다.
@주석 처리하기
- 주석처리하고 싶은 라인을 선택하고 ctrl + /을 누른다.
@파일 분리
- style부분을 분리시키고 따로 CSS파일을 만든다.
- 따로 만든 CSS부분을 가지고 오기 위해선 작성하던 HTML의 head 부분에 <link rel="stylesheet" type="text/css" href = "(css파일이름).css">을
넣어준다.
@부트스트랩
- 부트스트랩이란? ==> 예쁜 CSS를 미리 모아둔 것
- 부트스트랩은 파일 분리와 같은 원리라 생각하면 된다. 다만, CSS의 파일이 인터넷에 있다는게 특징이다.
@웹 페이지 배포해보기
- github를 통해 배포할 수 있다.
- 웹을 이용해 공유하는 것을 https://github.com/을 이용해 개발자들과 소통하고 공유할 수 있다.
*1주차 결과
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
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;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 250px;
height: 50px;
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.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>
<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>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</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">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">T여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">T여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">T여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">T여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>'JavaScript Dev. > 웹개발 기초 정리' 카테고리의 다른 글
| [스파르타 코딩클럽] 웹개발 5주차 개발일지 (0) | 2023.02.23 |
|---|---|
| [스파르타 코딩클럽] 웹개발 4주차 개발일지 (0) | 2023.02.21 |
| [스파르타 코딩클럽] 웹개발 3주차 개발일지 (0) | 2023.02.20 |
| [스파르타 코딩클럽] 웹개발 2주차 개발일지 (0) | 2023.02.17 |
