ctrl+alt+l 코드 정렬
1. 브라우저와 서버
브라우저는 서버의 API 창구에 요청. 데이터를 받아 화면에 보여주는 역할
매번 html파일을 전부 받아와 새로 갱신하는것은 아님.
필요에 따라 데이터만 받아와 부분 갱신 가능
2. 파이참 설치
3. html css
html : 뼈대
css : 꾸미기
js : 움직이는 것
4. html
크게 head와 body로 구성
head : 페이지 속성 정보
ex) meta, script, link, title
body : 페이지의 내용
ex)
div 구역
p 문단 (줄바뀜)
h1 제목
h2~h6 소제목
button 버튼
img 이미지
span 특정 글자 꾸밀 때
hr 가로선
5.CSS
html은 구조를 나누는게 중요. 누가 누구안에 있는지
나를 감싼 태그가 바뀌면 안의 내용도 전부 바뀌기 때문
자주 쓰이는 css
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding
margin vs padding
margin: 바깥 여백
padding : 안쪽 여백
ex)
<style>
.mytitle{
background-color:green;
width:300px;
height:200px;
color:white;
text-align:center; //글자 가운데로
background-image:url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-size:cover; //배경 이미지 크기 맞추기
background-position: center; //배경 이미지 위치
//background 이미지는 세줄이 세트
border-radius: 10px; //모서리 깎기
//margin : 100px 0px 0px 100px;
//위 오른쪽 아래 왼쪽
padding-top:20px; 안쪽 여백
}
.wrap{
//background-color: green; //div영역 확인위해
width:300px;//div의 가로길이 제한해서 한줄을 다 먹지 않도록..
margin:auto;//양쪽 여백을 동일하게
}
.mybtn{
width:100px;
margin:auto;//
display:block;//글속성은 가로길이라는게 없지.. 그래서 글속성을 강제로 박스로 바꿔준다.
}
.red-font{
color:red;
font-size:36px;
}
</style>
클래스는 중첩해서 적용 가능..
명찰 두개 붙히기
ex)
<button class="mybtn red-font">test button</button>6. 폰트 입히기
1.구글폰트 => link복사 => head의 title 밑에 link 복사 붙여넣기
2.밑에 css rules 복사해서 폰트 입힐 태그에 붙여넣어준다.
ex)
asterisk {
font-family: 'Licorice', cursive;
} => 모든 태그에 다 먹인다.
7. css 파일 분리
style태그를 css파일로 따로 분리하여 사용
new -> stylesheet
style태그 안의 내용 복붙
head에
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">8. 부트스트랩
이쁜거 가져다 쓰기
참고 문서
w3schools
mdn
9. js
브라우저가 유일하게 알아듣는 프로그래밍 언어
<script>
function hey(){ alert('!!');
}
button ~변수 리스트 딕셔너리 반복문 함수 조건문 기본연산(split)
