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

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..

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