기본 구조
웹사이트 기준으로 서버/클라이언트 구조에서는 다음과 같은 구조를 가진다.
<클라이언트>
브라우저
<서버>
Front-end (앞단에서 보이는 쪽, 즉 눈에 보이는 부분) : html , css
Back-end (뒤에서 일하는 쪽, 즉 눈에 보이지 않는 부분) : 데이터 관리, 즉 전송/저장/수집/가공 등을 수행
Front-end 단의 언어
HTML (hypertext markup language)
사이트의 뼈대를 만든다.
CSS
사이트를 실제로 꾸미는 역할 . 폰트크기, 색깔 , 기타등등
Bootstrap
꾸미는 것을 미리 만들어놓은 것. (framework) CSS를 예쁘게 꾸밀 수 있는것을 어느정도 미리 만들어 놨음. 가져다 쓰면 됨
Javascript
뼈대를 움직이게 한다. 브라우저가 유일하게 알아듣는 언어이다. (이렇게 움직여줘, 이렇게 그려줘 등)
HTML
* HTML 구조
- HEAD, BODY 로 구성됨.
HEAD : 웹페이지의 속성 정보(meta; 구글에서 페이지 정보를 가져감), CSS, JAVASCIPT 등
BODY : 웹페이지 내용
아래는 파이참에서 HTML를 만들면 기본적으로 주는 형식이다.
<!DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8"> (글자형식)
<title>Title</title> (제목)
</head>
<body>
</body>
</html>
* 태그
- 기본 폼 : <태그이름 세부속성="속성값"> 내용 </태그이름>
- 태그는 여는 태그와 닫는태그로 이루어짐. <태그이름> </태그이름>
- 하나의 태그만 있는 것도 있음. 위에 <metacharset> 등
- 태그는 아주 많은데 개발자들이 모두 외우고 있지 않다. 필요할 때마다 구글에서 검색하면 된다.
기본 태그 정보
<meta>
상세히 알..필요가 있는지 모르겠다. 메타데이터?
<title></title>
웹페이지의 제목이다. 구글에서 검색할 때 관련이 있다.
<style></style>
head 태그에 들어가며, 꾸미는 것들은 다 style 태그에 들어가는게 일반적이다. CSS도 style 태그에 들어간다.
<div></div>
html에서 매우 중요한 역할을 한다. 뼈대가 되기 때문.
구역을 나눈다. 속성을 주지 않으면 어떻게 나뉘었는지 보이지 않는다.
구역을 나누는 이유는, 해당 구역의 폰트,글씨크기 등을 한번에 적용할 수 있다.
div를 잘 해놔야 나중에 수정할 때 편하다.
div는 중첩될 수 있다. 상위에서 하위 요소를 감싸고 있는 요소를 부모, 하위에 있는 요소를 자식이라고 한다.
빨간색 div는 부모이며, 녹색과 파란색 div는 자식이다.
여기서 빨간색 div 내용을 바꾸거나, 정렬을 바꾸는 등의 설정을 하면, 녹색, 파란색 div 안에있는 내용은 바뀌지 않고 그대로 유지된다. 즉 가장 안쪽에 있는 내용을 적용한다. 만약 파란색 div에 아무 설정을 하지 않으면, 빨간색 div의 설정을 따라간다.
* 예시 : 백그라운드 컬러 중첩
<head>
<style>
.bg-aqua {
background-color: aqua;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.bg-gray {
background-color: gray;
}
.bg-yellow {
background-color: yellow;
}
</style>
</head><body>
<div class="bg-gray">
<div class="bg-yellow">
<div class="bg-aqua">
<p>ID : <input type="text"/></p>
</div>
<div class="bg-green">
<p>PW : <input type="password"/></p>
</div>
</div>
<div class="bg-red">
<button>로그인하기</button>
</div>
</body>
여기서 버튼 부분에 bg-red 클래스를 없애면, 다음과 같이 나온다.
부모 div가 gray이므로 해당 색깔을 따라가는 것.
<p></p>
문단. 아랫줄이 한 줄 띄어진다.
<ul></ul>
리스트를 만들어 준다. 아래에 <li></li> 태그가 들어간다.
<ul>
<li> bullet point!1</li>
<li> bullet point!2</li>
</ul>
<h1></h1>
"제목"을 나타내는 태그. 단순히 크고 굵은 글씨가 아니다.
페이지마다 하나씩 꼭 쓰는것이 좋다. 구글 검색과 연관이 있다.
<h2></h2>
소제목을 나타낸다. 이 숫자에 따라 제목 크기가 작아진다.
<h3~6></h3~6>
다 각자의 역할이 있는데, 크게 사용성이 크진 않다.
<hr>
수평선을 그려준다. 단순히 <hr>만 넣으면 된다.
<span></span>
특정 글자를 지정할 때. 예를들어 꾸밀 때 쓴다. 정확하게 뭔지 모르겠다.
<img src="주소"/>
이미지 태그. 주소는 구글링 등으로 검색된 이미지의 주소를 넣거나 로컬 주소를 넣을 수 있다. 또한 아래 예시처럼 alt 라는 속성이 있는데, 이 속성은 해당 이미지가 깨지는 경우 이미지 대신 나오는 글귀이다.
<a href="주소">내용</a>
하이퍼링크를 만든다. 내용 부분을 클릭하면 해당 주소로 이동한다.
<input type="text"/>
글자를 입력받을 수 있는 공간을 만든다. type 부분에 text나 password 등의 형식을 넣을 수 있다.
<button></button>
버튼 태그. 누를 수 있는 버튼을 만든다.
<textarea>hello world</textarea>
글을 쓰는 칸을 만든다. 사이즈도 마우스로 조정이 가능하다.
html 실습예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<div>
<p>ID : <input type="text"/></p>
<p>PW : <input type="password"/></p>
</div>
<button>로그인하기</button>
</body>
</html>- div 안에 ID, PW 두 라인이 묶여있다. 예를들어 ID, PW 줄을 가운데 정렬 하려면, DIV를 수정하면 된다.
- PW에서 *로 표시된 부분을 보이게 하려면 태그만 바꿔주면 쉽게 할 수 있다. password -> text로 바꾸는 식으로.
CSS
Cascading Style Sheet의 약자로, html에 디자인 요소를 (꾸미는) 언어인데, 꾸밀려면 선택을 해야 한다. 그래서 selector (선택자) 라는 요소를 사용한다. class의 이름은 자유롭게 지을 수 있고, 역할에 맞춰 잘 지어야 한다.
예를들어, mytitle이라는 이름표를 만들고, 그 이름표에 빨간색이라는 요소를 넣은 다음, html의 태그들에 mytitle 이름표를 붙이면, 해당 html 태그들에는 모두 빨간색이 적용되는 식이다.
선택자 사용하기
1. 선택자를 정의하고 : <head> 태그 안에, <style> 태그를 만들고, 그 안에 명시한다. 즉, 클래스를 만든다. 이러한 클래스를 여러개 만들려면 그대로 <style> 태그 안에 동일한 형식으로 쭉 만들면 된다.
.red-font {
color: blue;
}# 참고 : 자주 사용되는 선택자
선택자 안의 속성 (color 등)의 종류를 모두 알 필요는 없고, 필요할때마다 찾아서 해도 충분히 원하는 대로 만들 수 있다. 아래는 대표적인 예시이다.
|
|
background-color |
|
|
background-image |
이미지의 경로를 넣는다. 해당 이미지는 백그라운드 이미지가 된다. |
|
|
background-size |
background-size: cover; 해당 이미지를 커버모드로 사용. 그림 사이즈에 따라 그림 모양을 맞춘다. |
|
|
background-position |
||
|
background-image: url("경로") background-size: cover; background-position: center; 이 3줄은 그냥 세트로 다닌다고 생각하면 됨. 경로만 바꿔서 사용한다. |
||
|
속성
|
width |
width: 300px; 그림의 너비 |
|
height |
height: 300px; 그림의 높이 |
|
|
border-radius |
border-radius: 10px; 개체의 모서리를 깎아준다. |
|
|
border |
개체의 테두리를 만든다. 아래 속성의 순서는 상관없다. |
|
|
글자관련 |
font-size |
|
|
font-weight |
||
|
font-family |
||
|
color |
폰트의 색깔을 설정한다. |
|
|
text-align |
text-align:center; 글자를 가운데 정렬한다. |
|
|
간격 |
margin |
요소의 외부 여벽 (요소와 화면과의 여백). 즉 그림의 외부 여백. 해당 요소 자체가 적용받는 여백. margin:10px auto; 위에는 10픽셀만, 양옆아래는 자동으로 margin : 해당 개체 밖의 여백, 위 오른쪽 아래 왼쪽; margin: 20px 20px 20px 20px; |
|
padding |
요소 내부의 여백. 즉 그림의 내부 padding: 해당 개체 안의 여백. 값 1개만 쓰면 위 오른쪽 아래 왼쪽 모두 적용된다. padding: 20px 20px 20px 20px; (위 오른쪽 아래 왼쪽) |
|
[CSS] 자주 사용되는 스타일 시트 속성 정리
웹기술이 발전하면서 동적이고 화려한 웹페이지가 등장하게 되었습니다. 특히 웹기술 중에서 CSS는 자바스크립트와 더불어 웹페이지의 각종 동적인 속성을 지정할 수 있는 간단한 스크립트입니
www.walterz.net
2. 태그에 선택자를 적용한다 : <body> 태그 안에 원하는 태그에 적용한다.
<h1 class="red-font">로그인 페이지</h1>아래 예시에서는 .red-font 라는 클래스 선택자를 만들었고, h1과 div 태그에 해당 클래스 선택자를 적용했다.
# 참고 : 용어의 정의
클래스(class) : CSS에서 .xx { } 의 형태를 클래스라고 한다. (클래스 만들 때 이름 앞에 .을 꼭 붙여야 한다!)
선택자(selector) : html 태그를 선택해 꾸미기 위한 방법. 이러한 클래스 앞에 선택자 이름이 붙고, 그 이름으로 태그를 선택해서 꾸민다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
.red-font {
color: blue;
}
</style>
</head>
<body>
<h1 class="red-font">로그인 페이지</h1>
<div class="red-font">
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</html>
만약 아래처럼 color를 red로 바꾸면, h1과 div 태그 모두 붉은색으로 바뀐 것을 알 수 있다.
<style>
.red-font {
color: red;
}
</style>
# 참고
여기서 색깔은 red, blue, green 등 여러가지 정의된 색깔명이 있다. 찾아서 쓰면 된다. 파이참에서는 아래와 같이 찾을 수 있다.
여러가지 선택자
가독성 있는 코드를 위해 현업에서는 규칙/상황에 따라 다양한 선택자를 사용하며, 여기서는 대표적으로 중요한 것만 써본다.
1. 전체 선택자 (*)
HTML 페이지 내부의 모든 태그를 선택
* {
margin: 0;
text-decoration: none;
}
2. 태그 선택자
HTML 페이지 내부에서, 해당 선택자에서 명시한 태그를 모두 선택 (예시에서는 p태그)
p {
background: yellowgreen;
color: darkgreen;
}
<!-- HTML -->
<p>태그 선택자(Type Selector)</p>
3. 클래스 선택자
class1라는 클래스를 가진 모든 태그에 적용된다.
.class1 {
background: yellowgreen;
color: darkgreen;
}
<p class="class1">케이스1</p>
<p class="class2">케이스2</p>
4. 자식 선택자
div 태그 중 class2 라는 클래스를 가진 태그에 적용된다.
div.class2 {
background: darkgreen;
color: yellowgreen;
}
<div class="class2">케이스3</div>
한 태그에 선택자 여러개 사용하기
여러개의 선택자를 만들었다면, 태그에 단순히 띄어쓰기 후 추가하면 된다.
<style>
.red-font {
color: blue;
}
.big-font {
font-size: 50px;
}
</style>
<h1 class="red-font big-font">로그인 페이지</h1>
예시 : 여러가지 css 사용해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
.login-title {
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="login-title">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</body>
</html>
예시 : 같은 내용인데, 전체 내용을 옮겨보자.
- 위 예시에 새로운 클래스를 만들고 wrap이라는 선택자 이름을 주었다.
- body에는 div를 하나 더 만들어 내용 전체를 감싸고, wrap 클래스를 적용했다.
- wrap에 width를 300 넣은 이유는, 해당 div 부분 자체의 사이즈 300을 만들고 (이 안에 그림, 글자가 있다) 이 width 300짜리 div를 가운데 정렬하는 방식을 사용하기 위함임.
- margin과 padding을 정확히 이해하려면 백그라운드 컬러를 적용하면 이해가 쉽다.
어떤 내용모음의 위치를 변경하려면, div로 묶은다음, 그 div에 margin이나 padding을 주면 된자.
백그라운드 컬러를 주고 div로 나누면 이렇게 된다.
이걸 사이즈를 변경한다. width로. 그럼 이렇게 사이즈가 줄은다.
이걸 margin 으로 가운데 이동하면 되며, 가운데는 auto 이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인페이지</title>
<style>
.login-title {
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;
}
.wrap {
margin: 10px auto;
width: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="login-title">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</div>
</body>
</body>
</html>양옆은 가운데, 위는 10픽셀이 적용되었다.
구글 웹폰트 적용하기
- 구글 웹폰트는 저작권 상관없이 자유롭게 사용가능하다.
1. 구글 웹폰트 사이트에 들어가서 마음에 드는 폰트 선택
https://fonts.google.com/?subset=korean
2. 원하는 스타일을 선택한다.
3. 오른쪽과 같은 화면이 나오면, Embed를 선택한다.
4. 홈페이지에 삽입하기
Embed 부분 아래에 link를 복사하여, 홈페이지의 <head></head> 사이에 삽입한다.
<head>
<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
</head>또한, CSS가 들어가는 <style> 부분에 원하는 범위만큼 CSS rules를 넣는다. (아래 예시에선 전체 태그에 대해 적용했다)
* {
font-family: 'Stylish', sans-serif;
}5. 결과
다음과 같이 모든 글자가 적용되었다.
CSS 파일을 따로 만들기
예시에서는 html 파일에 CSS 내용을 모두 포함했으나, 사이트가 커지고 내용이 많아지면 복잡해지므로, CSS 부분만 따로 파일로 만들어서 연결할 수 있다.
1. CSS 내용만 뽑아 파일명.css 로 파일을 생성한다. (<style> 태그도 없다)
파일명 : design.css
.login-title {
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;
}
.wrap {
margin: 10px auto;
width: 300px;
background-color: green;
}
* {
font-family: 'Nanum Myeongjo', serif;
}2. 만든 CSS 파일을 적용하기
- 해당 CSS 파일을 적용할 html 파일의 <head> 안에 다음 구문을 삽입한다.
- href 부분에 CSS파일의 위치를 넣는다. 만약 해당 html 파일과 같은 경로게 있다면 CSS파일의 파일명만 명시하면 된다.
<link rel="stylesheet" type="text/css" href="design.css"/>- 참고로, 폰트태그는 따로 CSS파일에 넣을 수 없으므로 html 본파일의 <head>에 삽입해야 한다.
CSS 연습하기
CSS 선택자 연습하기 (난이도:별1)
CSS 컬러링 북
CSS 파일의 속성값을 수정해 색깔을 칠해보자. (난이도:별1)
https://codepen.io/Lubna/pen/zYYzOxN
https://codepen.io/Lubna/pen/dyoqzwP
https://lubna.dev/articles/colouring-with-code/
CSS의 속성 중 하나인 flexbox를 게임으로 배워보자 (난이도:별3)
부트스트랩
css 템플릿을 모아놓은 일종의 디자인 키트. 미리 만들어진 디자인들을 가져다 쓸 수 있다. 이런 개념을 더 정확히 말하면, Front-end framework 라고 한다. 트위터에서 만든 것이다. 한마디로, 다른 사람이 미리 작성한 CSS를 내 HTML파일에서 적용하게 된다. 이런 차원에서 부트스트랩 적용은 CSS 파일을 따로 분리해놓은 것과 원리가 동일하다. 다만 CSS파일을 부트스트랩에서 받는다는 것이다.
개발자들이 활용하는데 매우 좋다. 부트스트랩 외에도 다른 종류가 많이 있다. CSS를 다룰 줄 아는 것과 예쁘게 만드는 것은 다르다. 개발자들도 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다. 다음 절차대로 부트스트랩을 사용해보자.
1. 부트스트랩 코드를 <head>에 적용한다.
이 내용은 부트스트랩 공식내용 https://getbootstrap.com/docs/4.0/getting-started/introduction/ 에서 starter templet을 참고했으며, javascript 내용 부분이 약간 다르다. 이건 스파르타에서 준 것이다.
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS 부트스트랩에서 제공하는 CSS를 import 한 것-->
<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 필요할 때 쓸 javascript를 import 한 것-->
<!-- 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>여기서 <link> 함수를 보면 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css 부분이 있다. 이 CSS파일이 부트스트랩에서 제공하는 전체 CSS 내용들이다. 한번 들어가보자. 들어갈 땐 min을 빼고 들어가보자.
여기 보면 뭔가 엄청 많은데, 이게 다 CSS들이다. 이걸 참조해서 내 사이트에 적용하는 것이다. 실무에서 부트스트랩을 사용하는 경우, 성능때문에 부트스트랩 전체를 로딩하지 않고 필요한부분만 빼오거나, 직접 만드는 css를 쓰는 경우가 많다.
2. 부트스트랩 사이트에서 원하는 CSS를 찾는다.
https://getbootstrap.com/docs/4.0/components 에 접속하면, 다음과 같은 사이트가 나온다. 오른쪽에 보면 Components라는 항목이 있고, 아래에 여러가지가 있다. 얼럿, 뱃지, 버튼, 카드, 폼 등등.. 이런 요소들이 모두 HTML 홈페이지에서 사용하는 것이다.
# 참고 : 부트스트랩에서 개체 가져올 때
부트스트랩에서 한 개체를 받고, 개체를 수정하는 경우, 한 라인만 삭제하지 않을 수도 있음. 잘 보고 삭제하자. 새로운거 넣을때도 잘 보고 넣어야 함.
3. 찾은 CSS를 넣어서 적용해본다.
예시로, Buttons에 들어가보자. 다음과 같은 화면이 나오며, 여러가지 버튼들을 사용할 수 있다. 원하는 것을 복사해보자.
여기서는 파란색 Primary 버튼을 복사했다. Primary 부분을 원하는 대로 글자를 넣고 아래 스크립트를 <BODY> 태그 안에 넣어보자. 즉, 아래처럼 된다.
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS 부트스트랩에서 제공하는 CSS를 import 한 것-->
<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 필요할 때 쓸 javascript를 import 한 것-->
<!-- 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>
<button type="button" class="btn btn-primary">안녕하세요</button>
</body>
</html>
이 코드를 실행하면 다음과 같이 나오게 된다.
<button type="button" class="btn btn-primary">안녕하세요</button>이 버튼은 btn, btn-primary 라는 class가 적용된 것이다. 이 class는 위의 부트스트랩 링크에서 가져온 것이고.
다른 예로, 카드는 이런 모양이다.
코드는 다음과 같다. 이 코드가 위의 카드를 만드는 것이다. 잘 보면, div로 시작해서 div로 끝난다. 하나의 객체로 이해할 수 있다.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
부트스트랩을 사용하여 html, CSS를 활용한 페이지 예시 만들기
<!doctype html>
<html lang="ko">
<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">
<!-- 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>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩으로 나홀로 메모장 만들기</title>
<!-- style -->
<style type="text/css">
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
.post-box {
width: 500px;
margin: 20px auto;
padding: 50px;
border: black solid;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="form-post post-box">
<div>
<div class="form-group">
<label for="exampleFormControlInput1">아티클 URL</label>
<input class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" rows="2"></textarea>
</div>
<button type="button" class="btn btn-primary">기사저장</button>
</div>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>참고로, 부트스트랩에서 가져올 때 <form> 태그는 안에 버튼이 있으면 자동으로 새로고침이 되므로, 이 기능은 쓰지 않으니 <div> 태그로 바꿔준다.
자바스크립트
자바스크립트는 html 화면에 동적인 움직임을 줄 때 사용한다. 버튼을 클릭했을 때 색이 바뀌거나, 경고창이 뜨거나, div박스를 숨기는 등 여러가지 역할을 수행할 수 있다.
자바스크립트는 프로그래밍 언어로, 웹 브라우저가 해석할 수 있는 언어이다. 짧게 js 라고 표시하기도 한다. 왜 브라우저에서 자바스크립트만 사용하냐면 (파이썬이나 자바 등의 언어를 쓰면 안되나), 역사적이유와 이미 만들어진 표준이기 때문 모든 브라우저는 기본적으로 자바스크립트를 알아듣게 설계되어 있음.
또한 모든 웹서버는 클라이언트가 서버에 요청하면 서버는 HTML+CSS+Javascript를 응답(response) 데이터로 주게 되어있다.
* 기본 사용 형식
1. 에 자바스크립트 함수 삽입하기
<script>
function sayHello(){
alert('안녕!');
}
</script>
2. 자바스크립트 함수 적용하기
## 원래 버튼
<button type="button" class="btn btn-primary">안녕하세요</button>
## 버튼에 아래 함수를 적용한다.
onclick="sayHello()"
## 다음과 같이 된다.
<button onclick="sayHello()" type="button" class="btn btn-primary">안녕하세요</button>
* 예시코드
이 예시는 안녕하세요 버튼을 누르면 안녕!이라는 메시지를 출력한다.
<!doctype html>
<html lang="ko">
<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">
<!--Javascript-->
<script>
function sayHello() {
alert('안녕!');
}
</script>
<title>자바스크립트 테스트</title>
</head>
<body>
<button onclick="sayHello()" type="button" class="btn btn-primary">안녕하세요</button>
</body>
</html>
# 참고 : JS 코드를 적용하는 2가지 방법
- CSS와 마찬가지로 JS파일을 따로 분리하고 HTML 코드에 추가해서 사용
- </body> 바로 직전에 <script></script> 코드를 사용
여기 예시에서는 head에 JS 코드를 넣어도 실행하는데 큰 문제가 없어 가독성을 위해 <head> 안에 넣음.
* 프로그래밍의 기본 요소. 일단 이것만 알면 반은 들어간다.
- 변수
- 자료형
- 함수
- 반복문
- 가정문
# 참고사항 : 자바스크립트 문법
- 자바스크립트에서 = 은 같다가 아니고 "오른쪽에 있는 것을 왼쪽에 넣어라" 라는 뜻임. (대부분의 프로그래밍언어가 비슷)
- 세미콜론은 한 줄의 마무리이다.
변수
* 기본형식
- 변수는 값을 담는 상자이다.
- 자바스크립트에서 변수 선언은 let 을 사용한다.
let 변수명 = 넣을내용;- 한 번 변수를 선언했으면, 다시 선언할 필요 없고 계속 변수를 사용하면 된다.
- 숫자는 그냥 넣으면 되고, 문자는 따옴표 또는 쌍따옴표를 포함해야 한다.
- 변수명을 입력하면, 그 변수에 들어간 값이 출력된다.
- 예시
* 연산
- 사칙연산이 기본적으로 가능하며, 문자열을 더할수도 있다.
부울형식
참 거짓, 즉 true/false를 나타내는 자료형이다. 주로 조건문과 함께 쓰인다. 비교연산자를 사용하면, 비교를 해서 true/false를 출력한다.
비교연산자는 >, <, ==(같다), !=(다르다) 등이 있다. 참고로 !는 not 이다. 다른곳에서도 사용됨.
리스트
자료(Data)를 담는 형태(type) 중 하나. 가장 많이 쓰이는 자료형 중 하나임. 리스트는 순서가 있고 순서대로 값을 가지는 형태이다. 각 값들은 순서를 가지며 순서는 앞부터 0으로 시작한다. 즉 0,1,2,3,4 .. 이렇게 시작한다.
* 리스트 선언
[ ] 를 사용해서 선언한다.
let sampleList = []; // 빈 리스트 만들기
let mltiList = [1, 2, 'hello', 4];
* 리스트 특정 내용 출력하기
* 리스트에 값 추가하기
push 함수를 사용하며, 맨 뒤부터 순서대로 값이 들어간다.
참고로 빼는 건 pop() 이다. 항상 맨 끝에 있는 값을 빼므로 특정 값을 명시할 필요는 없다.
* 리스트의 길이 구하기
반복문에서 유용하게 쓰인다. length 함수를 사용한다.
* 리스트에 리스트 넣기
1. 리스트를 2개 선언한다.
2. push() 함수를 이용하여 리스트에 리스트를 넣는다.
numberList 리스트에 charList 라는, 6개의 어레이를 가진 하나의 개체가 맨 뒷부분에 들어갔다.
3. 리스트에 들어간 리스트에 접근하기
다음과 같이 numberList[6]의 [0]번째, [4]번째 등을 접근할 수 있다.
딕셔너리
"키-밸류" 형태의 값 쌍을 넣는다. 예를들어 "단어-뜻" 이런 형태로 들어가게 된다.
* 선언하기
중괄호를 사용하여 선언한다. 딕셔너리를 만들고 확인할때는 '키'를 선택하면 그에 맞는 '밸류'가 나온다. 밸류를 명시했을 때는 맞는 키를 확인할 수 없다. 즉 '키'가 메인이다.
let sampleDict = {}; // 빈 딕셔너리 만들기
let sampleDict = {'name' : 'james', 'age' : 44}
* 키의 밸류값 바꾸기
변수처럼, 해당 "키값 = 밸류값" 형태로 넣으면 된다.
* 딕셔너리에 값 추가하기
밸류값 바꾸는 형식과 동일한데, 키도 새로운 키를 넣으면 된다.
* 리스트와 딕셔너리를 조합하기
1. 딕셔너리에 -> 리스트 추가
형식은 동일하며, 딕셔너리에 어레이를 추가할 수 있다. 다음과 같이 실행된다.
2. 리스트에 -> 딕셔너리 추가
딕셔너리는 순서가 없으므로, 리스트와 딕셔너리를 조합해서 순서가 있는 딕셔너리를 만들 수 있다. 리스트에 딕셔너리가 조합되면 리스트에 push를 해서 추가할 수 있다. 이렇게 자료형을 연계해서 쓰는 이유는 관리의 용이성, 가독성, 코드효율성 등을 위해서이다.
예를들어, 가게에서 대기표를 작성하기 위해 이름과 전화번호를 기록하는데, 변수만 쓰면 다음과 같이 복잡하다.
let customer1Name = '김스파';
let customer1Phone = '010-1234-1234';
let customer2Name = '박르탄';
let customer2Phone = '010-4321-4321';
하지만 딕셔너리를 사용하면, 다음과 같이 고객별로 정보를 묶을 수 있다. 물론 값은 최대 2개의 종류 (이름,전화번호)이지만.
let customer1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer2 = {'name': '박르탄', 'phone': '010-4321-4321'};
여기다가 리스트까지 포함하면, 매우 깔끔하고 간단하다. 거기에 추가를 한다면 간단하게 push로 할 수 있다.
let customers = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
다음 예시는 wizards 라는 리스트에 0번에는 이름:해리포터, 나이:40 이라는 딕셔너리를 넣고, 1번에는 이름:론위즐리, 나이:40 이라는 딕셔너리를 넣은 것이다.
리스트에 새로운 딕셔너리 값을 추가하려면, 다음과 같이 딕셔너리를 선언하고, 선언한 딕셔너리를 해당 리스트에 push() 함수로 입력한다.
함수
사칙연산 외에도 여러가지 제공하는 함수들이 있다. 또 직접 만들수도 있다. 왠지 이건 있을 것 같은? 것들, 예를들어 대문자의 갯수만 센다던지.. 그런것들은 구글링하면 있을 수 있으니 굳이 직접 만들 필요는 없다.
또한 미리 구현된 함수는 아래처럼 구문 중 . 을 넣어서 목록을 볼 수 있다. 그외에도 더 있는 듯 함.
* 예시 : 나눗셈의 나머지를 구하는 연산자
% 연산자. 나머지를 출력한다.
나머지를 구하는 기능은, 예를들어 짝수면 액션 A를 하고, 홀수면 액션 B를 해라 이런 식의 조건에서 많이 사용된다. 2로 나눠 나머지가 1인지 0인지로 확인할 수 있다. 즉 num % 2 == 0 의 결과가 참이될려면 num이 짝수여야만 한다. 이런식으로 사용된다.
아니면, 나머지가 0이면 a로, 나머지가 1이면 b로 나머지가 2이면 c로 이런식으로 분배하는 코딩에서 사용할 수 있다.
* 예시 : 모든 알파벳을 대문자로 바꾸는 함수
toUpperCase() 함수는 모든 알파벳을 대문자로 바꿔준다.
* 예시 : 문자열을 나누는 함수
split() 함수는 문자열에서 특정 문자를 기준으로 둘로 나눈다. 예를들어, testmail@gmail.com 에서, @을 기준으로 나누면 testmail , gmail.com 두개가 생기게 된다. 이렇게 생긴 결과는 순서대로 리스트로써 변수에 들어간다. @는 삭제된다.
만약 여기서 리스트를 만들지 않고 naver.com만 딱 찍어내고 싶다면, let splitResult2 = mailAdd.split('@')[1]; 로 하면 된다.
만약 딱 naver까지만 찍어내고 싶다면? let splitResult3 = mailAdd.split('@')[1].split('.')[1]; 이렇게 하면 된다.
이런식으로 만들면 이메일에서 특정 문자만 추출하는 함수 등을 직접 만들어 볼 수도 있다.
* 예시 : 문자열을 합치는 함수
join() 함수는 특정 문자로 합치는 함수이다. 다음과 같이 특정 문자, 여기서는 '-'로 문자들을 합쳤다. '-' 문자가 새로 생기게 된다.
함수 만들기
함수는 수학의 함수가 아닌, 정해진 동작을 수행하는 모듈 이라고 생각하면 좋다. 이렇게 함수를 만들어 쓰는 대표적인 이유 중 하나는 "재사용" 때문이다.
* 함수를 만들고 사용하는 기본 틀
// 만들기
function 함수이름(필요한 인수들) {
내릴 명령어들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);* 예시 : 두 숫자를 입력받으면 곱한 결과를 돌려주는 함수
function multiply1(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 * num2;
}
함수에 따라 return 항목이 있을수도 있고 없을수도 있다. return이 없으면 함수 내부에서 모든게 끝나며 결과로써는 아무것도 보이지 않음. 또한 인수를 받지 않는 경우도 있음. 인수는 여러개를 받는다면, 순서대로 넣어야 한다. 따라서 사용자가 순서를 알 수 있도록 잘 명시해야 한다.
* 숙제와 답
아래 레이아웃대로 만들기. 주문하기 버튼을 눌렀을 때 "주문이 완료되었습니다" 알림이 떠야 한다.
숙제는 내가 한 파일 참고
답 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Webpage Title -->
<title>나홀로 쇼핑몰</title>
<!-- 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">
<!-- 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>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<style type="text/css">
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 500px;
margin: auto;
}
.img {
background-image: url('https://www.conscious-skincare.com/wp-content/uploads/2016/02/glc-candle-lit-with-new-gift-box.jpg');
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
}
.info {
margin-top: 20px;
margin-bottom: 20px;
}
h1, h5 {
display: inline;
}
.order {
text-align: center;
}
.orders {
margin-top: 100px;
}
</style>
<script>
function order() {
// 여기에 코드를 작성하세요.
}
</script>
</head>
<body>
<div class="wrap">
<div class="img"></div>
<div class="info">
<h1>양초를 팝니다</h1>
<h5>가격: 3,000원/개</h5>
<p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주 좋아요</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주문자 이름</span>
</div>
<input type="text" class="form-control" id="order-name">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text">수량</label>
</div>
<select class="custom-select" id="order-count">
<option selected value=""> -- 수량을 선택하세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주소</span>
</div>
<input type="text" class="form-control" id="order-address">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">전화번호</span>
</div>
<input type="text" class="form-control" id="order-phone">
</div>
<div class="order">
<button onclick="order()" type="button" class="btn btn-primary">주문하기</button>
</div>
</div>
<div class="orders">
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">수량</th>
<th scope="col">주소</th>
<th scope="col">전화번호</th>
</tr>
</thead>
<tbody id="orders-box">
<tr>
<td>박르탄</td>
<td>10000</td>
<td>르탄시 코딩구 열심동</td>
<td>010-1234-5678</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
'SCC 9기' 카테고리의 다른 글
| [SCC 9기] 4주차 (0) | 2020.08.11 |
|---|---|
| [SPC 9기] 3주차 (0) | 2020.07.25 |
| [SPC 9기] 2주차 (0) | 2020.07.24 |
| [SCC 9기] 개발자를 위한 팁 (0) | 2020.07.16 |
| [SPC 9기] 0주차 - 사전준비/과제 및 이론수업 (0) | 2020.06.11 |