강의 들으면서 러프하게 메모해놓았던 내용들이다.
추후 재정리 필요
내용이 많아서인지 한 번에 복붙이 안되었다.
+링크가 들어간 수식? 들이 복붙이 안 되던 거였다.
왜지? 하이퍼링크는 따로 잘 들어가는데
티스토리의 설정상의 문제인가..?
[웹개발강의 1-3(HTML기본)]
HTML은 웹페이지의 뼈대
CSS는 웹페이지 꾸미기
div : division의 약자, 구역나누기
p : paragraph의 약자, 문단 나누기
<ul>
<li> : 글머리 기호
H1 : 단순히 큰 글자x, 제목이자 구글 검색 엔진이 제목으로 인식
span : 특정 글자만 꾸미기
a : 하이퍼링크
img : 이미지
input : 입력칸
button : 버튼
textarea :
------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
[웹개발1-4]
영역지정 후 ctrl+alt+L 들여쓰기 맞춰짐
영역지정 후 Tab 들여쓰기
Shift+Tab 내어쓰기
[웹개발1-5(css기초)]
Cascading Style Sheet 물 흐르듯 따라간다
큰 틀 서식 전체 적용
세부 따로 설정시 세부내용은 세부따라 적용
class : 이름표 붙이기
style 이하에 이름표 .이름{color}
참고: margin과 padding 구별
-margin은 바깥 여백을, padding은 내 안쪽 여백을
-margin
px 지정시 숫자 하나만 넣으면 상하좌우 동일 적용(margin: 20px)
4개 넣으면 상우하좌(시계방향) 각각 적용(margin:20px, 20px, 20px, 20px 와 동일)
auto는 상하좌우 다 똑같이 밀기
-padding
padding-top이런식
border-radius : 모서리 다듬기
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center; <=문자열 가운데 정렬
background-image: url("..."); <- 얘 때문에 복사가 안 됐던 것 같다. 왜지? url주소 왜 못넣는거지..? ... 자리는 ↓
https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg
background-size: cover;
background-position: center;
이미지 넣었을 때 위 background 3개는 쎄뚜!
[웹개발1-6]
<style>
.wrap{
background-color:green; <=wrap이 차지하는 공간 가시화 위해 임시로 넣은 색
width: 300px; <=꽉 차있으면 바깥 여백을 넣을 수 없으니까 폭 사이즈 지정
margin:auto;
</style>
<div class="wrap">
내용
</div>
[웹개발1-7(글꼴, 주석처리)]
https://fonts.google.com/?subset=korean
구글폰트에서 골라서 link href 복사해서 타이 밑에 넣고
style이하에 *{css규칙도 복붙}
*:모든 태그에 적용하겠다.
주석처리 : 컴퓨터가 읽지 않게 처리
ctrl+/
html, css, js 전부 다르게 표시되지만 설정키는 동일
[웹개발1-8(부트스트랩)]
bootstrap : 예쁜 CSS를 미리 모아둔 것
프로스트랩 구성요소5.0 링크
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
[웹개발1-9]
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
상하좌우 가운데 할 때 4개 set
column을 row로 바꾸면 한줄로 정렬
column은 기둥으로 정렬
.mytitle>button{
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
}
마이타이틀 이름표 안의 버튼서식 변경시
테두리 : 굵기 실선 색상
.mytitle>button:hover {
border: 2px solid white;
}
hover: 마우스 커서 올렸을 때 설정
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-position: center;
background-size: cover;
이미지 어둡게 하고싶을 때 url앞에 , 넣고 앞에 넣어주면 됨. 0.5 수치 조절하면 어두움 조절 가능
[웹개발 1-10]
가운데 하고 싶으면
<div class="wrap">으로 일단 문단 감싸서 이름표 붙인 뒤 <style>안에
.wrap{
size: 1200px;
margin:20px auto 20px auto;
}
위 코드는 정확하게는 위, 아래 여백을 준 것.
이모티콘 입력 꿀팁
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
가서 복사해서 코드에 넣으면 됨.
[웹개발1-11]
box-shadow: 0px 0px 3px 0px gray;
박스 쉐도우
******** ; 별 거 아닌 것 같지만 없어지면 아랫줄 서식이 적용이 안됨.
style 이하에
max-width: 1200px;
width: 95%;
퍼센트로 주면 모바일 적용 쉬움
모바일 모드 보려면 빈공간 우클릭-검사해서 뜬 화면에 왼쪽상단 두번째의 네모 겹쳐진 모양아이콘 누르면 확인 가능.
[웹개발 1-12]
자바스크립트란 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.
브라우저가 Javascript만 알아듣는 이유는 (다른 언어 쓰는 게 불가능하진 않지만)"역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.
java와 javascript는
인도와 인도네시아
바다와 바다코끼리 정도의 차이야.
(=>전혀 관계없다.)
[웹개발 1-13 javascript기초문법1]
우클릭-검사-console
개발자를 위한 도구로 우리가 만들던 페이지랑 같다.
언어를 배울 떈 아래 5개만 알면 된다.
변수 : 값을 담는 것
자료형 : 숫자, 문자
함수 : hey() 같은 애들
조건문 : if, else
반복문 : 계속 반복
왼쪽 상단의 clear console 해도 정보는 남아있다. 새로고침하기 전까지는
창만 깨끗해지는 셈.
데이터를 한번에 정리하는 방법 2가지[자료형]
1. 숫자가 중요한 list
let a_list=['수박', '참외', '배']
a_list(1)
=>'참외'로 나옴....... list 안 순서가 0,1,2임
a_list.push('감')
a_list
=>(4) ['수박', '참외', '배', '감']
let b_list = ['철수', '영희']
a_list.push(b_list)
a_list
=>['수박', '참외', '배', '감', Array(2)]
a_lis[4][0]
=>'철수'
리스트는 순서가 중요
2. 딕셔너리형은 key, value로 매칭되는 것이 있음
let a_dict ={'name' : 'bob', 'age':27}
a_dict['name']
=>'bob'
a_dict['height']=180
a_dict
=>{name : 'bob', age: 27, height: 180}
참고로 하나 더 보여줌
let myemail = 'sparta@gmail.com'
myemail.split('@')
=>(2) ['sparta', 'gmail.com']
자판의 위화살표 누르면 윗줄 그대로 입력됨
myemail.split('@')[1]
=>'gmail.com'
myemail.split('@')[1].split('.')
=>(2) ['gmail', 'com']
myemail.split('@')[1].split('.')[0]
=>'gmail'
[웹개발 1-14 javascript기초문법2]
3.함수형
팝업으로 계산을 하자 뜬 이후 5도 뜸
<script>
function sum(a,b){
alert('계산을 하자')
return a+b
}
let result = sum(2,3)
alert(result)
</script>
팝업x 콘솔(우클릭-검사-console)에 뜸
<script>
function sum(a,b){
console.log('계산을 하자')
return a+b
}
let result = sum(2,3)
console.log(result)
</script>
4.조건문
<script>
function is_adult(age){
if (age > 20) {
alert('성인입니다')
}else {
alert('청소년입니다 ')
}
}
</script>
콘솔에 is_adult(20) 입력하면
팝업으로 청소년입니다 뜸
콘솔에 is_adult(25) 입력하면
팝업으로 성인입니다 뜸
5.반복문
리스트와 함께 나옴
<script>
let a_list=['사과', '배', '감', '딸기']
for (let i=0; i<a_list.length; i++) {
console.log(a_list[i])
}
</script>
콘솔에 과일이 한줄씩 뜸.
리스트의 0번부터; 리스트 길이까지(i<4와 같음); 하나씩 커지게 반복
지금 외우진 말래, 많이 쓰여지니까 외워진거지, 복사해서 리스트 이름만 바꿔서 써
<script>
let scores = [
{'name': '철수', 'score': 90},
{'name': '영희', 'score': 85},
{'name': '민수', 'score': 70},
{'name': '형준', 'score': 50},
{'name': '기남', 'score': 68},
{'name': '동희', 'score': 30},
]
for (let i=0; i<scores.length; i++) {
console.log(scores [i])
}
</script>
=>{...}가 한줄씩 나옴
<script>
let scores = [
{'name': '철수', 'score': 90},
{'name': '영희', 'score': 85},
{'name': '민수', 'score': 70},
{'name': '형준', 'score': 50},
{'name': '기남', 'score': 68},
{'name': '동희', 'score': 30},
]
for (let i=0; i<scores.length; i++) {
console.log(scores [i]['score'])
}
</script>
=>90,85...가 한줄씩 점수만 나옴
<script>
let scores = [
{'name': '철수', 'score': 90},
{'name': '영희', 'score': 85},
{'name': '민수', 'score': 70},
{'name': '형준', 'score': 50},
{'name': '기남', 'score': 68},
{'name': '동희', 'score': 30},
]
for (let i=0; i<scores.length; i++) {
if(scores[i]['score']>70){
console.log(scores [i]['score'])
}
}
</script>
=>70초과 점수만 나타낸다는 조건문
90, 85만 한줄씩 나옴
참고: 강의자료
https://teamsparta.notion.site/1-da6d8595945d4b868e5fcfa933c56011
[스파르타코딩클럽] 웹개발 종합반 - 1주차
매 주차 강의자료 시작에 PDF파일을 올려두었어요!
teamsparta.notion.site