개발자를 희망하는 초보의 자기개발 이야기

CSS 레이아웃 HTML 구성하기 : 기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐릅니다. 먼저 수직으로 분할하고, 수직으로 분할된 div에서 height 속성을 이용해 수평 분할을 하면 큰 도움이 됩니다. flex레이아웃을 위한 기본 구성은 아래와 같습니다. a b c 레이아웃 리셋 : HTML 문서의 기본 스타일이 레이아웃을 잡는데 방해가 될 수 있습니다. 이때 reset 라이브러리를 활용할 수도 있지만 아래의 코드만으로도 충분합니다. * { box-sizing: border-box; } body { margin: 0; padding: 0; } Flex : flex는 부모 박스에 display: flex를 적용해줌으로, 자식 박스의 방향과 크기를 결정하는 레이아웃입니다. 기본 크기를 바탕..

CSS Selector : HTML 요소에 스타일을 적용할 때 어떤 요소에 적용할 지 셀렉터로 구분해서 선택합니다. 셀렉터에 따라 다양한 사용법이 존재하고 범위가 다릅니다. 전체 셀렉터 : HTML 문서 내의 모든 요소를 선택합니다. 일괄적용을 해야할 때 사용합니다. * { font-family: "Times New Roman", serif, sans-serif; } 태그 셀렉터 : 지정된 태그명으로 요소를 선택합니다. h1 { color : blue; } body { background-color : green; } ID 셀렉터 / Class 셀렉터 : 설정된 id나 class명을 찾아서 선택하는 셀렉터 입니다. class는 중복사용이 가능하나 id는 고유하게 사용해야 합니다. id는 '#'으로, cl..

Sprint - Koans 서문 : 스프린트 진행중 헷갈렸던 부분이나 어려웠던 부분들을 따로 모아두고 추후 복습할 수 있는 기회를 가지고자 합니다. 02_Types-part1 : ==의 경우 예외사항이 너무 많아 프로그램의 작동을 예측하기 다소 어렵게 만듭니다. 예외 사항을 외우기 보다는 대표적으로 최대한 같은 타입끼리 연산을 하고, 즉 엄격한 동치 연산('===')을 사용하고, 조건문에 비교 연산을 명시하는 것이 훨씬 좋습니다. ==와 === 비교 더보기 expect(123 - '1').to.equal(122); // 문자열 + 숫자 = 문자열 이지만 - 는 그대로 숫자로 진행됨. expect(1 + true).to.equal(2); // 컴퓨터는 0, 1로 모든 것을 구분하기 때문에 기본적으로 fal..

CSS 기초 CSS 소개 : HTML은 웹페이지의 구조를 담당하는 마크업 언어이고, CSS는 디자인요소를 시각화하는 스타일시트 언어이며, JavaScript(이하 JS)는 단순한 웹페이지를 프로그램으로 만들어 사용자와 상호작용할 수 있게 해주는 언어입니다. 즉, HTML은 구조화, CSS는 시각화, JS는 동적 처리를 담당합니다. : CSS는 적당한 위치에 콘텐츠 배치(레이아웃), 텍스트 강조와 같은 타이포그래피, 접근성을 생각하여 만들어야 합니다. 결국 앱이든 웹페이지든 사용자가 있어야 존재하는 것이기 때문에 UI(User Interface)가 중요합니다. CSS는 그런 부분에서 디자이너와 경계가 겹치는 부분이 있습니다. CSS 따라하기 : CSS는 그 자체만으로 독립적으로 기능하지 않습니다. 반드시 ..

HTML 기초 기본 구조와 문법 : HTML은 웹페이지의 구조를 담당하는 마크업 언어이고, CSS는 디자인요소를 시각화하는 스타일시트 언어이며, JavaScript(이하 JS)는 단순한 웹페이지를 프로그램으로 만들어 사용자와 상호작용할 수 있게 해주는 언어입니다. 즉, HTML은 구조화, CSS는 시각화, JS는 동적 처리를 담당합니다. : HTML은 태그(tag)들의 집합입니다. 태그란 부등호()로 묶인 HTML의 기본 구성 요소입니다. 와 같은 여는 태그와 와 같은 닫는 태그 한 쌍으로 이루어져 있습니다. 한 쌍의 태그 안에 내용(Content)이 들어가고 이렇게 구성된 태그 전체를 통틀어 요소(element)라고 합니다. 제목 : body 태그 아래에 div 태그와 h1 태그가 들여쓰기로 배치되었습..