오물오물 개발일기

Position - 요소를 원하는 위치에 자유롭게 이동시키기 위한 property - static | relative | absolute | fixed | sticky - top, left, bottom, right 를 사용하며 위치 시킬 수 있습니다. - top & left, top & right, bottom & left, bottom & right 등의 조합으로 사용 - 사용한 property의 교차점 기준으로 계산을 합니다. static - position : static; - 모든 요소의 기본 position relative - position : relative; - 본래 본인 위치를 기준으로 부모요소에서 떠있으나 위치를 기억하며 움직입니다. red green blue .test-contain..

Float - float : left | right | none; - 부모의 요소에서 나와서 떠있게 됩니다. 🛬 - 기본적으로 block를 가지게 됩니다. - 텍스트의 경우엔 float 된 content를 인식하여 자동으로 배치됩니다. - 구성한 레이아웃이 망가질 가능성이 많습니다. https://developer.mozilla.org/ko/docs/Web/CSS/float float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org 🚑 Float - fixed - 부모요소에 over..

🧱 Block - display : block - width = 부모의 width 100%로 사용합니다. - 별도의 width값을 지정하게되면 width를 적용 후 남는 공간은 margin으로 채웁니. width margin .test-container { background-color: #f2f2f2; } .test-container__width { background-color: red; } .test-container__margin { background-color: yellow; width: 500px; } ⛸️ Inline - 한 라인안에 같이 들어가게 됩니다. - width, height 지정이 불가능하며 padding, maring, border의 top, bottom이 적용 되지 않습니다...

📚 Box Model ? - 누군가에게 선물을 하려면 어떻게 해야할까요? 보통은 선물이 될 내용물을 먼저 구매하고 선물에 맞는 크기의 포장지, 상자를 결정하게 됩니다. 웹상에서도 동일합니다. Tag는 기본적으로 box의 형태로 되어있습니다. 이용자에게 보여주기 위한 내용물(content)를 HTML으로 작성하게 되고 내용물(content)을 담기 위한 상자(box) 크기를 width, height, padding, border, margin 등으로 지정 합니다. 1. 구성요소 - content : box의 내용물, 가로는 width, 세로는 height 로 표현됩니다. - padding : content 와 broder 사이의 공간을 나타냅니다. - border : box를 구성하는 테두리 더보기 * b..

✨ CSS - Cascading Style Sheet - HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트언어입니다. HTML로 문서의 골격을 잡는다면 CSS는 이 문서를 꾸며주는 화장의 역할을 합니다. 글꼴, 배경색, 크기, 위치 등을 변경할 수 있도록해줍니다. 1. 기본구조 selector { property : value; /* declare */ } 2. 사용법 - External, Internal, In-line 처럼 3가지의 방법이 있습니다. 1. External CSS - css파일을 따로 작성하여 link & @import 등의 방식으로 사용하는 방식입니다. - 여러 문서의 css 작업에 대하여 작업이 용이합니다. - 가장 표준이되고 많이 사용되는 방식입니다..

* 생활코딩 강의를 기반으로 정리 된 글 입니다. * JavaScript - 객체 (Object) 정보의 양이 많아졌을때 연관된 정보를 순서대로 정리정돈 하기위한 방법 (배열) 이름을 정해주고 정리정돈을 하기 위한 방법 (객체) 메모리에 탑재될때 Reference 형식으로 탑재된다. 객체를 생성해주고 모든 객체의 key와 keyValue를 나열 할 수 있다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - function(함수) : 리턴(return) return을 이용하여 값을 도출 할 수 있다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * function(함수) : 매개변수(Parameter)와 인자(Argument) function (함수)와 매개변수, 인자를 사용하여 함수를 사용 할 수 있다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - event 사용자가 특정 동작을 했을 경우 웹에서 반을을 해주기 위함 hi button을 클릭시 (onclick) alert 창으로 'hi !' 라는 문구를 띄어주었다. 이번에는 input 창에 텍스트를 입력하거나 수정하면 (onchange) alert 창으로 'change'라는 문구를 띄어주었다. 마지막으로 input창에서 방향키를 조작하니 키입력을 감지하였다며 (onkeydown) 'key down' 이라는 문구가 뜬다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - 맛보기 JavaScript는 사용자와 상호 작용을 하여 웹페이지를 동적으로 바꿔준다. 버튼 두개를 생성하고 night 버튼 클릭시엔 배경색이 black으로 글자색은 white로 변경 되게 작성 하였다. day 버튼 클릭시엔 배경색이 다시 white로 변경되고 글자색은 black로 변경 되게 작성 하였다.