[CSS] 레이아웃, Selector Chapter - 웹 앱 화면 설계하기

 

Achievement Goals

 

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.

 

 

와이어프레임을 직역하면 골격으로 그림으로 따지면 바탕스케치라 할 수 있다. 전체적인 틀을 짜고 구조를 간단한 모양으로 미리 묘사하는 걸 뜻한다. 웹이나 앱을 개발할 때 레이아웃의 대략적인 모양과 구조를 시각적으로 묘사하여 프로그램의 목적을 쉽게 알아볼 수 있게 한다.

 

• 와이어프레임만 보고 HTML로 코딩할 수 있다.

 

와이어프레임을 HTML 로 코딩하는 것은 와이어프레임으로 전체적인 구조를 짜놓고 그 구조를 HTML 언어로 표현하는 것이다. 

 

• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.

 

페이지를 영역으로 구분하기만 한다면 시맨틱 태그는 필요하지 않을 수도 있다. 하지만 각 영역이 어떤 역할을 수행하고 그 영역의 목적에 맞게 시맨틱 태그를 구분하면 쉽게 알아 볼 수 있다.

 

• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

 

id 와 class 는 태그를 쉽게 지칭할 수 있도록 이름표를 달아준다고 생각하면 된다. id 는 단 하나만 존재하여야 하며 동시에 조작해야할 필요가 있을 때에는 class를 사용하여 같은 class를 가진 태그들을 동시에 조작할 수 있다.