본문 바로가기

frontend

1주차 개발일지 (weak I learned)

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