스파르타코딩 웹개발
스파르타코딩 내일배움단 웹개발 공부페이지
Hanachoi
2022. 4. 8. 14:39
#기본적 배경지식
- 우리가 보는 웹페이지는 모두 서버에 미리 준비되어 있는 것을 "받아서", "그려주는"것 : 브라우저가 하는 일은 1) 요청을 보내고 2)받은 HTML파일을 그려주는 것
- 이 요청은 서버가 만들어 높은 API라는 창구에 보내는 것
- 데이터만 내려줄 때도 많음! ex) 공연 티켓 예매할 때, 데이터만 받아서 리프레쉬 되고 갈아끼워지는 것
- 데이터만 받아 오는 형태 : JSON형식
#HTML구조
- 기본 뼈대를 보면 문서처럼 보이는 <head>, <body>, <html>등의 태그(이 꺽쇠들이 모두 태그)로 구성되어 있음
- <head>는 웹브라우저 맨 위에 보이는 이름, 아이콘, 구글 검색엔진이 내 사이트를 퍼가기 좋게 만드는 것들을 포함
- CSS, JAVA script같은 건 모두 <head>에 남김
- <body>는 우리가 보는 페이지를 모두 포함
- 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>#CSS 기초
- html 태그는 "누가 누구 안에 있는지"를 이해하는게 중요! 나를 감싸고 있는 태그가 바뀌면 그 안의 내용물도 모두 영향을 받음. 여기서의 <button>은 초록색<div>의 자식태그
- <div>태그는 Division의 약자로, 레이아웃을 나누는데 주로 사용됨. 다른 태그와 다르게 특별한 기능을 가지고 있지 않고 가상의 레이아웃을 설계하는데 쓰임, 주로 CSS와 사용
- 무언가를 꾸미고 싶으면 내가 그 대상을 짚어야 됨. 하지만 그 대상을 내가 부르고 싶다면 그 대상을 지칭할 수 있는 명찰을 달아주고 그 명찰을 지칭하는게 필요 -> class를 이용
- <body>에서 내가 꾸며주고 싶은 대상에 class를 지칭 하고 <head>로 올라가서 <style>태크를 만들고 그 안에서 꾸며주기가 가능
- example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle{
color: red;
font-size: :40px;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<P>ID : <input type="text" /></P>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</body>
</html>- <h1>을 꾸며주고 싶으니 class를 달고 이름"mytitle"을 달아줌
- <head>에 가서 <style>을 만들고 .mytitle로 지칭한 후 꾸미기 내용을 수정(class를 부를때는 .을 붙여서 함)
- <div>를 설정하면 내가 실행하는<body>에서의 영역을 확인하기 힘듦-> 그래서 <style>에서 컬러를 입혀서 영역을 주로 확인함 : background-color : green;
배경관련##밑 세가지는 같이 다닌다!
background-color
background-image: url("")
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin
padding
- margin과 padding의 차이
- margin은 바깥여백, padding은 내 안쪽 여백
- margin 쓸 때 시계방향으로 <위,오,아래.왼> 순서로 숫자를 설정할 수 도 있음
margin: 20px 0px 0px 100px;
- 만들어 둔 화면을 가운데로 가지고 오려면
- width를 주고 margin : auto사용 , 그래도 안되면 display:block추가
- 모든 요소를 일일이 옮기는 것보다 <div>로 묶어서 그 <div>태그를 옮기는게 빠르고 편함
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디,패스워드를 입력해주세요</h5>
</div>
<P>ID : <input type="text"/></P>
<p>PW : <input type="text"/></p>
<button class="mybtn" >로그인하기</button>
</div>
</body>- <div>를 만들고 class="wrap"를 먹임(<div>는 보이지 않으니까 컬러를 한 번 입혀서 보면 좋음)
-<head>로 가서 .wrap으로 조정 들어감
.wrap{
width: 300px;
margin: auto;
}
.mybtn{
width: 100px;
margin : auto;
display: block;
}- width 주고 margin을 양쪽으로 동등하게 먹인다고 생각하고 auto 사용 / 그리고 입혔던 컬러 삭제
- html은 글속성과 박스속성이 있음
- 박스는 가로세로 개념 존재, 하지만 글은 존재하지 않음
- 그래서 글속성을 옮길때는 박스로 강제로 바꿔 준 다음에 옮겨야함 -> display : block;
- class에는 "중첩"이라는 개념이 존재 : 두개의 설정을 먹일 수가 있음
- 명찰을 두 개 만들고 class에 붙이면 됨!!
<button class="mybtn red-font" >로그인하기</button>
<전체코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap{
width: 300px;
margin: auto;
}
.mybtn{
width: 100px;
margin : auto;
display: block;
}
.red-font:{
color: red;
font-size : 36px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디,패스워드를 입력해주세요</h5>
</div>
<P>ID : <input type="text"/></P>
<p>PW : <input type="text"/></p>
<button class="mybtn red-font" >로그인하기</button>
</div>
</body>
</html>
#폰트, 주석, 파일분리
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- 위 사이트에서 맘에드는 폰트를 골라 [select this style]클릭하고
- 우측 상단의 모음 아이콘 클릭
- embed 탭 클릭
- link를 복사해서 <head>~</head>사이에, CSS를 복사해서 <style></style>사이에 넣기
- 예시
- <title>밑에 <link herf="">부분 넣고
- <style>밑에 *{}넣기 -> 모든 부분에 적용시킬거란 말
- {}안에 <font-family: >부분 넣기
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Jua&family=Nanum+Pen+Script&family=Single+Day&family=Sunflower:wght@500&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
#주석넣기
- 사람은 읽고 싶은데 컴퓨터는 못읽게 하고 싶다면 주석처리 가능 : 주석처리하고 싶은 부분 드래그 해서 ctrl/cmd + /
- 거의 모든 개발환경에서 이 단축기로 주석을 달 수 있음
- 한 번 더 하면 주석을 풀 수 도 있음
#파일분리
- <style>~</style>부분이 너무 길어지면 보기 힘들 수 있음! 그래서 파일을 분리한 다음 그걸 불러와서 그대로 똑같이 적용을 시킬 수 있다.
- 파이참에서 frontend>오른쪽클릭>new>Stylesheet : css 파일을 하나 만듬
- 그리고 원래 있던 <Style> 안에 있는 부분을 쭉 가져옴 / 그리고 원래 파일에선 <style>부분을 삭제시키기
- 그리고 이 만든 파일을 원래 html에서 읽어서 사용 할 수가 있음
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">- css파일이름 부분을 내가 만든 파일이름으로 변경 ex. mystyle.css
#부트스트랩
- css를 할 줄 안다고해서 예쁘게 디자인을 할 수 있는건 아니다 ㅠㅠ
- 남이 만들어 놓은 예쁜 CSS 모음집이 부트스트랩
- 부트스트랩을 이용할때는 항상 이 코드를 가져와서 사용해야함
- 남이 미리 작성한 CSS를 내 HTML파일에 적용한다는 점에서 bootstrap적용은 CSS 파일 분리와 원리가 동일하다 . 다만 CSS의 파일이 인터넷 어딘가이 있다는 점이 다를 뿐!
- 부트스트랩에서 가져온 코드가 부족하다면, 다른 코드를 내가 만들어서 중첩시키거나 div로 묶어서 변형시키거나 하면 됨
<!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>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
- 자신이 원하는 디자인을 찾아 copy해서 코드를 <body>~</body>안에다 넣어주면 import됨
- 만약 부분적으로 원하는 부분만 찾아서 뽑아 쓰고 싶다면 [오른쪽클릭>검사>코드에 마우스를 얹어 보면 해당 html 코드가 뭔지 색깔로 표시가 뜸]
- 필요한 부분을 찾았으면 코드를 잘 접어서 구분한 뒤에 나머지는 지워버리거나 복붙해서 사용!
- src부분은 image태그를 넣으면 됨> 구글링해서 이미지 찾은뒤 [이미지주소복사]해서 넣기
- 전체적으로 페이지를 구성했는데 크기를 조정하고 싶다면?
- 일일이 하나씩 옮기는 것 보다 <div>로 내가 아까 가져온 코드들을 묶어주기
- class를 붙여주고 <head></head>안에다가 <style></style>태그를 만들어서 수정해주기
<전체코드>
<!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>
<style>
.wrap{
width: 900px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</body>
</html>