브라우저의 역할
- 서버에 요청하고
- 데이터를 가져와서 보여준다. (HTML, CSS, JavaScript 이용, 표준)
웹페이지 제작의 개괄적인 과정
- HTML로 먼저 뼈대를 만들고
<h1>태그가 구글 검색을 용이하게 한다
- 각 요소에 맞게 CSS를 추가
- 이 과정에서 HTML 요소가 추가, 반복될 수 있음 (div 등)
- JavaScript를 이용해서 function을 추가할 수 있음 (2주차 진행 예정)
기억하면 좋을 것 같은 것들
<div>에 background를 넣을 때 많이 쓰이는 CSS
.titlebar {
background-image: url("https://i.ytimg.com/vi/0WmlBQTFSPY/maxresdefault.jpg");
background-position: center;
background-size: cover; /* 구체적으로 이미지 조정을 해주는 건 아님 */
}<div>내부의 요소를 정렬하기 위해 사용되는 CSS
.wrap-content {
display: flex;
flex-direction: column; /* 가로로 정렬하기 위해서는 row를 사용 */
justify-content: center;
align-items: center;
}- 모바일 사용, 다양한 창 크기의 사용자를 위해서, 유동적인 CSS 설정이 가능함 (Responsive web과는 다름)
.titlebar{
max-width: 500px;
width: 95%;
}- 이미지를 어둡게 하기 위한
<div>에 background-image를 설정한 CSS
.titlebar{
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
}참고 사이트
- Bootstrap template
- 아래 코드로 시작했으나, 찾아보니 bootstrap에서 여러 가지 목적을 위한 template을 제공하고 있었다.
<!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>
</body>
</html>- Bootstrap component 5.0
- 구글 폰트 link
- https://fonts.google.com/?subset=korean
- 원하는 font를 누르고 우측 상단 View selected families를 눌러 사용법을 참고
반응형
'개발 흉내내기 > 웹' 카테고리의 다른 글
| 스파르타 코딩클럽 웹개발 2주차 (0) | 2022.12.12 |
|---|