[ 앞으로 배울 것 ]
▶ 웹 서비스의 동작 원리
브러우저가 하는 일은 요청을 보내고, 받은 것을 그대로 그려주는 것
Html, CSS, JS처럼 눈에 보이는 부분을 '프론트엔드'라고 함
▶ Html, CSS, JS 눈으로 보기
Html, CSS, JS를 집짓는것에 비교하면
- 집의 골조를 세우는 것이 Html
- 집을 인테리어 하듯 홈페이지 인테리어 하는 것이 CSS
- 자동문, 불을 켜고 끄는 등의 동적인 역할은 JS가 맡음
[ 뼈대 - HTML 기초 ]
▶ head - body 구조
웹페이지에서 뼈대를 담당하는 html은, 기본적으로 <head> 영역과 <body>영역으로 이루어져 있음
<html>
<head>
<!-- 웹페이지 보이지는 않지만, 필요한 설정을 해두는 곳
우리가 집을 위해 미리 생각 해놓은 것을 적어두는 곳이라고 할 수 있음!-->
</head>
<body>
<!-- 우리가 웹페이지에서 볼 수 있는 부분을 세팅하는 곳
우리가 집에서 눈에 볼 수 있는 집 구조들을 설정하는 곳-->
</body>
</html>▶ 주요 태그 훑어보기
<!-- 구역을 나누는 태그들 -->
<div>구역을 나눔</div>
<p>문단</p>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6 숫자가 커질수록 글자 크기는 작아짐</h3>
<a href="https://ddingdong.spartacodingclub.kr/"> 하이퍼링크 </a>
<hr>
<img src="https://ddingdong.spartacodingclub.kr/images/Page/LandingPage/benefit-3-tb.svg"/>
<input type="text">
<button>버튼</button>
대부분의 태그는 여는 태그 ”<태그>”와 닫는 태그 ”</태그>”로 이루어져 있지만
여는 태그만 존재하는 경우도 있으니, 외우려고 하지 말기
▶ 로그인 페이지 만들기
CSS 사용법은
- 명찰을 달아주고(class)
- 꾸며주기
<style>
.mytitle {
color: red;
}
</style><h1 class="mytitle">로그인 페이지</h1>
▶ CSS의 부모-자식 구조
CSS는 상위 태그 스타일 설정이 하위 태그까지 영향을 미치게 됨
이것을 부모가 자식에게 영향을 미치는 것과 비슷하다 하여 부모-자식 구조라고도 표현함
▶ 사용방법 - 다시 살펴보기
<style>
.클래스명 {
속성: 값;
}
</style>- 선택할 클래스(이름): 스타일을 적용할 html 부분을 지칭해 줌
- 속성: 변화줄 스타일의 종류가 무엇인지 적어줌(크기, 색, 위치 등)
- 값: 스타일에 얼마만큼 변화를 줄 것인지 적어 줌
중괄호, 콜론, 세미 콜론을 지키지 않으면, 컴퓨터는 못 알아 듣기에 주의!
▶ 자주 쓰이는 CSS 안내
- 배경관련
- background-color: 배경색을 지정해 줄 때의 속성
- background-image: 배경 이미지를 정할 때의 속성
- background-size: 배경 이미지 크기를 정하는 속성
- 사이즈
- width: 선택한 부분의 너비를 정하는 속성
- height: 선택한 부분의 높이를 정하는 속성
- 폰트
- font-size: 글자 크기를 정하는 속성
- font-family: 글꼴을 정하는 속성
- color: 글자 색을 정하는 속성
- 기타
- text-align: 블록(덩어리) 요소의 가로 정렬을 정하는 속성
- margin: 블록의 바깥쪽 여백을 정하는 속성
- padding: 블록의 안쪽 여백을 정하는 속성
[ 꾸미기 - CSS 연습 ]
▶ 자주 쓰이는 CSS 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 로그인페이지</title>
<style>
.mytitle {
background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
background-position: center;
background-size: cover;
width: 300px;
height: 250px;
border-radius: 10px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h3>코딩의 시작, 띵동코딩</h3>
</div>
<p> ID : <input type="text"></p>
<p> PW : <input type="password"></p>
<button>로그인하기</button>
</body>
</html>▶ 만들어둔 로그인 화면 가운데로 가져오기
화면을 가운데로 가져오려면 '여백'을 조정해야 함
margin은 바깥 여백을, padding은 내 안쪽 여백을 말함
<body> 안의 모든 요소들을 하나의 <div>로 묶은 후 width를 주고 margin: auto를 사용함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 로그인페이지</title>
<style>
.mytitle {
background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
background-position: center;
background-size: cover;
width: 300px;
height: 250px;
border-radius: 10px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap {
margin: 10px auto;
width: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h3>코딩의 시작, 띵동코딩</h3>
</div>
<p> ID : <input type="text"></p>
<p> PW : <input type="password"></p>
<button>로그인하기</button>
</div>
</body>
</html>
'항해99' 카테고리의 다른 글
| JavaScript 문법 종합반 4주차 (0) | 2023.06.20 |
|---|---|
| 띵동코딩 CSS기초_Level1_2 (0) | 2023.06.01 |
| JavaScript 문법 종합반 3주차 (0) | 2023.05.25 |
| JavaScript 문법 종합반 2주차 (0) | 2023.05.23 |
| JavaScript 문법 종합반 1주차 (0) | 2023.05.22 |
댓글