라쿤의 끄적끄적

CSS05 배치 position 속성 요소의 위치 지정 기준 기본값 : static (기준 없음) 가능한 값 relative (요소 자신이 있었던 위치를 기준) 주의) 배치전 자리는 시각적으로 비어 있음 (자리를 차지함) absolute (위치 상 부모 요소를 기준) 이전에 있던 자리를 차지 하지 않음 부모를 특정하게 지정하고 싶으면 position: relative를 통해 기준을 정해줘야 함 absolute를 사용한 요소 기준으로 position: relative를 사용한 조상요소를 처음으로 만날때 그 조상요소가 기준이 됨 (모두 찾지 못하면 최종적으론 뷰포트 기준이 됨) fixed (뷰포트를 기준으로 고정되어 있음) sticky (스크롤 영역 기준) 같이 사용하는 속성 (위치 값을 위한 속성) top..

CSS04 크기 계산(box-sizing) padding과 border의 값은 요소의 크기를 키우기 때문에 수정시 계산하기 어려운 문제가 발생함 box-sizing 요소의 크기 계산 기준을 지정 기본값 : content-box (요소의 내용으로 크기 계산) 지정할 수 있는 값 : border-box (요소의 내용 + padding + border로 크기 계산) 넘침 제어(overflow) 요소의 크기 이상으로 내용이 넘쳤을때(자식이 부모의 크기를 넘치는 경우), 보여짐을 제어하는 단축 속성 넘치는 주체가 아닌 부모 요소에 사용 기본값 : visible (넘친 내용을 삐져나오게 그대로 보여줌) 지정 가능한 값 hidden : 넘친 내용을 잘라냄 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성..

CSS03 CSS 속성(Properties) HTML 속성 : Attributes CSS 속성 : Properties JS 속성 : Properties 박스 모델 width , height 요소의 가로/세로 너비 기본 값 (property가 선언되지 않은 경우) auto : 브라우저가 너비를 계산 인라인 요소(auto 값) 콘텐츠 크기 만큼 width, height가 맞춰짐 (예. span 태그, 인라인 요소에서 특정 너비 값은 무시됨) 블록 요소(auto 값) width는 부모 요소의 크기 만큼 자동으로 맞춰짐 height는 내부의 콘텐츠 크기만큼 자동으로 맞춰짐 (예. div 태그) 지정 할 수 있는 값 px, em, vw 등 단위로 지정 max-width, max-height 요소가 커질 수 있는 ..

CSS01 CSS syntax 선택자{속성: 값; 속성: 값} 선택자 : 스타일을 적용할 대상 속성 : 스타일의 종료 (예.color) 값 : 스타일의 값 (예.blue) 속성과 값은 한줄에 하나의 속성과 값만 들어가게 하고 indent를 사용해서 쓴다. CSS 선언 방식 내장 방식 : html내부에 style 태그 내부에 내용을 작성하는 방식 인라인 방식 : html의 요소에서 style의 전역속성을 통해 직접 스타일을 작성하는 방식 최우선 순위라서 나중에 덮어쓰며 수정이 불가능 하다. 수정 시 악영향을 미침 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식 (보통 링크방식 사용) 병렬 방식, 한번에 가져와서 연결하고 빨리 해석되는 CSS를 먼저 연결 import 방식 : 최초 연결은 링크방..

바닐라 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..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. CSS 적용하기 기본적으로 dorder-box 단위 처리 * { box-sizing: border-box; } 기본 폰트 si..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. 완료한 project와 해당 사이트 비교해 보기 momentum 사이트 (클론하고자한 크롬 앱) 내가 구현한 크롬앱 기존에 완..

웹 프론트엔드 기초 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..