freeCodeCamp 프리코드캠프 (7) 썸네일형 리스트형 1-7 CSS 그리드 - CSS Grid 알아야 할 내용 HTML CSS 시각 디자인 - Applied Visual Design 접근성 - Applied Accessibility 반응형웹다지인 원칙 - Responsive Web Design Principles CSS 플렉스 박스 - CSS Flexbox 소개 CSS 그리드를 사용하면 복잡한 웹디자인이 훨씬 쉬워진다. CSS 그리드는 HTML 엘레먼트를 그리드 콘테이너로 만들어, 행과 열로 정렬할 수 있다. 또한 칠드런 엘레먼트 (children, 하위 아이템) 를 그리드 콘테이너 내 어디에 어떻게 배치시켜야 하는지 설정할 수 있다. 목록 CSS 그리드 만들어보기 - Create Your First CSS Grid 그리드에 콜럼(column) 만들어 보기 - Add Columns with gri.. 1-6 CSS 플렉스 박스 - CSS Flexbox 알아야 할 내용 HTML CSS 시각 디자인 - Applied Visual Design 접근성 - Applied Accessibility 반응형웹다지인 원칙 - Responsive Web Design Principles 소개 웹사이트에서 유저 인터페이스 (User Interface, UI) 에는 두 가지 구성분이 있다. 첫 번째로는 색상, 폰트, 이미지 등과 같은 시각적인 엘레먼트가 있다. 두 번째로는 첫 번째에서 언급한 엘레먼트를 어디에 위치시켜야 하는지 화면 상에 구성을 어떻게 해야 하는지에 대한 부분이다. 반응형 웹디자인에서는 여러 사이즈의 브라우저와 기기에 스스로 맞춰지도록 UI 레이아웃을 갖춰야 한다. CSS3 에서는 플렉스박스라고 하는 기술이 소개되었다. 플렉스박스로 UI 의 구성이 변화하는 .. 1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles 알아야 할 내용 HTML CSS 시각 디자인 - Applied Visual Design 접근성 - Applied Accessibility 소개 오늘날에는 웹에 접근할 수 있는 기기의 종류가 굉장히 많다. 데스크톱 컴퓨터, 태블릿, 모바일 등으로 종류도 많고, 크기도 제각각이다. 리스폰시브 웹 디자인 (responsive web design, 반응형 웹 디자인) 이라는 컨셉은 이러한 여러가지 종류의 기기에 알맞게 웹 콘텐츠를 디자인하기 위한 것이다. 이러한 여러가지 다른 점을 수용할 수 있도록, 웹페이지의 구조와 CSS 룰에 대해 고심해야 한다. 일반적으로는 우리가 타게팅하는 유저가 사용할만한 기기를 바탕으로 CSS 를 짜는 것이 맞다. 대부분의 유저가 모바일 기기를 사용할 것이라고 생각된다면, '모바일 .. 1-4 접근성 - Applied Accessibility 알아야 할 내용 HTML 살펴보러 가기 CSS 살펴보러 가기 Applied Visual Design 살펴보러 가기 Applied Accessibility 소개 "Accessibility", 즉 접근성은 일반 사람보다는 장애가 있는 사람들이 얼마나 쉽게 콘텐츠에 접근할 수 있는지 의미한다. 웹사이트는 인간의 능력이나 자원에 구애 받지 않고 모든 사람들이 쉽게 접근할 수 있어야 한다. 장애가 있는 사람들과 같은 경우, 스크린 리더 (screen reader, 화면 읽기), 보이스 레코그니션 (voice recognition, 음성 인식) 등의 기술을 이용하여 콘텐츠에 접근한다. 어떤 사람과 같은 경우는, 키보드 밖에 사용하지 못 하는 경우도 있다. 개발을 할 때에는, 이러한 모든 사람들을 염두에 두고 시작해.. 1-3 시각 디자인 - Applied Visual Design 알아야 할 내용 HTML 살펴보러 가기 CSS 살펴보러 가기 Applied Visual Design 소개 웹 개발에서의 비주얼 디자인은 굉장히 범위가 큰 주제이다. 여기에는 타이포그래피(typography, 사전적 의미는 인쇄술 혹은 활판 기술) , 색에 대한 이론, 그래픽, 애니메이션, 페이지 레이아웃 등이 모두 포함된다. 기본적으로 웹 콘텐츠는 유저에게 정보를 제공하는 것이 목적이다. 이 때 비주얼 디자인은 콘텐츠가 어떻게 보이는지, 어떤 식으로 전달 되는지, 그리고 유저가 어떤 경험을 할 수 있는지 등을 좌우한다. 앞서 배웠던 바와 같이, HTML은 웹 페이지의 전반적인 구조와 틀을 만들고, CSS는 레이아웃과 모습을 만든다. 이번에는 개발자가 어떻게 각자만의 비주얼 디자인을 만들어 나가는지 공부해.. 1-2 CSS 알아야 할 내용 HTML 배우러 가기 목록 Introduction to Baisic CSS Change the Color of Text Use CSS Selectors to Style Elements Use a CSS Class to Style an Element Style Multiple Elements with a CSS Class Change the Font Size of an Element Set the Font Family of an Element Import a Google Font Specify How Fonts Should Degrade Size Your Images Add Borders Around Your Elements Add Rounded Corners with border-radi.. 1-1 HTML 목록 HTML (Hyper Text Markup Language - 하이퍼 텍스트 마크업 랭귀지) 화면구성 이해하기 HTML 시작해보기 - Say Hello to HTML Elements 제목글 만들어보기 - Headline with the h2 Element 일반 문장 넣어보기 - Inform with the Paragraph Element 임시의 문장 넣어보기 - Fill in the Blank with Placeholder Text 언코멘트 살펴보기 - Uncomment HTML 코멘트 만들기 - Comment out HTML 엘레먼트 지우기 - Delete HTML Elements HTML5 엘레먼트 소개 - Introduction to HTML5 Elements 웹사이트에 이미지 추가하기 - A.. 이전 1 다음
