스파르타 왕초보 1주차

spahy12·2021년 7월 22일

스파르타코딩클럽

스파르타 왕초보

목록 보기

1/5

[HTML, CSS 기본 내용]

HTML은 뼈대, CSS는 꾸미기, Javascript는 움직임

HTML은 크게 head와 body로 구성

head는 페이지의 속성 정보 => meta, script, link, title 등

body는 페이지의 내용

-----구역을 나누는 태그-----

<div>구역 나눔</div>
<p>문단</p>
<ul>
    <li> bullet point!1 </li>
    <li> bullet point!2 </li>
</ul>

-----구역 내 콘텐츠 태그-----

    <h1>제목</h1>
    <h2>소제목</h2>
    <h3>비중이 작지만 각자의 역할 있음</h3>
    <hr> 가로선
    <span style="color:red">특정 글자 꾸미기</span>
    <a href="http://naver.com/"> 하이퍼링크 </a>
    <img src="이미지 주소" />
    <input type="text" />
    <button> 버튼</button>
    <textarea>텍스트 입력 상자</textarea>

파이참- 정렬 : Ctrl + Alt + L

[CSS 기초]

css는 head 안에 있는 style 공간에 작성

class를 부를때 .을 붙여서 부름

<head>
  <style>
    .mytitle {
      color: red;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h1 class="mytitle"> ~~~</h1>
</body>

margin은 바깥 여백, padding은 안쪽 여백

글 속성은 박스처럼 가로 세로 개념이 없다.

=>옮길려면 글 속성을 박스 속성으로 바꾼 후 옮겨야 한다. display: block 사용

클래스 중첩 시 띄어쓰기 후 계속 쓰면 된다.

<button class="mybtn red-font">

주석은 필요없는 코드를 삭제하는 대신 임시로 작동하지 못하게 할 때나 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용한다.

!주석을 붙이면 브라우저/컴퓨터는 읽지 않고 개발자나 동료에게 정보를 주는 것!
단축키 : ctrl + /

[부트스트랩]

예쁜 css 모음집. 미리 css를 작성해둔 것을 가져다가 사용하는 것.
-부트스트랩을 사용할려면 시작 템플릿 필요.

부트스트랩 컴포넌트 4.0

- 시작템플릿

<!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>

[Javascript]

자바스크립트는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

경고창 만들기
=>alert()

<head>
~~
  <script>
    function hey() {
  	  alert('안녕');
    }
  </script>
</head>
<body>
~~
  <button onclick="hey()" type="button" class="btn btn-primary">버튼 경고창</button>
</body>

✔ 크롬 개발자도구>console

콘솔창은 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있도록 만들어둔 도구이다.
console.log(변수) : 콘솔 창에 변수 값을 출력
console.log(변수1,변수2)도 가능
Shift + Enter : 줄바꿈(콘솔창)

✔ 변수

*변수는 값을 저장하는 박스
let으로 변수를 선언
let a = 1 이라는 것은 1을 a라는 변수에 넣는다는 뜻

✔ 기본연산

let first_name = 'Bob'
let last_name = 'Lee'
first_name+last_name //'BobLee' 출력

✔ 리스트

순서를 가지고 있다.
let a_list = ['변수1',2,3]
a_list[1] //2 출력

리스트에 요소 넣기
a_list.push('변수4')
a_list //['변수1',2,3,'변수4'] 출력
리스트 길이 구하기
a_list.length //4 출력

✔ 딕셔너리

순서는 가지지 않음, 키(key)-밸류(value)의 묶음
a_dict = {'name' : 'Bob','age' : 21}
a_dict ['name'] //'Bob' 출력

딕셔너리에 키:밸류 넣기
a_dict ['height'] = 180
a_dict //{name: 'Bob', age: 21, height: 180}출력

a_dict ['list'] = a_list //['변수1'2,3,'변수4'] 출력
a_dict //{name: 'Bob', age: 21, height: 180, list:Array(4)} 출력
a_dict ['list'][1] //2 출력

✔ 기본 함수

나눗셈의 나머지 구하기
let a = 20
let b = 7
a % b //6 출력
문자열을 나눌 때
let myemail = abc@naver.com
let result = myemail.split('@') //['abc','naver.com'] 출력
result[0] //abc 출력
let result2 = result[1].xplit('.') //['naver','com']
resulte2[0] //naver 출력
요약=>myemail.split('@')[1].split('.')[0] //naver 출력

✔ 함수

function sum (num1,num2){
return num1+num2
} //
let result = sum(2,3) //
result //5 출력

✔ 조건문

✔ 반복문

[Q.숙제]

숙제는 이제까지 배웠던 것을 토대로 기획서를 보고 만들어보는 것!
부트스트랩을 참고해서 만드는데 처음으로 설명을 듣지 않고 처음부터 만드는거다보니 많이 헤맸지만 어떻게든 완성!!
얼른 익숙해지도록 많이 연습해야겠다,,

spahy12

스파르타 왕초보 1주차