A Developing Developer
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - HTML, CSS 기본 내용 본문
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - HTML, CSS 기본 내용
H-JJOO 2022. 10. 5. 17:09내일배움캠프 4기 사전캠프 2일차
HTML 은 뼈대, CSS는 꾸미기, 내일 진행할 JavaScript 는 동작의 역할을 한다.
- HTML
HTML은 크게 head 와 body 로 구성된다.
head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담는다.
head 안에 들어가는 대표적인 요소 : meta, script, link, title 등
- prac.html
<div>, <p>, <ul>, <li>, <h1>, <h2>, <h3>, <hr>, <span>, <img>, <input>, <button>. <textarea>
<!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>위의 html 파일에 언급된 태그 외에도 많은 태그들이 존재한다. 일일이 외우기보다는 필요할때 찾아쓰자.
! 참고 : Pycharm 에서의 코드 정렬 단축키 (Ctrl + Alt + L)
- login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>나는 혼자 할때 <button> 태그말고 <input> 태그를 활용했는데, 뭐 이것도 언젠가 알려주실거 같다.
- CSS
CSS 는 HTML 태그의 이름표에 따라 영향을 줍니다. 그리고 그 HTML 태그 하위에 있는 태그에 영향을 미치게되는데 하위에 다른 CSS 효과가 없다면 상위 태그에 주어진 CSS 효과가 주어집니다.
(색깔은 글씨 효과를 의미함으로 가정)
예를들어 빨간색 <div> 안에, 초록색, 파란색 <div> 가 들어있습니다. 위 그림에서는 각 <div> 에 각각 CSS 효과가 주어지때문에 초록색 <div> 안에있는 <button> 은 초록색 글씨로, 파란색 <div> 안에있는 <button> 은 파란색 글씨가 될것입니다.
만약에 빨간색 <div> 안에 있는 <div> 태그에 CSS효과가 없다면 각 <div> 안에있는<button> 의 글씨의 색깔은 빨간색이 됩니다.
CSS 사용은 HTML 파일의 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
배경관련 : background-color / background-image / background-size
사이즈 : width / height
폰트 : font-size / font-weight / font-famliy / color
간격 : margin / padding
이 중에서, 간격의 margin 과 padding 이 해깔리수 있는데, margin 은 "바깥 여백"을, padding 은 "안쪽 여백"을 주게됩니다.
- login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.mytitle {
width: 500px;
height: 300px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
<p>ID : <input type="text"></p>
<p>PW : <input type="password"></p>
<button>로그인하기</button>
</div>
</body>
</html>login.html 에 css 를 추가한 버전인데, 화면은 가운데로 정렬하기위해서 구글링한 결과를 적용한 파일이다.
(position, absolute, trasnform, translate... 일단 완성은 했는데, 앞으로도 검색하면서 배워나가자)
- font 적용법
'구글 웹폰트' 를 사용할 건데,
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
위 사이트에 가서
1. 마음에 드는 폰트를 클릭한다.
2. 아래로 내려보면 Style 이라는 부분에 폰트 오른쪽에 'Regular 400 +' 라는 아이콘을 클릭한다(폰트마다 상이)
3. 오른쪽 상단에 아이콘을 누른다.
4. 'Use on the web' 아래에 <link> 에서 가장 아래에 있는 태그를 복사해서 <head> ~ </head> 사이에, CSS 를 복사해서 <style> ~ </style> 사이에 넣는다.
5. 'Use on the web' 아래에 'CSS rulse to specify familes' 의 코드를 복사해서 <style> 태그 안에 넣어준다.
- CSS 파일 분리
<style> ~ </style> 부분이 너무 길어지면 HTML 파일이 너무 길어지게된다. 때문에 CSS 파일을 따로 만들어서 HTML 파일에서 연결할 수 있다.
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
- 주석
주석은 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게하고 싶을때, 2) 코드에 대한 간단한 설명을 붙혀두고 싶을 때 사용한다. (개발자 본인 또는 팀 프로젝트간에 동료를 위해 주석을 붙혀놓는 습관은 중요하다고 한다.)
- BootStrap
예쁜 CSS를 미리 모아둔 것이라고 생각하면 된다.
BootStrap 을 적용하는 방법이있는데,
Buttons · Bootstrap v5.0 (getbootstrap.com)
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
위 사이트의 문서를 참조하면 된다.
아래 코드는 BootStrap 시작 템플릿이다.
<!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>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
<HTML, CSS(BootStrap) 사용 연습 코드>
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/topgun2.PNG");
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.wrap {
width: 1800px;
margin: 20px auto 0px auto;
}
.card > img {
height: 700px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화</h1>
<button>영화 기록하기🔥</button>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtMmVhMjIwMjA1ZmQwXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg"
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">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/13/Top_Gun_Maverick_Poster.jpg/220px-Top_Gun_Maverick_Poster.jpg"
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">
<img src="https://img.cgv.co.kr/Movie/Thumbnail/StillCut/000082/82120/82120203763_727.jpg"
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">
<img src="images/TopGun4.PNG"
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>
</html>위 index.html 파일은 강의 내용에 추가로 작성한 결과 코드이다.
특별히 추가한건 없고, 내 생에 최고의 영화 이미지 줄거리 평점을 바꿔주고 이미지크기를 통일시켜줬다.
=================================================================================
스파르타코딩클럽_웹개발_종합반(강의자료)
=================================================================================
열심히는 하고있는데, 아직은 쉬운 기초부분이기도해서 딱히 어려움을 모르겠다.
개발일지도 일단 하긴하는데 복습이 잘 되는건진 잘 모르겠다.
하루하루 하다보면 언젠가는 성장해있을거라 기대하고 계속 달려보겠다.
'내일배움캠프 4기 > [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' 카테고리의 다른 글
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Ajax (1) | 2022.10.11 |
|---|---|
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버 클라이언트 통신 (0) | 2022.10.11 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Javascript, jQuery (0) | 2022.10.07 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - CSS, Javascript 기초 (0) | 2022.10.06 |
| 웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버/클라이언트/웹의 동작 개념 (0) | 2022.10.05 |
