rabbit97 님의 블로그
본 캠프 시작! 본문
8월 5일 드디어 본 캠프를 시작했다.
그런데 대참사 시작하자마자 웹개발로 팀 프로젝트를 한다고 한다...
카드 발급이 늦어 강의 수급이 늦은 관계로 사전캠프때는 알고리즘만 공부했었는데..
결국은 팀 프로젝트는 빠지고 일주일 동안 자습시간을 가지기로 했다.
그래서 시작한 html 공부!
사전캠프때 유튜브로 살짝 해봐서 다행이도 이해는 빨랐다
강의 방식이 코드를 쥐어주고 따라하세요~~ 느낌인데 빠른 시간에 배우기 좋았다.
강의에서 만들어준 코드 :
<!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>
<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 강의때 큰 도움이 되었다
그리고 css 기초를 다지면서 로그인 페이지를 만들었는데
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top: 30px;
border-radius: 8px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
background-color: green;
width: 300px;
margin: 50px auto 0px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button> 로그인하기 </button>
</div>
</body>
</html>
강의를 듣다가 중간에 동영상을 잠깐 멈추고 직접 만들어보라고 해서 차근차근 하나씩 넣었는데
id pw 쪽 줄이 안바껴서 사전캠프때 유튜브로 잠깐 들었던 html기초 영상을 떠올리며 꺼낸 태그가
<br>
강의가 숙숙 지나가서 따라가느라 자료는 없지만 다시 생각해도 어이가 없었다.
결과는 줄 맞춤이 안되어 이걸 css로 해야하는건가 의심 살짝 했다가 결국 해답은 <p>였다.....
이렇게 술술 풀리는 줄 알았던 css
하지만 현시간 오후 2시 아직도 해결하지 못한 문제가 남았는데......
1주차 최종 목표는 추억 앨범 만들기였다.
그리고 그대로 따라했는데....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.mytitle {
height: 250px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid white;
border-radius: 5px;
margin-top: 20px;
}
.mycards {
width: 1200px;
margin: 30px auto 0px auto;
}
.mypostingbox {
background-color: green;
width: 500px;
margin: 30px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px blue;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 내용">
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜</label>
<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>
<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>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
</body>
</html>
아직도 문제가 뭔지 모르겠다.. 왜냐하면 원래대로라면 중간에 4개의 버튼이 파란색 테두리로 감싸고 밑에 카드 4장이 있는 방식인데
요런식으로 되어버렸다...
녹색 배경은 어디까지 할당이 잡혀있나 확인하려고 추가한건데 왜 저 밑에까지 할당을 잡았는지는 아직도 미스테리....
저 밑에 카드들도 <div class="mypostingbox">
추가하기 전 부터 사진이 디따 크고 세로로 쭉 되어있었는데 이때까지만해도 사진 크기가 너무 커서 아래로 내려갔나보다 하고 문제를 찾으려고 해도 못찾아서 그냥 넘어갔다.
그런데 이게 저 포스팅박스를 추가하고 사진 크기 문제가 아닌걸 알고 현 시각 오후 4시 계속 머리를 쥐어짜봐도 문제를 모르겠다...
---------------------------------------------------------------------------------------------------------------------
현 시각 오후 5시 반 조호영 튜터님 강의를 듣고 왔다! 강의 내용은 오늘 지금까지 내가 했던 내용들인데 새롭게 알게된 점은 일단 코드를 짜면서 기본기가 많이 나왔는데 부모 자식 요소와 관련된 얘기가 나왔다 아마 내 문제가 여기서 생겼던거 같다. 그리고 크롬으로 뭐가 어디에 할당이 되어있는지 실시간으로 체크 한다는 점! 이를 활용해서 한번 오류를 찾아봐야겠다.
이것 저것 고치다가 알아낸 것!
실제로 할당이 이상하게 잡혀있다. 사실 이걸 본다고 어디가 문제인지는 모르고.. 분명히 저 마이포스팅박스랑 마이카드는 따로 구역을 잡았던거 같은데 그냥 처음부터 다시 부모 자식 요소를 배웠으니 구역을 잘 정해서 정리하면서 꼼꼼하게 만들어봐야겠다.
<!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">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>앨범</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-position: center;
background-size: cover;
}
.mytitle > button {
width: 150px;
height: 50px;
background-color: transparent;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid white;
margin-top: 20px;
}
.mycards {
margin: 20px auto 20px auto;
width: 1200px;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px blue;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</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 h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
차근차근 정리해서 다시 만들기 끝~~ 전에 만든 코드에서는 폰트가 안들어갔는데 이유가 오류가 떠서 해결법을 찾지 못하고 그냥 기본으로 쓰지~ 하고 그냥 넘겼었는데 이번엔 폰트도 잘 넣었다
사실 다시 만들고 나니 그냥 되는건데 그 전에 코드는 왜 저렇게 됐는지는 아직도 이유를 모른다..
결과는
대성공
응용해서 테두리 색갈도 바꾸고 버튼 색갈도 바꿔보면서 익혀야겠다.
<!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">
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;
background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-position: center;
background-size: cover;
}
.mytitle > button {
width: 150px;
height: 50px;
background-color: transparent;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
border: 1px solid white;
margin-top: 20px;
}
.mycards {
margin: 20px auto 20px auto;
width: 1200px;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px red;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.mybtn>button {
margin-right: 10px;
}
.mybtn .btn-primary {
background-color: orangered;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button type="button" class="btn btn-outline-light">추억 저장하기</button>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</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-primary"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
기록하기
</button>
<button type="button" class="btn btn-secondary btn-sm">닫기</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</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>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
응용 끝!!!!
짠 놀라운건 추억 저장하기에 마우스 가져가면
저렇게 흰색으로 빛난다!!!!
---------------------------------------------------------------------------------------------------------------------
오늘의 학습 요약
오늘은 사전캠프에서 목표없이 들었던 html과 css를 다시 배우는 시간이였는데 처음엔 뭔가 익숙하면서도 따라하니 안되는 과정이 엉망진창인 날이였다. 튜터님의 강의가 확실히 도움이 되었던게 실력있는 개발자가 목표만 보고 하나씩 만들어가는 과정에서 아 확실히 저렇게 하니 실수가 없고 정확하구나 이런 자세를 배웠다. 하나씩 만들어가면서 하는 기본적인 문법을 얘기할때마다 머리속에 전구가 켜지는 느낌이였고 크롬으로 내가 만든 코드가 잘 적용이 되어있는지 이런 자세가 배울점이 너무 많았다.
내일은 오늘 만든걸로 자바스크립트도 같이 활용한다는데 자바스크립트는 사전캠프때 알고리즘 푸는 재미로 공부를 재밌게 했던지라 더더욱 기대가 된다.
'개발 일지' Related Articles
more
