HTML : 뼈대
HTML은 head와 body로 구성된다.
body는 안에 들어가는 내용, head는 안에 들어가지 않는 내용
div 태그 : <div>는 division의 약자로, 구간을 나누는 것
p 태그 : <p>는 paragraph의 약자로, 문단
h1 : 제목. 제목을 써주어야 구글 검색 엔진이 제목만 긁어갈 수 있다.
h2부터 h6 : 글씨가 작아짐
span 태그 : 특정 글자를 꾸민다.
특정 <span style = "color : red">글자</span>를 꾸민다.
a 태그 : 하이퍼링크
img 태그 : 이미지
input 태그 : 입력
button 태그 : 버튼
textarea 태그
줄을 맞추고 싶을 때, 맞출 구간을 드래그하여 Ctrl + Alt + L
오른쪽 : Tab
왼쪽 : Shift + Tab
CSS : 꾸미기
무언가를 가리킬 수 있어야 꾸미는 것.
ex ) 짱구의 바지 색을 바꿔줘. 라고 했을 때 짱구의 바지라고 부를 것이 있어야 함.
-> 이름표를 지정하고 이름표를 어떻게 하라고 명령.
<body>
<h1 class = "mytitle">로그인 페이지</h1>-> 이름표를 붙여줌
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
color : red;
}
</style>
</head>-> mytitle을 구체적으로 어떻게 바꿀 건지 명시 (로그인 페이지 글자를 빨간색으로 바꿈)
background-color : green;
width : 300px;
height : 200px;
color : white;
text-align : center;배경색 : 초록색
넓이 300px
높이 200px
글씨색 : 흰색
글자 위치를 센터로 조정
배경 tip : 3줄을 항상 같이 쓴다고 생각!
background-image : url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size : cover;
background-position : center;이 3줄은 항상 세트로 같이 다닌다고 생각하면 편함.
border-radius : 10px;-> 귀퉁이 조절
margin과 padding
margin : 20px;-> 바깥쪽 여백 상하좌우 20px씩 띄우기
margin : 20px 20px 20px 20px; 과 같은 효과
padding : 20px;-> 안쪽 여백 상하좌우 20px씩 띄우기
padding-top : 40px;-> 안쪽 위 여백 40px 띄우기
가운데로 가져오기 -> 양쪽 여백이 똑같음
margin : auto;-> 상하좌우 최대한 밀기
* {
font-family: 'Hahmlet', serif;
}-> * : 모든 태그에 적용하겠다는 의미
주석 ctrl + /
부트스트랩
: 예쁜 CSS를 모아둔 것
width : 100%;-> %는 전체를 보고 얼마나 꽉찰 것인지. 100%면 꽉참
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;-> 내용물 정렬. 하나의 세트라고 생각!
column인지 row인지만 바뀐다고 보면 됨.
.mytitle > button {
}-> mytitle안에있는 button을 지정
.mytitle > button:hover {
}-> button위에 마우스가 올려져 있을 때
모바일 처리
max-width : 500px;
width: 95%;-> 최대 500px까지 채워질 수 있으며 그 전까지 95%만 채움.
Javascript 맛보기
Javascript : 브라우저가 알아들을 수 있는 언어로, 움직이게 해주는 것
여러 언어를 사용하게 되면 여러 브라우저를 준비해야 할 수 있음.
인터넷 언어는 Javascript만 쓰기로 약속! --> 표준
Java와 Javascript는 바다와 바다코끼리처럼 아무 관련이 없음.
<script>
function hey(){
alert('안녕!');
}
</script>-> hey함수 정의
<button onclick="hey()">영화 기록하기</button>-> 영화 기록하기 버튼을 클릭하면 hey함수 호출
<script> </script> 안에 자바스크립트 문법을 작성하는데,
인터넷 페이지에서 검사 누른 후 콘솔창과 같음.
-> 콘솔창에 hey()를 쓰면 우리가 만들어 놓은 hey()함수가 호출됨
프로그래밍 언어를 배울 때 5가지만 기억하자!
변수, 자료형, 함수, 조건문, 반복문
.split : 특정 문자로 나눠서 리스트로 반환해주는 함수
myemail.split('@')
-> (2) ['sparta', 'gmail.com']
myemail.split('@')[1]
-> 'gmail.com'
myemail.split('@')[1].split('.')
-> (2) ['gmail', 'com']
myemail.split('@')[1].split('.')[0]
-> 'gmail'
함수 : 정해진 것을 하는 것, 정해진 값을 주는 것
function sum(a,b) {
alert('계산을 하자')
return a+b
}
let result = sum(2,3)
alert(result)-> 새로고침 하자마자 나옴
function sum(a,b) {
consol.log('계산을 하자')
return a+b
}
let result = sum(2,3)
alert(result)-> 콘솔창에 뜸
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'])
}-> scores의 i번째의 'score' 키값의 value만 콘솔창에 찍힘
.mycards > div {
}-> mycards안의 div태그
.mycards > .card {
}-> mycards안의 이름표 card
배운 내용을 바탕으로 만든 1주차 숙제 비오 팬명록 사이트로 마무리 한다!
'개발일지' 카테고리의 다른 글
| [생활코딩] React #2 (0) | 2022.09.19 |
|---|---|
| [생활코딩] React #1 (0) | 2022.09.17 |
| [스파르타코딩클럽] 웹개발 종합반 3주차 (0) | 2022.08.27 |
| [스파르타코딩클럽] 웹개발 종합반 2주차 (1) | 2022.08.24 |
| [스파르타코딩클럽] 데이터분석 입문 1주차 (0) | 2022.07.21 |