스파르타 코딩 클럽 :: 신년운세 패키지 1기 #2
Updated:
이 포스팅은 책 “스파르타 코딩클럽의 신년특집 운세 패키지 강의” 를 공부한 것을 기반으로 정리한 페이지 입니다.
1. HTML , CSS
홈페이지의 뼈대, 홈페이지의 구역과 텍스트를 나타내는 코드
HTML 크게 head와 body로 구성됩니다.
-
head - 페이지 속성 정보 담습니다.
-
body - 페이지의 내용을 담습니다.
CSS는 잡은 구역을 꾸며주는 것.
HTML 내 style태그로 꾸미기를 할 수 있지만,
style 요소를 한 곳에 모아서 보거나 유지보수 할 수 있는 CSS 파일이 탄생하게 되었습니다.
HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
[코드] 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>
< > 와 </ > 로 되어 있는 것들이 태그라고 하는 것 입니다.
태그들의 종류는 굉장히 많으며, 주로 사용하는 태그가 아니면 개발자들도 다 알고 사용하지는 않는다고 합니다.
2. CSS
- CSS는 head태그 안에 style태그 로 공간을 만들어 작성합니다.
- 2021년 신년운세 타이틀 박스를 만들며 CSS 적용 방법을 배우기
힌트! - 큰 글씨(h1)와 조금 작은 글씨(h2)가 서로 묶여있네요!
2021년 신년운세는 h1으로, by 르탄. 믿거나 말거나~! 는 h2태그로 작성후
div 태그를 이용해 묶으면 됩니다.
[코드] CSS 기초
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세</title>
</head>
<body>
<div>
<h1>2021년 신년운세</h1>
<h2>by 르탄, 믿거나 말거나~!</h2>
</div>
</body>
</html>
위의 코드처럼 div태그로 h1과 h2태그를 묶어주었더니 홈페이지에 이렇게 나오게 됩니다.
지금은 결과가 멀쩡하게 보이지만 사실 홈페이지의 왼쪽 상단에 위치해 있게 됩니다.
다음은 2021년 신년운세 타이틀 처럼 색과 실제 글자 위치를 중앙에 위치하게 바꿔보겠습니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세</title>
<style>
.mytitle {color:darkred; text-align:center;}
.mytitle > h1 {font-size:56px; margin-bottom: 0;}
</style>
</head>
<body>
<div class="mytitle">
<h1>2021년 신년운세</h1>
<h2>by 르탄, 믿거나 말거나~!</h2>
</div>
</body>
처음에와 코드가 달라진 것을 보면
style 이라는 태그가 생겼고, div태그에 “mytitle” 이라는 클래스명을 넣어줬습니다.
그리고 style태그 내 mytitle 클래스에 컬러를 darkred로 글자를 가운데 정렬로 만들어 주었고
mytitle클래스 안에는 h1, h2태그가 있는데 그 중 h1 태그에 글자 크기를 56px,
아래 여백을 0으로 설정해 주었기 때문에 위와 같은 결과가 나오게 된 것입니다.
다음은 완성본의 배경색과 문양을 채워보도록 하겠습니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세</title>
<style>
.mytitle {color:darkred; text-align:center;}
.mytitle > h1 {font-size:56px; margin-bottom: 0;}
body {
background-color: ivory;
background-image: url(https://new-year.spartacodingclub.kr/images/pattern.png);
background-position: 600px 100px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>2021년 신년운세</h1>
<h2>by 르탄, 믿거나 말거나~!</h2>
</div>
</body>
위 코드를 보시면 style태그 부분에 body 태그를 꾸며주는게 추가가 된 것을 볼 수 있는데
body의 배경색을 아이보리, 이미지에는 주소가 들어가는데 저 주소는 문양 이미지의 주소입니다.
그리고 배경의 위치를 조절해 완성본의 배경과 똑같이 만들기 위해 position을 600, 100px로 주었고
문양 이미지가 계속적으로 반복되기 때문에 backgroud-repeat을 no-repeat으로 해주었습니다.
마치며
- 도입부에도 써놨듯이 스파르타 코딩 클럽 [신년운세 패키지] 강의를 본 후 요약 정리한 포스팅입니다.
- 수정이 필요한 부분이나 피드백이 필요한 부분은 이메일이나 댓글을 남겨주세요.
- 문제가 될 시 글은 바로 내리겠습니다.
Leave a comment