1주차에서는 HTML, CSS 기초를 알아보고 부트스트랩을 사용해 보는 시간이었다.
그리고 Javascript의 기본 기초 문법을 알아보았다.
- HTML, CSS
HTML은 뼈대, CSS는 꾸미기
HTML은 구역을 나누고 텍스트를 나타낸다 CSS는 나눈 구역을 꾸며주는 거라고 보면 쉽다
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>크게 head, body로 구성이 된다
head안에는 페이지의 속성 정보, body안에는 페이지의 내용
head안에는 meta, script, link, title등 페이지의 속정을 정의하거나, 필요한 스크립트들을 부른다.
눈에 안 보이는 필요한 것들을 담는 것
body는 여러가지의 태그들이 있는데 다 외울 필요가 없다 필요할 때 잘 찾아서 작성하면 그만이다
-CSS 기초
태그의 위치를 이해하는게 제일 중요하다!
빨간색 div 안에, 초록색/파란색 div가 들어있다
아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동을 한다
즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다.
같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐다!
태그에 id나 class를 지정하고 지정된 이름으로 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 {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</body>
</html>
배경 관련 3가지가 항상 붙어다닌다 꿀팁이니까 기억하자!
background-image, background-position, background-size
'과거공부모음' 카테고리의 다른 글
| 웹개발 종합반 2주차 개발일지2 (0) | 2022.10.11 |
|---|---|
| 웹개발 종합반 2주차 개발일지1 (0) | 2022.10.09 |
| 웹개발 종합반 1주차 개발일지3 (0) | 2022.10.09 |
| 웹개발 종합반 1주차 개발일지2 (0) | 2022.10.09 |
| 개발일지 블로그 만들기 (0) | 2022.10.04 |