본문 바로가기

전체 글

 (215)
SPA(Single Page Application) 단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다. 기존 어플리케이션과의 차이 기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다. 반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다. ..
GitHub와 Git github: 소스코드올리는 공간 ,클라우드 제공자(gitlab, bitbucket) git: 소스코드를 내컴퓨터에서 인터넷으로 올려주는 역할 1.같은 파일의 다른버전을 관리하고 보관할 수있다. 2.소스코드를 공유 3.협업시 여러명이서 충돌없이 사용가능 Git 설치와 환경설정 선행 되어야할 것 : github 회원가입, repository 생성 1.Git 설치 후 Git Bash열기 2.유저이름 설정 git config --global user.name "your_name" // your_name에 본인의 이름 3.유저 이메일 설정 git config --global user.email "your_email" // your_email에 Github 가입시 사용한 이메일 4.정보확인하기 git config..
atrribute selector, pesudo selector atrribute 선택자[ ] input[placeholder="name"]{} ~= :포함하는 ^= :로 시작하는 $= : 로 끝나는 input[palceholder~="name"] //name포함하는 모든 palceholder a[href $=".org"] // .org로 끝나는 모든 링크 pesudo selector + 바로다음에오는 형제요소 ~ 형제요소(바로 다음에 오지 않아도되는) focus-within 포커스를 받았거나, 그 자손 중 하나가 :focus 받을 때 .reply:focus-within input{} //클래스 reply 나 자손이 focus 받을 때 인풋이 흔히 쓸 수 있는 예시로서, 의 필드 중 하나가 포커스된 경우 전체 을 강조해야 할 때 유용하게 사용할 수 있습니다.
컬러를 변수에 넣기 :root 컬러를 바꿀 때 여러줄을 변경하는 수고를 덜 수있음 :ROOT
사람을 다루는 기본 테크닉2: 진심에서 우러나오는 진실한 칭찬을하자 누군가에게 어떤 일을 하게만드는 방법은 그 일을 하고 싶어하도록 만드는 것이다. 이밖에 다른 방법음 없음에 명심해야한다. 강제적인 방법들은 전혀 바람스럽지 않은 반발을 불러일으키기 마련인다. 인간의 본성에 존재하는 가장 깊은 충동은 '인정받는 인물이 되고자 하려는 욕망이다(the desire to be important)' 음식이나 수면에 대한 욕구만큼이나 기본적이고 필수적이면서 좀처럼 충족되지 않는 욕구가 하나있다. 프로이트의 표현을 빌리자면 '위대한 사람이 되고자하는 욕구' 듀이의 표현으로는 '인정받는 인물이되고자 하는 욕구' 인간의 본성에서 가장 기본적인 원리는 인정받고자하는 갈망이다. 절대 사라지지않는 인간적인 갈구이다. 이러한 심적 갈구를 제대로 충족시켜주는 소수의 사람은 사람들을 자신이 원하는..
사람을 다루는 기본 테크닉1: 사람들에 대한 비판, 비난, 불평을 삼가라 비판은 쓸데없는 짓이다. 왜냐하면 비판은 다른사람으로 하여금 스스로를 방어하도록 만들고, 일반적으로 자신을 정당화하기 위해 안간힘을 쓰게 만들기 때문이다. 또한 비판은 위험한 일이다. 왜냐하면 비판은 사람들의 소중한 자존심에 상처를 입히고 자신의 가치에대해 회의를 갖게하며, 원한만 불러일으키기 때문이다. 비난은 귀소본능을 지닌 비둘기와 같다는 점을 명심해야한다. 비난은 언제나 다시돌아온다. 우리가 바로잡아 주고싶거나 비난하려는 사람은 스스로를 정당화할 뿐만아니라, 오히려 거꾸로 우리에게 비난을 퍼부을 것이라는 점을 명심해야한다. 우리를 비난하지 않는 경우라 하더라도 테프트처럼 이렇게 말하게 만들 뿐이다. "그때는 그럴 수밖에 없었다."
position: relatvie; position: absolute; posititon: relative; 최초위치는 static과 동일하다 현재 위치를 기준으로 top,left,right,bottom 적용된다 예)top: 100px;은 현재위치에서 아래로 100px옮긴다. position: absolute; 가장가까운 relative 기준으로 또는 relatvie 없으면 body 기준 +css 작성 할 때 어떤요소를 fixed하거나 aboslute하는 것은 box, block의 개념이 아니라 다른 layer개념이 된다.
flex-box 박스를 레이아웃하기 좋은 flex-box flex-container을 주축과 교차축을 가지고있다. justify-contents는 main-axis(디폴트 값: 수평) 기준 명령어 align items는 across axis(디폴트 값: 수직) 기준 명령어 --> 디폴트값 변경 flex-direction: row(default), column, row-reverse column-reverse flex-box규칙 규칙1. 부모 요소에 flex를 명시해야 한다 display: flex; +body가 height를 가지고있지않으면 align-items를 설정하더라도 이미 맨 위아래를 차지하고 중심에 있어서 바뀌지않는다.---> flex-container에 height 주면 됨 예) height: 100vh; ..

티스토리툴바