한이음 ICT 멘토링 프로젝트를 진행하며 '스파르타 코딩 클럽' 강의 지원을 받아 웹 개발 공부를 하기 위해 '왕초보 시작반' 수강을 시작하였다.
1주차 강의에서는 서버, 클라이언트 및 웹의 동작 개념에 대해 가볍게 배우고 HTML과 CSS, JAVA Script에 대해 공부할 수 있었다.
HTML 기초
Head 태그
디자인적 요소가 들어감. (부트스트랩 사용시, CSS 파일 링크, style 정의시 이용)Body 태그
페이지의 전반적인 내용이 들어감.주로 사용되는 태그들
<hn></hn> : 머리말의 크기를 지정하는 태그 (<h1>으로 지정했을 때 본제목 용으로 사용할 수 있다.)
<p></p> : 하나의 문단을 의미하는 태그
<div></div> : 구역을 나누는 태그
<img src="이미지 주소"></img> : 웹 페이지의 이미지를 불러오는 태그
<a href="이동할 주소">하이퍼링크 내용</a> : 하이퍼링크 적용 태그
<hr> : 가로선 태그
<button>버튼 내용</button> : 버튼 태그
<ul></ul> : 순서가 정의되지 않은 리스트 <ol></ol> : 순서가 정의된 리스트
<input type="text"></input> : text로 내용을 입력할 수 있는 태그
-> type은 text, button, checkbox 등 다양하게 사용할 수 있다. 구글링이 최고다(❁´◡`❁)CSS 기초
CSS 사용법
head 태그에 style 태그를 넣어 정의 (background-color, color, width, margin 등)클래스 사용법
해당 태그 안에 class="클래스 이름"을 넣고, style 태그 안에 .클래스 이름{ }을 정의하여 해당 태그에 대한 CSS 요소를 작성한다.▶ 여러 가지 태그에 style을 적용하려면 id가 아닌 class를 정의해줘야 한다.
'''클래스 관련 코드 외 생략'''
<head>
<style>
.class_name {
width : 300px; --너비 300px--
background-color : pink --배경 색상 핑크색--
margin : 10px auto 10px auto --위 오른쪽 아래 왼쪽 순으로 구역 바깥 여백 설정--
padding : 10px auto 10px auto --위 오른쪽 아래 왼쪽 순으로 구역 안쪽 여백 설정--
}
</style>
</head>
<body>
<div class="class_name">
<h1>강의내용복습<h1>
<p>2주차도 화이팅</p>
</div>
</body>로그인 페이지
배운 내용을 기반으로 간단하게 만든 로그인 페이지 !+ 이미지 화질이 이상한 건지, background 설정이 이상한 건지 예뻐 보이진 않다..!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
.mytitle{
background-color: antiquewhite;
width: 300px;
height: 150px;
color:white;
text-align: center;
background-image: url("링크 생략");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px; <!--안쪽에다가여백-->
}
.wrap{
width:300px;
margin:auto;
}
.btn{
display:block;
width: 100px;
margin:auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>Login Page</h1>
<h5>Enter the ID & PW!</h5>
</div>
<p>ID : <input type="text"></p>
<p>PW : <input type="text"></p>
<input type="button" value="login" class="btn">
</div>
</body>
</html> 웹폰트 적용
google fonts나 눈누 상업용 폰트 등을 이용하면 웹폰트를 쉽게 적용시킬 수 있다.
google fonts로 웹폰트 사용하기
1. 먼저 google fonts에 접속한다 -> google fonts 한국어 페이지
2. 원하는 font를 선택하고, "select this style" 선택
3. Embeded를 누르고, link 란의 내용을 html 파일의 head 태그에 복사한다.
4. CSS rules to specify families 란의 내용을 html 파일의 style 태그 안에 폰트 적용을 원하는 class (전체 적용을 원한다면 *{~} 안에) 복사한다.
부트스트랩
부트스트랩은 미리 예쁘게 만들어진 css 파일이다. 이를 적용하기 위해선 시작 템플릿이 필요하다. 부트스트랩을 이용한다면 원하는 웹 디자인을 더욱 쉽게 나타낼 수 있다.
부트스트랩 페이지<< 부트 스트랩 시작 템플릿 - 이 줄을 제외한 나머지 줄을 그대로 복사해 사용하면 된다 >>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>부트스트랩</title>
</head>
<body>
hello
</body>
</html>위 내용을 바탕으로 만든 "링크 메모장"이 있는데 이 페이지에 올리면 너무 복잡할 것 같아 다음에 올릴 예정이다,,,,,,,,,,,,,,,,,,,,,,ㅎ 윙잉잉ㄹㅇ루
스파르타코딩클럽 왕초보 시작반 1주차 수강 후기
웹 공부를 혼자서 어떻게 해야할지 정말 막막했는데, 스파르타 코딩 클럽에서 왕초보 시작반을 만나게 되었다..!동영상이 2시간으로 뭉쳐있는게 아니라, 한 챕터씩 짧은 영상으로 이루어져 있어 집중하기에 더 좋았다.
무엇보다 웹 공부는 처음이었는데, 초보반이다 보니 멘토님께서 더 쉽게 설명해주신 것 같아 이해하기가 수월했다.
그리고 매니저님께서 관리를 너무 잘해주셔서, 열심히 공부하게 되는 것 같다. 매주 나오는 과제도 정말정말정말 마음에 든다.
아직 1주차여서 재밌는 것 같긴하지만, 더 열심히 해서 진행 중인 프젝도 완벽하게 해내고 싶다
뽜이띵!!!!!!!!!!!!!!!!!!!!!!!!!!!
