스파르타 왕초보 1주차
[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를 작성해둔 것을 가져다가 사용하는 것.
-부트스트랩을 사용할려면 시작 템플릿 필요.
- 시작템플릿
<!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 = [email protected]
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.숙제]
숙제는 이제까지 배웠던 것을 토대로 기획서를 보고 만들어보는 것!
부트스트랩을 참고해서 만드는데 처음으로 설명을 듣지 않고 처음부터 만드는거다보니 많이 헤맸지만 어떻게든 완성!!
얼른 익숙해지도록 많이 연습해야겠다,,
Author And Source
이 문제에 관하여(스파르타 왕초보 1주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@spahy12/스파르타-왕초보-1주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
