HTML, CSS, Javascript의 기본적인 활용법들에 대해 배움
-
배운 내용
1) HTML은 웹사이트의 틀을 제공한다.
<html> <head> <title></title> <style></style> <script></script> </head> <body> </body> </html>바디 태그 안에는 브라우저 화면 안에 들어갈 내용들이 들어가고, 헤드 태그 안에는 그 외의 모든 것들 (타이틀, CSS코드, Javascript코드 등 ) 이 들어간다.
2) CSS활용
이 강의에서 CSS를 활용하기 위해 알고 있어야하는 사항은 몇가지되지 않는다.a)class란?
class는 분류라는 뜻을 가지고 있다. 같은 class로 묶인 것들을 하나의 분류로 취급하겠다는 뜻으로 이해하자.b)div와 span
<div></div> <span></span>위의 두가지 태그들은 body태그 사이에 들어가는 것으로 간단하게 생각하면 블록을 만드는 것인데, CSS에서 class를 지정하기 위해 사용될 수 있다.
c)class의 활용
<head> <style> .myclass{ } </style> </head> <body> <div class="myclass"><div> </body>class는 style태그 안에 .myclass와 같이 .을 붙여서 선언할 수 있고, body태그 안에서 다양하게 활용될 수 있다. 잘 활용하면 예쁘고 보기좋은 웹 페이지를 만들 수 있다. CSS활용법은 무궁무진하므로 구글링해서 {}안에 들어갈 내용 채우면 됨.
d)부트 스트랩
사실 초보자로써 가장 활용도가 높은 부분이라고 본다.<!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>스파르타 코딩에서는 위와 같은 부트 스트랩 시작 템플릿을 제공해주었다.
부트스트랩으로 접속하면 부트스트랩 시작 템플릿 코드를 받을 수 있다.
그 이후로는 부트스트랩 컴포넌트들을 적절히 활용해서 더 예쁜 페이지를 제작할 수 있다.
3) Javascript 활용
a) 기본 문법
(a-1) let을 통해 변수를 선언할 수 있다.
(a-2) 사칙연산, % 등 연산자들로 연산 가능하다.
(a-3) list 자료형과 dictionary 자료형
ㅇlist자료형 : 순서가 중요한 자료형
let a_list = ['모니터', '키보드', '마우스']위와 같이 변수를 선언하면, a_list[0] = "모니터"가 된다.
ㅇdictionary자료형 : 검색이 용이한 자료형
let a_dict = {'모니터' : 15, '키보드' : 5, '마우스' : 3} 위와 같이 변수를 선언하면 a_dict['모니터'] = 15가 된다.
(a-4) 조건문과 반복문
ㅇ조건문 if / else if / else
if (조건){
}조건을 만족하면 괄호 안의 내용을 실행한다. 모든 프로그래밍 언어에서 통하는 것이라 당연한 것이지만, 조건에는 0 또는 1밖에 들어갈 수 없다.
ㅇ반복문 for
for (let i = 0; i<n ; i++){
}i=0부터 i가 n보다 작은 경우에 대해 괄호 안의 코드를 실행하고, 한번 실행할 때마다 i에 1을 더한다.
2. 느낀 점
부트 스트랩의 존재를 처음 알게되었는데, 미리 만들어둔 예제를 수정만 하는 식으로 작업할 수 있는 부분인 것 같아서 활용도가 꽤 높을 것 같다. 과제를 하면서 어찌어찌 원하는 페이지를 만들어낼 수는 있었으나, 컴팩트한 코드를 짜지 못한 것 같아서 그런 부분을 계속 고민하면 더 나은 코딩을 할 수 있을 것 같다.
