❄️ 내일배움캠프 7기
[사전캠프/웹개발] HTML / CSS
Genie_.
2024. 9. 14. 16:33
728x90
반응형
사실 HTML / CSS 는 학원도 다녀보고 공부를 했었어서, 처음하는게 아니라 설명 들으면 바로 이해하기 때문에 HTML CSS부분은 간단하게 정리하고 넘어가야겠다. JS부분 부터 조금 더 딥하게 들어가는걸로 ㅇㅇ
1. 웹 브라우저 작동 원리
- 웹 브라우저의 역할
- 요청을 보냄
- 요청은 서버가 만들어 놓은 API라는 창구에 정해진 약속대로 요청을 보냄
- 약속 : 주소 창에 주소를 입력하고 엔터를 입력하는 것
- 받은 HTML 파일을 그려줌
- 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일을 돌려주고 브라우저는 받은 것을 화면에 그려줌
- 요청을 보냄
- 예시 : https://naver.com/
- naver.com이라는 이름의 서버에 있는 / 라는 주소 창구에 요청을 보냄
- 네이버에서, 네이버 홈에 해당하는 HTML 파일을 준다고 보면 됨
- 여기서, 항상 HTML 파일로 돌려주는가? ㄴㄴ 데이터만 내려줄 때가 더 많음, 데이터만 내려올 경우는 JSON형식 이라고함
2. HTML 기초 구조
- html은 웹페이지 뼈대
- css는 뼈대를 꾸며주는 코드
- html 기초 뼈대( 단축키 : ! + enter )
<!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>
</body>
</html>- 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>
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>- Format Document(문서 서식)
- 자동 정렬 기능 vs code
- 윈도우 : Shift + Alt + F
- MAC : Shift + Option + F
- 자동 정렬 기능 vs code
3. 로그인 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID : <input type="text"></p>
<p>PW : <input type="text"></p>
<button>로그인하기</button>
</body>
</html>4. CSS 기초
div태그는 간단하게 이 사진이면, 설명 되는 것 같다
빨간 div에 옵션값을 건들이면 (ex. 색깔) 빨간 div안에 있는 초록 파랑 div의 색도 변한다.
5. 자주 쓰는 CSS
- 배경관련
- background-color
- background-image
- background-size
- 사이즈
- width
- height
- 폰트
- font-size
- font-weight
- font-family
- color
- 간격
- margin
- padding
6. 부트스트랩 가져다 쓰기
부트스트랩 CDN,BUTTON 등등 링크 가져와서 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">
<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>My Album</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.2), rgba(0, 0, 0, 0.2)), 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;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나 만의 추억 앨범</h1>
<button>추억 저장하기</button>
</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-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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">
<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
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>
</div>
</body>
</html>html / css 예시
728x90
반응형