스파르타 TIL 01. HTML, CSS 그리고 Javascript
2022. 7. 9. 19:49
728x90
스파르타 코딩클럽 웹개발 종합반 1주차
HTML, CSS 그리고 Javascript가 웹을 이룬다.
'항해99'에 등록하고 나서 '웹개발 종합반' 강의가
사전 강의로 제공되었다.
9기에 등록해서 부트캠프 시작하는 날짜는
9월 19일 부터인데 면접 때 얘기를 들어보니 본 강의 시작 전에
미리 수강하고 공부하고 오면 좋을 것들에 대해서 들어보니
지금이 7월 초 이지만 전혀 여유롭지 않았다.
일단 기본적으로 주어지는 강의를 2,3번은 빠르게 돌려보고
내가 선택한 주특기를 미리 조금은 공부하고 오는게
항해동안 나에게 다른 것들을 공부할 수 있는 여유가 생긴다는 말을 듣고
빠르게 사전 제공 강의를 뚝딱 해치우기로 했다.
1. HTML
웹의 뼈대라 부르는 HTML은 '우리가 보는 웹페이지가 어떻게 구조화되어 있는지
브라우저로 하여금 알 수 있도록 하는 마크업 언어' 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
head태그와 body태그 안에
웹에 보여질 콘텐츠들을 넣고 시각적으로 어떻게 보일 지
구조화한다.
또 콘텐츠가 더 잘 노출될 수 있도록 의미를 넣을 수도 있다.(SEO 같은)
<div></div> : 구역을 나눌 때 많이 사용한다.
<span></span> : 특정 부분을 따로 묶어서 꾸며줄 때 사용하고 CSS와 함께 쓰인다.
<p></p> : 문단을 만들 때 쓴다.
<h1></h1> : html 에서 가장 큰 크기의 제목에 쓰인다. h1 부터 2,3,4... 등등 있다.
<a></a> : 하이퍼링크를 걸어주는 태그이다. href와 같이 쓰여서 링크를 건다.
<img> : 이미지 태그로, src와 함께 이미지 경로를 지정할 수 있다.
<li></li> : list 의 약자로, 목록을 만드는 태그이다.
2. CSS
CSS 는 HTML안에 있는 콘텐츠들을 꾸며주는 역할을 한다.
색, 폰트, 모양 등 미적인 부분을 담당한다.
HTML은 콘텐츠를 차곡차곡 담는다면,
CSS는 실질적으로 표현될 방법을 기술하는 스타일 시트 언어이다.
<style>
.mytitle {
color : green;
background-color : white;
font-size : 20px;
}
</style>CSS는 head태그 안에 포함시킨다.
CSS는 class라는 것을 활용해서 태그를 지정한 후
style 태그 안에 어떻게 꾸밀지 명령하는 순서인데
이번에 처음 알게 된 것은,
class 안에 속해있는 태그를 콕 집어서도 명령할 수 있다는 것이다.
예를 들어서,
<div class="post">
<p>나는 문단이다.</p>
<button>버튼</button>
</div>
라는 코드가 있으면
post 라는 class 를 건들면 <p>태그와 <button>태그 둘다 먹는다.
근데 여기서 <button>태그만 또 따로 수정하고 싶으면
<style>
.post {
color : red;
}
.post > button {
color : white;
}
</style>
이렇게 꺽쇠를 이용해서 class 안에 포함되어 있는
다른 태그를 지정해서도 css 를 작성할 수 있다.
또 CSS는 남이 미리 만들어놓은 것들을 가져와서 쓸 수 있다.
Bootstrap 이라는 곳에서 내가 원하는 디자인의 코드를
그대로 복사해서 원하는 곳에 붙여넣고 내 입맛에 맞게 수정해서
사용할 수 있다.
(물론 사용 전에 필요한 세팅들이 있다.)
3. Javascript
웹을 이루는 마지막 Javascript는 HTML과 CSS 와 다르게
객체 기반의 스크립트 프로그래밍 언어이다.
주로 웹에서 동적인 부분을 담당하고 있다.(당장 배우는 부분에선,,)
전에 파이썬을 배워 본 적이 있는데
자바스크립트 기본 문법들을 조금씩 들어보니
파이썬과 매우 비슷한 인상을 받았다.
조금씩 차이는 있지만 그 표현함에 있어서는 둘이 비슷하다고 느꼈다.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
파이썬과 다르게 자바스크립트는
let 과 함께 변수를 선언한다.
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.그리고 list 와 dictionary 의 배열들도 비슷했다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
그리고 함수를 지정하는 방법이다.
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
그리고 조건문을 작성하는 방법이다.
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
그리고 마지막 반복문을 작성하는 방법이다.
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.for (let i = 0; i < 100; i++) {
console.log(i);
}
배열은 리스트와 딕셔너리를 잘 섞어서 활용하면
다양한 명령들을 할 수 있어서 중요하고 이해가 많이 필요한 것 같다.
(자바스크립트는 스파르타 코딩클럽에서 제공하는
코드들을 냉큼 복사해왔다^^)
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=Gowun+Dodum&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
width: 100%;
height: 250px;
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-size: cover;
background-position: center;
/* 내용물 정렬하는 방법 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
margin: 20px auto 0px auto;
max-width: 500px;
width: 95%;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.btnwrap {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.btnwrap > button {
margin-left: 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>
<p></p>
<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="btnwrap">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</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>728x90
'스파르타 코딩클럽' 카테고리의 다른 글
| 스파르타 TIL 04. Flask 사용하기 (0) | 2022.07.24 |
|---|---|
| 스파르타 TIL 03. Python과 mongoDB (0) | 2022.07.17 |
| 스파르타 TIL 02. JQuery와 Ajax (0) | 2022.07.11 |