제품을 만들기에 앞서서 시제품(prototype)을 만들게 된다. 웹사이트를 제작 할 때에도 HTML과 CSS 및 Js를 적용하기에 앞서서 일종의 시안이나 도안이 필요하다. 우리는 그것을 와이어프레임을 통해 만들 수 있다. 와이어 프레임 와이어프레임은 '선'이라는 의미를 가진 와이어와 '틀'이라는 의미를 가진 프레임이 합쳐진 언어로 '선으로 이루어진 틀'을 표현한다. 즉, 와이어프레임은 내가 만들 사이트가 어떻게 구성될지 간단히 설계하기 위해 만들어졌으며, 제품의 제작에 앞서 제품의 레이아웃과 구조를 간략하게 보여주기 위한 용도로써 사용된다. 목업 목업은 '실물크기의 모형'을 뜻한다. 즉, 목업 사이트를 구현한다는 것은 실제로 원본의 사이트와 매우 유사하지만 그 기능이나 이용에 제한이 있는 사이트를 뜻한..
flexbox의 핵심 개념 부모자식관계를 지칭하는 트리구조를 가지고 있다. 즉, 부모에 요소를 적용하여 자식의 레이아웃을 유연하게 구성하는 방법이다. flexbox를 활용한다면 요소를 정렬하고 영역을 지정하는 것을 보다 쉽게 할 수 있다. Flexbox의 활용 Flexbox는 속성을 사용할 때 '부모 요소'와 '자식 요소'에 사용하는 속성들이 있다. 부모에게 적용하는 속성 flex-direction 속성은 부모 요소에 설정하는 속성이며, 정렬축을 결정하는 역할을 한다. flex-direction 주요 속성값은 row(가로,좌우), column(세로, 위아래), row-reverse(가로,우좌), column-reverse(세로, 아래위)가 있다. jutify-content 속성은 자식 요소들을 축의 수평..
우리는 책을 읽거나 웹툰을 볼 때 '좌에서 우','위에서 아래'로 보는 것이 자연스럽습니다. 이처럼 누가 가르쳐주지 않아도 자연스럽게 다양한 컨텐츠를 읽을 수 있는 이유는 우리가 이러한 환경이 익숙하기 때문입니다. CSS는 사용자와 애플리케이션이 상호작용 할 수 있도록 시각적 도움을 주는 역할을 수행합니다. 따라서 화면 레이아웃을 구상 할 때, '좌에서 우','위에서 아래'의 흐름으로 컨텐츠를 제작하는 것이 유저 경험 (UX: User Experience)적인 측면에서 좋습니다. 레이아웃을 설정 할 때는 기본적으로 '수직분할'과, '수평분할'을 적용하는데요, 수직분할: 화면을 수직으로 구분하는 것을 뜻합니다. (컨텐츠가 가로로 배치됩니다.) 수평분할: 요소를 수평으로 구분하는 것을 뜻합니다. (컨텐츠가 ..
CSS의 역할 앞선 HTML에 대해서 설명할 때 HTML 구조를 잡아주는 역할을 하게된다고 배웠다. 반면, CSS는 HTML의 구조에 스타일과 레이아웃을 정해주는 역할을 한다. CSS는 다른 말로 스타일시트 언어라고 한다. HTML로만 구성된 화면은 유저 친화적이지도 않고 어떠한 기능도 구현되지 않는다. 즉, 우리는 CSS를 통해 좀 더 스타일리쉬한 UX를 제공할 수 있다. 그렇다면 개발자는 CSS로 무엇을 만들 수 있을까? 사용자 인터페이스(User Interface)와 사용자 경험(User Exprience) 인터페이스는 사물과 사람이 물리적으로 연결될 수 있도록 만들어진 영역이다. 사용자 인터페이스는 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령 할 수 있도록 만든 인터페이스(interface)와 사..
