스파르타 코딩클럽(부트캠프) 웹개발 입문 2장

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

요리사에서 IT개발자로

스파르타 코딩클럽(부트캠프) 웹개발 입문 2장 본문

웹(Web)개발

스파르타 코딩클럽(부트캠프) 웹개발 입문 2장

H.S-Backend 2024. 3. 24. 22:25

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

Jumbotron 추가하기

배경 코드

https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg

Headers 추가하기

Headers 클릭

오른쪽 마우스 누르고 검사하여 복사하기

배경 색 넣기

body{

background-color: black;

}

이름 수정하기

<li><a href="#" class="nav-link px-2 text-danger">스파르타플릭스</a></li>

</ul>

sign up 버튼 색 바꾸기

<button type="button" class="btn btn-outline-light me-2">Login</button>

</div>

완성 코드

<!DOCTYPE html>

<head>

<title>스파르타플릭스</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap');

* {

font-family: 'Hahmlet', serif;

}

.main {

color: white;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');

background-position: center;

background-size: cover;

}

body{

background-color: black;

}

</style>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">스파르타플릭스</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-outline-light me-2">Login</button>

</div>

</header>

<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.</p>

</div>

</body>

</html>

카드추가하기

https://getbootstrap.com/docs/5.3/components/card/

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

getbootstrap.com

<div class="row row-cols-1 row-cols-md-4 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</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 class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</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>

이미지 넣고 개수 조절하기

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

카드 내용 변경 및 별점넣기

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

카드 복사 후 붙여넣기

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

.mycards{

width: 1200px;

margin: 20px auto 0px auto;

}

포스팅 박스 만들기

부트스트랩

https://getbootstrap.com/docs/5.3/forms/floating-labels/

Floating labels

Create beautifully simple form labels that float over your input fields.

getbootstrap.com

</div>

</div>

</div>

부트스트랩 Input group에 Custom Select 에서 표시된곳 복사

카드 사이에 넣어주기

</select>

</div>

포스팅박스 색깔 넣기

.form-floating > input {

background-color: transparent;

color: white;

}

.form-floating > label {

color: white;

}

</style>

포스팅박스 안에 별점 라벨 바꾸기

.input-group > label {

background-color: transparent;

color: white;

}

마이포스팅 박스 안에 기록하기 버튼 크기 조절하기

.mypostingbox > button {

width: 100%;

}

완성코드

<!DOCTYPE html>

<head>

<title>스파르타플릭스</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap');

* {

font-family: 'Hahmlet', serif;

}

.main {

color: white;

background-position: center;

background-size: cover;

}

body {

background-color: black;

}

.mycards {

width: 1200px;

margin: 20px auto 0px auto;

}

.mypostingbox{

width: 500px;

margin: 20px auto 0px auto;

border: 1px solid white;

padding: 20px;

border-radius: 5px;

}

.form-floating > input {

background-color: transparent;

color: white;

}

.form-floating > label {

color: white;

}

.input-group > label {

background-color: transparent;

color: white;

}

.mypostingbox > button {

width: 100%;

}

</style>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">스파르타플릭스</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-outline-light me-2">Login</button>

</div>

</header>

세자뿐이다.</p>

</div>

</div>

</div>

</select>

</div>

</div>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

</body>

</html>

자바스크립트란

프로그래밍 언어중 하나, 브라우저가 알아들을 수 있는 언어.

브라우저가 JavaScript를 주로 사용하는 이유

역사적으로 JavaScript가 웹브라우저에서 실행되는 언어로 사용되어 왔기 때문이다.
웹페이지의 동적인 기능을 구현하기위해 JavaScript가 개발되었으며 많은 웹개발자들이 JavaScript를 사용하여 웹애플리케이션을 구축하고 유지, 관리 해왔다.
JavaScript가 브라우저한테 명령을 내리는 표준이다.

자바스크립트 범용성

자바스크립트를 이용하여 서버를 만들 수 있다.
자바스크립트는 프론트엔드, 백엔드 둘다 가능하다.
IOS와 안드로이드 앱, 게임 개발 엔진, IOT(사물 인터넷) 애플리케이션 개발도 가능하다.

JavaScript 기초문법

기초문법은 자바스크립트 뿐만이 아닌 개념자체는 어느 프로그래밍 언어를 가도 똑같다.

프로그래밍 언어는 기계와 사람이 소통하기 위해 만든 언어이다.

변수
자료형
함수
조건문
반복문

console 은 개발자도구

변수를 쓰는 이유
값을 담아서 한번에 관리하는 친구

변수는 내가 알아보기 쉽게 적어놔야 한다.

자료형

리스트 = 순서를 가지고 있는 형태
딕셔너리 =키(Key), 벨류(Velue) 값의 묶음

필요한 이유 = 순서를 표시할 수 있으며 정보를 묶을 수 있다.

let a = ['사과', '배','수박'];

console.log(a[1])

</script>

let person={'name':'bob', 'age':30, 'height':180};

console.log(person['name'])

</script>

let person={'name':'bob', 'age':30, 'height':180};

console.log(person['age'])

</script>

let person={'name':'bob', 'age':30, 'height':180};

let name = person['name']

let age = person['age']

console.log(name, age)

</script>

조건문

let age = 15;

if (age < 20) {

console.log('청소년입니다')

} else {

console.log('성인입니다')

}

let age = 25;

if (age < 20) {

console.log('청소년입니다')

} else {

console.log('성인입니다')

}

반복문

let ages = [15, 20, 30, 37, 45];

ages.forEach(a => {

if (a < 20) {

console.log('청소년입니다')

} else {

console.log('성인입니다')

}

});

JavaScript 활용문법 (DOM)

함수는 같은 동작을 반복한다는 개념이다.

<script>

function hey() {

alert('안녕하세요');

}

</script>

세자뿐이다.</p>

</div>

JQuery 시작하기

JQuery란
누군가가 만들어놓은 라이브러리

<title>스파르타플릭스</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

세자뿐이다.</p>

function hey() {

$('#title').text('쥬라기월드')

}

</script>

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트 문법 연습하기!</title>

</head>

<style>

.button-part {

display: flex;

height: 50px;

}

</style>

function checkResult(){

let a = ['사과', '배', '감', '귤']

$('#q1').text(a[2]);

}

</script>

<body>

<h1>자바스크립트 문법 연습하기!</h1>

</div>

<hr/>

<br>

</div>

</div>

</div>

<div>

</div>

</body>

</html>

function checkResult(){

let b = {'name' : '영수','age' : 30}

$('#q1').text(b['name']);

}

function checkResult() {

let c = [

{ 'name': '영수', 'age': 30 },

{ 'name': '철수', 'age': 35 }

]

$('#q1').text(c[1]['name']);

}

JQuery연습

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트 문법 연습하기!</title>

</head>

function checkResult() {

let fruits = ['사과','배','감','귤','수박'];

$('#q1').empty();

let temp_html = `<p>감자</p>`;

$('#q1').append(temp_html);

}

</script>

<body>

<h1>자바스크립트 문법 연습하기!</h1>

</div>

<hr />

<br>

</div>

</div>

</div>

</body>

</html>

function checkResult() {

let fruits = ['사과','배','감','귤','수박'];

$('#q1').empty();

let a =fruits[0];

let temp_html = `<p>${a}</p>`;

$('#q1').append(temp_html);

}

function checkResult() {

let fruits = ['사과', '배', '감', '귤', '수박'];

$('#q1').empty();

fruits.forEach(a => {

let temp_html = `<p>${a}</p>`;

$('#q1').append(temp_html);

});

}

function checkResult() {

let people = [

{ 'name': '서영', 'age': 24 },

{ 'name': '현아', 'age': 30 },

{ 'name': '영환', 'age': 12 },

{ 'name': '서연', 'age': 15 },

{ 'name': '지용', 'age': 18 },

{ 'name': '예지', 'age': 36 }

]

$('#q2').empty();

people.forEach(a => {

let name = a['name'];

let age = a['age'];

let temp_html = `<p>${a['name']}는 ${a['age']}살입니다.</p>`;

$('#q2').append(temp_html);

});

}

'웹(Web)개발' 카테고리의 다른 글

스파르타 코딩클럽(부트캠프) 웹개발 입문 5장 (0)	2024.04.12
스파르타 코딩클럽(부트캠프) 웹개발 입문 4장 (0)	2024.04.12
스파르타 코딩클럽(부트캠프) 웹개발 입문 3장 (0)	2024.04.08
스파르타 코딩클럽(사전캠프 프로젝트) 무한 루프 멀티플 슬라이스 코드 (0)	2024.04.04
스파르타 코딩클럽(부트캠프) 웹개발 입문 1장 (0)	2024.03.10

'웹(Web)개발' Related Articles

요리사에서 IT개발자로

요리사에서 IT개발자로

스파르타 코딩클럽(부트캠프) 웹개발 입문 2장 본문

스파르타 코딩클럽(부트캠프) 웹개발 입문 2장

Jumbotron 추가하기

Headers 추가하기

배경 색 넣기

이름 수정하기

sign up 버튼 색 바꾸기

완성 코드

이미지 넣고 개수 조절하기

카드 내용 변경 및 별점넣기

카드 복사 후 붙여넣기

부트스트랩 Input group에 Custom Select 에서 표시된곳 복사

카드 사이에 넣어주기

추천 이유 밑에 넣어준다.

포스팅박스 색깔 넣기

포스팅박스 안에 별점 라벨 바꾸기

마이포스팅 박스 안에 기록하기 버튼 크기 조절하기

완성코드

자바스크립트란

JavaScript 기초문법

console 은 개발자도구

자료형

조건문

반복문

JavaScript 활용문법 (DOM)

JQuery 시작하기

JQuery연습

'웹(Web)개발' 카테고리의 다른 글

티스토리툴바