1내가보는 이 페이지만 맘대로 고칠수있었다
2내가 보는 페이지는 사실 인터넷과 상관이없었다
3새로고침하면 원상복귀된다
뭔가를 새로 받아오니까 받아서 그려준다
서버로부터 받아왔다
웹 서비스의 동작원리
브라우저의 역할
1. 서버에게 요청 2.결과물을 받아서 그려준다
html,css 자바스크립트 코드
html -> 뼈대 ( ex. 각 기능들의 버튼 위치 잡아주기)
css -> 예쁘게 꾸미는거 ( ex. 그 버튼에 대한 색상,굵기...등등)
JavaScript => 움직이는거 (ex.action같은거)
서버 => 클라이언트 주는게:그릴것(데이터)
데이터만 받아오고싶을때가있다. 좌석이 없어지기도하고
내가 데이터만 줄테니까 업데이트해줘
예쁘게그리고자 하는건 css
예쁨을 빼고 데이터만 주는 형태 => Json형식
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
태그라고 부른다
head body meta
묶어서 한번에 옮길때 (구역을) div태그를 쓴다
p는 문단 paragraph의 약자
h1은 제목
문서형태로 뜨는 데이터들..
span 태그 전체 글 중 태그라는 글씨만 빨간색을
만들고싶을때 그 글씨만 묶는다.
특정 글자에만 적용하는 태그
href => url
img태그
img src =>url넣어준당
input,button,textarea,hr(가로선을 주는거)
pycharm 용어
tab 우로 여백 한번(좀 길게)
shift tab 좌로 여백 한번(좀 길게)
깔끔하게 코드 정리할때쓰는 단축키~
ctrl + A 후 window ver) ctrl + art + L
mac ver) command + art + L
문단 이용해보기
css 기초
<div> 부모 태그 <div>
명찰을 달아주는거 칭해주는거 이 꾸며주는거에 핵심
클래스를 이용
맥락과 사용법 이해~ 용어에 포커스 두지마세요~
background-image: url("");
background-size: cover;
background-position: center;
세트로 알아두자~
html 글 속성, 박스 속성
박스는 가로 세로~
글은 가로세로 개념이없다
글속성 => 박스 속성 강제로 변환후 바꿔야된다
display: block; css코드에 넣어줘야한다 style 부분
폰트 입히는거~
구글 웹폰트
주석: ctrl + /
css랑 html 주석처리 기호가 다 다름~ 그래서 pycharm이 유용한듯~
bootstrap을 이용할려면 항상 이 연결고리에 대한 부분이 필요하다~
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossor
사이트 이름~~
css border w3schools
css border mdn
margin 0 0 0 0 순서 북쪽 동쪽 남쪽 서쪽(북쪽기준 시계방향)
javascript
브라우저가 알아들을 수 있는 언어
컴퓨터 or 브라우저 명령
동작 수행~ 프로그래밍 언어
브라우저가 유일하게 알아들을수있는 언어
왜 브라우저는 javascript만 알아듣나요?
브라우저 전문적으로 해주는거 표준이 만들어진다
파이썬으로 홈페이지를 넣어놓은다?
브라우저를 쓸 일이 없다
굳어진것들이 표준
함수~ script~ 동작 javascript 문법
코드 수려 x 동작 o
필요성에 의해서 인식 단계를 밟아라~
개발자 도구에 console 브라우저에 명령해주는 거~ script 부분
개발자 도구 존재하는이유 수정했을때의 반응을 바로 볼수있다~
변수는 값을 담는 박스다.
문자열 담을수있는데 작은 따옴표가 붙는다
큰따옴표 붙어도 상관없다~
그럴싸하게 짓는다
남이 봐도 알아보기 쉽게 짓는다~
언더바(_) 활용 ~~ 남이봤을때 좋게끔~~
자바스크립트 문법 중 .push 리스트 추가~
가지고올떄 꺽쇠
선언 중괄호 => 걍 강의내용중이라서 좀 의미없긴한 내용임 기억을 위해 남김
딕셔너리와 리스트가 서로서로의 요소로 쓰일수있다(핵심내용)
자료형 =>리스트,딕셔너리
let a = 2 => 변수 값을 담는 박스~
split 함수 문자를 기준으로 나누기떄문에 이걸 통해서
이메일 식별할수있는 그런 구문을 작성가능(유용한듯)
함수 => 부르면 정해진 동작을한다~
function
딕셔너리들을 모다운 리스트를 돌면서 필요에 맞는 딕셔너리를
if문으로 값을 찍어주는거 이게 많이 쓰임~
첫번쨰 homework 폴더 안 index.html
부트스트랩시작 템플릿으로 시작해라
부트스트랩 컴포넌트를 보면서 코드를완성해라
div background-image 해도되고
이미지태그로 써도된다
span 클래스
dropdown
버튼을 가운데 width margin auto display:block;
'frontend' 카테고리의 다른 글
2022-04-08 (0) | 2022.04.09 |
---|---|
2022-04-07 (0) | 2022.04.08 |
1주차 과제 원페이지 쇼핑몰 html+css 과제 소스~! (0) | 2022.04.07 |
2022-04-06 (0) | 2022.04.07 |
2022-04-05 (0) | 2022.04.07 |