[ 서버 / 클라이언트 / 웹의 동작 개념 ]
서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
Javascript 기초 문법을 익힌다.
- 서버와 클라이언트간의 간단한 원리!
HTML = 뼈대, CSS = 꾸미기, JS = 동작
[ 필수 프로그램 설치 및 환경 구성 ]
- Pycharm Professional 설치
(꼭 Pycharm으로 사용할 필요 없음, 본인이 자신있게 사용가능한 python 환경이 있다면 무방, 단 스스로 환경을 조정, 관리 할 수 있는 능력이 있어야 함.. ^^)
https://www.jetbrains.com/pycharm/download/
Download PyCharm: Python IDE for Professional Developers by JetBrains
Download the latest version of PyCharm for Windows, macOS or Linux.
www.jetbrains.com
- JetBrains 회원가입
https://account.jetbrains.com/login
(개인적으로 구글 계정으로 로그인, 초기 패스워드 설정,
JetBrains Account
account.jetbrains.com
- PyCharm 무료 구매(spartacodingclub 회원만 4개월간 무료 사용 가능 코드 제공)
- PyCharm 재 실행 후 라이선스를 프로그램에 등록한다.
JB Account로 선택, 로그인 후 Activate 버튼 눌러서 활성화
- JetBrains에서 라이선스 확인
https://account.jetbrains.com/login
JetBrains Account
account.jetbrains.com
- AWS 가입(5주차 때 사용을 위해 - 미리 승인 절차)
신용카드 등록 등의 절차가 진행된다. 사용 전에 결재되지 않으니, 참고.
정상적으로 등록 절차 및 가입 절차가 완료되면 로그인을 통해서 계정이 정상적인지 확인
(사실 Azure나 GCP 등 다른 public cloud platform으로도 가능하며, 이후에 Azure 계정으로 진행하는 부분을 업데이트 할 예정임.)
(개인적으로 회사에서 무료 AWS 계정이 있음으로 회사 계정을 이용하여 진행 할 예정)
[ HTML, CSS 기본 내용 ]
- HTML 기초
본인이 교육에 사용할 작업공간을 위한 디렉토리(폴더)를 만들어 준다
난 D:\SPARTA_WEBDEV_WEEK1 에 생성. 그 아래에 frontend 디렉토리(폴더)를 더 만들어준다.
- Pycharm에서의 초기 실행
Pycharm을 실행시켜서 좌측메뉴의 Plugins(구 프로그램에서는 초기화면의 아랫쪽 configure 버튼에서 plugins 드롭다운 메뉴로 선택)로 이동하여 추가 plugin을 설치해 준다. 한국어 패키지인 Korean Language Pack을 마켓플레이스에서 선택해서 설치해 주고, 프로그램을 재 시작하자.
- 작업 공간 열기
PyCharm 초기 화면에서 사전에 만들어 놓은 폴더(디렉토리)를 선택해서 확인
신뢰를 선택하고 진행.
- 신규 html 파일 생성
prac.html 파일을 생성
- 기본적인 html 구문 기초 테스트
앞서 만들어 놓은 prac.html 파일에 아래의 내용을 업데이트 하고, 웹브라우저를 통해 확인해 본다.
해당 파일은 기본적인 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>
[ Quiz. 간단한 로그인 페이지 만들어보기 ]
- 간단한 로그인 페이지를 만들어보자
완성된 페이지는 아래와 유사하다.
- 신규 html 파일을 만들자.
login.html 파일을 기존 프로젝트 작업 공간내에 추가로 생성하고, 아래의 코드를 입력해서 내용과 실제 브라우저 화면의 변화를 확인한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button> 로그인하기 </button>
</body>
</html>
[ CSS 기초 ]
- HTML을 꾸미기
스타일을 적용할 대상(html 문서상 body내의 모든 오브젝트들)에 이름표(class 지정)를 붙이고, <style></style> tag내에 해당 이름표의 스타일을 지정 또는 별도의 css 파일에 내용을 표기 후 적용.
아래는 간단히 H1 tag내에 style을 적용하는 예제.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mytitle {
color : red
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button> 로그인하기 </button>
</body>
</html>
[ 자주 쓰이는 CSS 연습하기 ]
- HTML을 꾸미기
스타일을 적용할 대상(html 문서상 body내의 모든 오브젝트들)에 이름표(class 지정)를 붙이고, <style></style> tag내에 해당 이름표의 스타일을 지정 또는 별도의 css 파일에 내용을 표기 후 적용.
아래는 간단히 H1 tag내에 style을 적용하는 예제.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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: 40px;
}
.wrap {
/*background-color: green;*/
width: 300px;
margin: auto;
}
/*.mybtn {
margin: 20px 20px 20px 20px; (margin은 바깥 여백을 표현, padding은 안쪽 여백을 가르킴)
margin: 20px; 위와 동일한 결과가 나옴.
}*/
</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"> 로그인하기 </button>-->
<button> 로그인하기 </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 버튼을 클릭해서 아래와 같은 화면이 나오면 오른쪽 <link> 부분의 내용중
<link href=https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"> 부분만 복사해 놓는다.
- 복사 해 온 폰트 링크를 html 코드 상에 포함
아래 그림과 같이 title tag와 style tag 사이에 넣어 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
- 동일 페이지에서 CSS rules to specify families 내용을 복사해서 style에 포함
아래 그림과 같이 복사 후 style tag내 가장 윗부분에 넣어 준다.
<style>
* {
font-family: 'Jua', sans-serif;
}
- 폰트 적용된 html 페이지
- 주석 달기
ctrl + / 또는 command + /
- CSS 내요을 파일로 분리
style tag의 내용을 작업 공간내 다른 .css 파일을 생성 후 그곳으로 복사 정리 후 저장 한 다음.
html 파일내 style tag의 내용은 모두 제거, head tag내 <link rel="stylesheet" type="text/css" href = "따로 생성한 .css 파일의 경로와 파일명"> 로 입력 후 저장하면 됨.
[ 부트스트랩, 예쁜 CSS 모음집 ]
- bootstrap 이란?
이쁜 CSS 셋을 미리 모아둔 것
- 실습을 위한 추가 html 파일 생성 및 업데이트
동일 작업 공간내 index.html 파일 생성
강의용 bootstrap 샘플 코드를 아래와 같이 기존 내용을 지우고 복붙.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
- bootstrap 컴포넌트 5.0 library 사이트 들어가기
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
- 특정 사전 정의된 샘플 코드 가져오기
Buttons의 Primary 샘플 버튼 코드 가져오기
- 테스트 코드 확인 및 결과
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<button type="button" class="btn btn-primary">나는 버튼이다</button>
</body>
</html>
[ CSS 꿀팁 한번 더 배우기 ]
- CSS 활용 - 스파르타 테스트 화면 만들기
CSS 적극적으로 사용해 보기.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
/*타이틀 전체의 컬러색을 그린으로 지정*/
background-color: green;
/*타이틀 구간의 높이를 250픽셀로 지정*/
height: 250px;
/*타이틀 구간의 넓이를 브라우저의 폭과 동일하게 100%로 사용*/
width: 100%;
/*항상 아래 세가지는 함께, 해당 오브젝트의 이미지를 특정 이미지로 채우고, 위치를 현재 있는 공간의 중앙으로 정렬함*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
/*항상 아래 네가지는 함께..*/
display: flex;
flex-direction: column; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: center;
align-items: center;
}
/*버튼의 스타일을 지정*/
.mytitle > button {
/*버튼의 크기를 설정*/
width: 200px;
height: 50px;
/*버튼의 배경을 투명하게 처리*/
background-color: transparent;
/*버튼 폰트의 색상을 흰색으로*/
color: white;
/*버튼의 외부선의 각진곳을 보다 부드럽게하고, 1픽셀의 굵기로 실선으로 흰색으로 칠해준다.*/
border-radius: 50px;
border: 1px solid white;
/*바로 위 컨텐츠와의 마진을 10픽셀 정도 띄운다.*/
margin-top: 10px;
}
/*버튼 위에 마우스가 올라가면 보더선의 굵기를 1 키운다.*/
.mytitle > button:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button >영화 기록하기</button>
</div>
</body>
</html>
- 코드 수행 결과
[ 본격 부트스트랩 써보기 ]
- CSS 활용 - 스파르타 테스트 화면 만들기
부트스트랩을 적극적으로 사용해 보기.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
/*타이틀 전체의 컬러색을 그린으로 지정*/
background-color: green;
/*타이틀 구간의 높이를 250픽셀로 지정*/
height: 250px;
/*타이틀 구간의 넓이를 브라우저의 폭과 동일하게 100%로 사용*/
width: 100%;
/*항상 아래 세가지는 함께, 해당 오브젝트의 이미지를 특정 이미지로 채우고, 위치를 현재 있는 공간의 중앙으로 정렬함*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
/*항상 아래 네가지는 함께..*/
display: flex;
flex-direction: column; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: center;
align-items: center;
}
/*버튼의 스타일을 지정*/
.mytitle > button {
/*버튼의 크기를 설정*/
width: 200px;
height: 50px;
/*버튼의 배경을 투명하게 처리*/
background-color: transparent;
/*버튼 폰트의 색상을 흰색으로*/
color: white;
/*버튼의 외부선의 각진곳을 보다 부드럽게하고, 1픽셀의 굵기로 실선으로 흰색으로 칠해준다.*/
border-radius: 50px;
border: 1px solid white;
/*바로 위 컨텐츠와의 마진을 10픽셀 정도 띄운다.*/
margin-top: 10px;
}
/*버튼 위에 마우스가 올라가면 보더선의 굵기를 1 키운다.*/
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.wrap {
width: 1200px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 코드 실행 결과
- 간단한 팁
특정 이모티콘의 활용
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
해당 사이트의 심볼들을 복사해서 html 코드내 자유롭게 활용 가능
[ Quiz. 포스팅박스를 완성하기 ]
- 부트스트랩과 html 코드를 이용한 포스팅 박스 생성 및 조정
아래와 같이 기본적인 웹페이지를 응용한 코드로 기존 페이지에 포스팅 박스를 생성해서 다양한 입력과 폼의 모양을 잡을 수 있도록 테스트 가능함.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
/*타이틀 전체의 컬러색을 그린으로 지정*/
background-color: green;
/*타이틀 구간의 높이를 250픽셀로 지정*/
height: 250px;
/*타이틀 구간의 넓이를 브라우저의 폭과 동일하게 100%로 사용*/
width: 100%;
/*항상 아래 세가지는 함께, 해당 오브젝트의 이미지를 특정 이미지로 채우고, 위치를 현재 있는 공간의 중앙으로 정렬함*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
/*항상 아래 네가지는 함께..*/
display: flex;
flex-direction: column; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: center;
align-items: center;
}
/*버튼의 스타일을 지정*/
.mytitle > button {
/*버튼의 크기를 설정*/
width: 200px;
height: 50px;
/*버튼의 배경을 투명하게 처리*/
background-color: transparent;
/*버튼 폰트의 색상을 흰색으로*/
color: white;
/*버튼의 외부선의 각진곳을 보다 부드럽게하고, 1픽셀의 굵기로 실선으로 흰색으로 칠해준다.*/
border-radius: 50px;
border: 1px solid white;
/*바로 위 컨텐츠와의 마진을 10픽셀 정도 띄운다.*/
margin-top: 10px;
}
/*버튼 위에 마우스가 올라가면 보더선의 굵기를 1 키운다.*/
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn {
margin: 10px auto 10px auto;
display: flex;
flex-direction: row; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: center;
align-items: center;
}
.mybtn > button {
margin: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화 URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[ Javascript 맛보기 ]
- Javascript란?
프로그래밍 언어중 하나로 브라우저가 이해할 수 있는 언어임. 표준 웹 스크립트 언어로 이해하면됨.
아래 코드는 javascript 예제로 간단히 영화 기록하기 버튼을 클릭 했을때 사전 정의된 hey 함수를 호출해서 alert을 띄워주는 코드이다.
</style>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
- 1주차 과제 소스
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Poor Story', cursive;
}
.mytitle {
/*타이틀 구간의 높이를 250픽셀로 지정*/
height: 250px;
/*타이틀 구간의 넓이를 브라우저의 폭과 동일하게 100%로 사용*/
width: 100%;
/*항상 아래 세가지는 함께, 해당 오브젝트의 이미지를 특정 이미지로 채우고, 위치를 현재 있는 공간의 중앙으로 정렬함*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://t1.daumcdn.net/cfile/tistory/991BBD335A1335EA23?download");
background-position: center;
background-size: cover;
color: white;
/*항상 아래 네가지는 함께..*/
display: flex;
flex-direction: column; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: center;
align-items: center;
}
.wrap {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn {
margin: 10px auto 10px auto;
display: flex;
flex-direction: row; /*colume 대신 row를 할 경우 오른쪽에 이어서 contents가 붙게 됨.*/
justify-content: left;
align-items: center;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>BTS(방탄소년단) 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">응원남기기</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-1 g-4">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</body>
</html>
- 과제 결과
'ICT 학습' 카테고리의 다른 글
| 웹개발 종합반 - 2주차 (0) | 2022.04.25 |
|---|---|
| 이미지 처리로 시작하는 딥러닝 - 2주차 (0) | 2022.04.24 |
| 머신러닝 기본부터 다시 배우기 - 2주차 (0) | 2022.04.23 |
| 이미지 처리로 시작하는 딥러닝 - 1주차 (0) | 2022.04.16 |
| 머신러닝 기본부터 다시 배우기 - 1주차 (0) | 2022.04.16 |
