웹개발 종합반 1주차 정리
웹브라우저가 어떻게 작동하는지
브라우저=클라이언트
컴퓨터=서버
<title>Document</title>은 탭의 이름부분
<head>
탭 이름, 아이콘, css, js등
<body>
뼈대 태그가 들어감. h1~h3, p, hr, br, button등등 많다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"></p>
<p>PW: <input type="password"></p>
<button type="submit">로그인하기</button>
</body>
</html>
꾸미기 -> class 이용
<style>
.abc{
/*css내용*/
}
</style>
<body>
<input class="abc" type="text">
</body>
padding은 안쪽 여백, margin은 바깥쪽 여백이다.
border은 테두리, background-image는 아래를 예시로 div영역의 background를 이미지로 지정하는 것이다.
background-position은 이미지의 위치?(원본의 구간) background-size는 말 그대로 배경이미지의 사이즈를 조절하는 것이다.
<!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>
@font-face {
font-family: 'Ownglyph_ryuttung-Rg';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/Ownglyph_ryuttung-Rg.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'Ownglyph_ryuttung-Rg';
}
.ab {
width: 400px;
margin: 20px auto 0 auto;
}
.abc {
color: rgb(56, 168, 45);
}
.abcd {
background-image: url("https://images.unsplash.com/photo-1597571063304-81f081944ee8?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-position: 5% 10%;
background-size: cover;
width: 400px;
height: 260px;
color: #ffffff;
text-align: center;
border-radius: 20px;
padding-top: 140px;
}
.abcde {
color: rgb(56, 168, 45);
border: 2px solid rgb(56, 168, 45);
border-radius: 20px;
}
.abcde:focus {
outline: 1px solid rgb(28, 61, 25);
border-radius: 20px;
}
.btn {
background-color: rgb(56, 168, 45);
border: 1px solid rgb(56, 168, 45);
font-size: large;
border-radius: 20px;
padding: 7px;
width: 100px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="ab">
<div class="abcd">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p class="abc">ID: <input class="abcde" type="text"></p>
<p class="abc">PW: <input class="abcde" type="password"></p>
<button class="btn" type="submit">로그인하기</button>
</div>
</body>
</html>아래 사진의 항목들을 가운데로 가져가기 위해서 우선 div로 묶어준 후 margin을 이용해 가운데로 가게 할 수 있다.
margin: 20px auto 0 auto;를 이용했는데, 여기서 auto는 끝까지 민다는 의미이다. 그리하여 가운데로 오는 것이다.
마지막으로 전역변수를 통해 폰트를 바꿔주었는데(기존에는 각 class에 지정했지만, 코드 단축을 위해 전역변수에 지정) 폰트 색도 마찬가지로 진행해보았으나, 전역변수의 우선순위가 더 높아서였는지, color에 !important; 를 줬음에도 불구하고 적용이 되질 않아, 그 부분은 원래대로 진행하였다.
완성본이다. 뭔가 심심해서 input쪽과 버튼쪽에도 css를 추가해주었으며 폰트는 눈누에서 가져왔다.
부트스트랩
.mytitle {
background-image: url("d");
font-family: 'LeeSeoyun';
height: 250px;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}flex-direction: column; 은 항목들을 가로로 정렬할지, 세로로 정렬할지 지정하는 것이다. 그래서 colum으로 하면
이런 결과가 나온다. 반대로 row를 입력하면 title옆에 바로 버튼이 오게 된다.
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
이렇게 4줄은 정렬할 때 쓰는 것이므로 외워두는 것이 편하다
위에 있었던 가운데 정렬과 뭐가 다른 것이냐 할 수 있는데, 위 4줄은 div안의 내용물을 div의 정가운데에 오도록 하는 것이지만 위에 있었던 margin은 div자체를 가운데 정렬하는 것이므로 다르다고 볼 수 있다.
다음으로는 div안의 버튼을 꾸미는 것이다.
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
margin-top: 10px;
}대충 아는 건 넘어가고 background-color는 배경색을 바꾸는 것인데, 그 안의 transparent는 배경을 투명하게 만드는 것이다.
그리고 .mytitle>button이 부분이 내가 아는 것과 달랐는데, 내가 아는 것은 .mytitle button 이렇게 하는 것이어서 화살표를 지운 것과 지우지 않은 것 둘 다 테스트를 했다. 테스트 결과 둘 다 같았고 그러므로 >는 좀 더 이해하기 쉽게 넣은 것이라는 생각이 들었다.
<!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>
@font-face {
font-family: 'LeeSeoyun';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'LeeSeoyun';
}
.mytitle {
background-image: url("https://images.unsplash.com/photo-1500051638674-ff996a0ec29e?q=80&w=2718&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
height: 250px;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
margin-top: 10px;
}
.mycards {
width: 1400px;
margin: 50px auto 0 auto;
}
.mypostingbox {
width: 500px;
margin: 50px auto 0 auto;
padding: 20px;
box-shadow: 0 0 3px 0 rgb(24, 150, 55);
border-radius: 5px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn>button {
margin-right: 5px;
}
</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>
<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">
<img src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
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">
<img src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
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">
<img src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
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">
<img src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
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>
</div>
</body>
</html>[완성 결과]
+) alt+b를 하면 창이 실행되는데, 나는 창이 실행이 안 돼서 디버깅으로 실행시켰다. 알아보니 +B가 맞으나, 기본 브라우저 설정을 하지 않아서 실행되지 않는 것이었다. 현재는 수정 완료
+) !치고 enter누르면 html 기본 형식이 완성된다. 자꾸 까먹어서 적는다.
+) 줄맞춤은 자동 줄맞춤을 설정해두어서 저장할 때 같이 맞춰진다.
+) 실습에서는 abcd라고 해두었지만, 실제로 프로젝트를 할 때 변수의 이름에는 그것이 의미하는 역할등을 잘 넣어두어야한다. 그래야 나중에 헷갈리지 않을 수 있다.
'캠프 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 2주차 정리 (내일 이어서 작성) (0) | 2024.07.17 |
|---|
