레이아웃 구성 이해

▶ uI / GUI

 - UI : User Interface

 - GUI : Graphic User Interface

 

1) 레이아웃 구성의 규칙

 - 화면 설정 : 기본적인 화면 설정 내용 전달

 - 공통 규칙 : 공통적인 리소스 정보를 전달함.

 - 구성 항목 : 네비게이션, 테이블, 툴팁, 탭, 아이콘

 - 레이아웃 : header, container, footer

 - 네이밍 : 공통 규칙에 따라 파일명을 정한다.

      공통 : 형태_의미_상태. 대분류_중분류_소분류

      이미지 : 영문 소문자, 숫자

      css _ 컨셉 분류에 따라 '서비스_대분류명'

 

카멜 표기법	낙타 등 모형이 닮았다 하여 붙여진 이름
파스칼 표기법	member name 이라는 변수를 만들때 member Name 형태의 모형으로 변수를 만들 수 있다. member info class -> MemberInfoClass
헝가리 표기법	변수의 타입을 앞에 지정하는 방식 member name ->strMemberName 혹은 str_member_name
언더바스코어	단어 단어마다 _를 붙여서 표기하는 방식 member name -> member_name

 

▶HTML레이아웃 구성시 사용되는 태그 종류

<div></div>	일반적으로 많이 사용되는 태그
<nav></nav>	메뉴를 구성할때 쓰는 태그
<header></header>	페이지의 상단을 구성할때 사용하는 태그
<footer></footer>	페이지의 하단을 구성할때 사용하는 태그
<ul></ul>	li와 같이 사용되며, 컨텐츠 표현과 레이아웃 구성시에도 사용
<li></li>	ul이 부모 객체인 리스트 출력시 용이함

 

▶CSS레이아웃 구성시 주로 사용되는 태그 속성

float	블럭요소의 객체를 정렬할때 쓰는 속성 - 속성적용된 객체는자동 가로 사이즈 100%가 해제된다.
clear	float으로 정렬된 속성을 해제할때 쓰는 속성
maargin	선택된 객체의 외부 여백
padding	선택된 객체의 내부 여백
width	가로 사이즈 ( min-width : 최소 가로사이즈 , max-width : 최대 가로사이즈 )
height	세로 사이즈 (min-height : 최소 세로사이즈 , max-height : 최대 세로사이즈 )