라쿤의 끄적끄적

보호되어 있는 글입니다.

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 전체적인 기능 Canvas API를 이용함 굵기 조절 색깔 선택 그리기 채우기 저장 기능 사전에 필요한 것들 깃헙 계정 구글 크롬 VScode Set up HTML CSS, js 파일 연결 전체적인 요소 구현 convas 태그 사용 CSS CSS 초기화 파일 만들기 (reset.css) CSS RESET code RESET CSS을 CSS파일에 연결하기 @import "위치" display : flex flex 속성 알아보기 @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Seg..

웹 프론트엔드 기초 05 강의의 부실함을 느끼고 구글링을 하던 중 강의에서 언급한 Reference를 찾아보기로 했다. 참고서라고 보면 되는데 HTML과 CSS가 뭔지, 그리고 사용할 수 있는 개념과 속성들을 사전식으로 만들어 놔서 찾기 좋았다. HTML관련 사전으로 사용하기 좋은 사이트 공식 CSS Reference 사이트 일단, 깊에 보는 과정이 아니라 단순히 어떻게 전체적으로 돌아가는지 보는 것이기 때문에 나는 강의에 맞게 사이트의 HTML 구조와 CSS를 적용 시켰다. 1. 사이트 클론 _ HTML에 CSS적용 해보기 1) box-sizing: border-box 일단 기본 content-box일 경우 CSS시 복잡해 지고 상속 관련해서 padding, margin 값을 건드리게 되면 문제가 생기..

웹 프론트엔드 기초 03 한동안 site 클론 실습(html, css)을 하느라 포스팅을 못하였다. 실습을 하면서 포스팅하기에는 너무 전체적인 맥락이 안잡히고 비효율 적이라서 모든 실습을 진행하고 내가 재정리해서 필요한 부분만 올릴 예정이다. 현재 실습 강의를 모두 수강 하였고 구글링하여 덪붙여 포스팅해야겠다. 1. Clone HTML, CSS 지난 시간에 Django site를 Clone 하기 위해서 사이트의 레이아웃을 분석하고 html의 형식으로 큰 부분으로 구체화 시켰다. 사이트의 HTML,CSS를 만드려면 지난 시간과 같이 분석이 제일 중요하다. 분석을 통해서 전체적인 구성 그리고 각 구성부분의 구체적인 구성요소를 지정하는 것이 중요하며, 또한 CSS를 할 것을 생각하여 공통적인 css 특징을 같..

웹 프론트엔드(web front end) 기초02 1. CSS 박스 모델 모든 html 요소는 박스의 형태로 배치가 됨 -> CSS 박스 모델 영역 구성 : 내용(content) 영역 -> 안쪽 여백 영역(padding) -> 테두리 영역(border) -> 바깥 여백 영역(margin) paddig, border, margin 영역 모두 상화좌우 영역 값 조정 가능 1) content 영역 width, height 로 영역 조정 가능(고정, 상대값 모두 가능 -> px , em , %) w,h 값 없으면 글씨 크기 만큼의 영역이 지정 inline 요소의 경우 (a, span) w,h 의 영향을 받지 않음. 단, img 요소와 같은 멀티미디어 요소의 경우 w,h 값의 영향을 받음 2) paddig 영역 ..

웹 프론트엔드(web front end) 기초01 1. 서버와 클라이언트 클라이언트 : 정보를 요청하는 자 서버 : 정보의 요청을 받아 응답 하는자(정보 혹은 서비스를 제공하는 컴퓨터 or 프로그램) 주의) 상대적인 개념, 서버도 요청을 보낼 수 있음 그러면 반대 관계가 가능 ex) 클라이언트(웹 브라우저) - 요청 > 서버(웹 서버) 클라이언트(웹 브라우저) < 응답 - 서버(웹 서버 , index.html) 2. 웹 동작 원리 HTTP : 리소스를 주고 받는 형식의 약속(프로토콜) 1) 사용자가 웹 브라우저에 url 입력 2) 웹 브라우저가 url 해석 3) 해석결과로 서버에 HTTP 요청 4) 서버 요청 확인 및 요청 문서 찾기 5) 웹 브라우저로 HTTP 응답 송신 6) 웹 브라우저 수신 받은 H..