인터랙티브 웹 Part1_기본 문법부터 시작

두번째 회사로 옮기고, 정말 오랜만에 블로그에 글을 작성하게 되었다..너무 오랜만에..

정신없이 놀기도 했고, 적응하며 나름 바쁘게 시간을 보냈는데 이제는 공부도 조금씩 해보려고 한다..ㅎㅎ 언제 멈출지 모르지만..

우선 연구실에 있을 때부터 정말 공부 해보고 싶었던 UI/UX를 끄적여보고자 이전 회사에서 "인터랙티브 웹 페이지 만들기" 라는 책을 샀는데, 이걸 지금 처음 펴본다...!

 

무튼 그래서

이번 해에는 Interactive Web 쪽과 DB(튜닝쪽을 공부해보고 싶음) & 영어 & 회계,,,,,피할 수 없는 회계 공부까지 천천히 해보려고 한다.

 

잡담말고 바로 ㄱ

 

-----------------------------------------------------------------------------------------------------------------

 

[ 기본 문법을 들어가기 전에.. ]

 

UI: 사용자가 특정 컨텐츠를 이용할 때 만나는 접점, 즉 사용자 환경을 의미함

  ex) 아이콘, 툴바, 로고, 메뉴, 배너 등등

 

UX: 사람들이 특정 컨텐츠를 사용할 때 UI에서 느낄 수 있는 사용자 경험을 의미함

  ex) 게시판에 접근할 때 A 웹페이지에서는 메뉴를 3회 클릭해야 하는데, B에서는 1회만 클릭해도 되면 B가 사용성이 더 좋다고 말함 

 

Interactive UI/UX  : 사용자와 상호 작용하는 여러 모션과 동적인 컨텐츠를 사용하는 환경

  ex) 화면을 좌우로 밀면 컨텐츠 화면이 슬라이드 되면서 바뀜 / 특정 버튼을 클릭하면 모션이 나타나 방문자의 시선을 끄는 환경등 

 

[ 기본 문법 ]

 

* 너무 기본적인 태그들은 넘어 가겠음

--> 넘기다 보니 1장의 2/3가 넘어갔다..

업무 하면서 잘 쓰지 않던 문법들  & 매번 구글링으로 때웠던 문법들 위주로 정리해보려고 함

 

• float - 블록 요소 좌우로 배치하기: 2개 이상의 블록 요소를 한줄에 배치하려면 float 속성을 사용해야 함

/* float을 이용한 블록요소 좌우로 배치하기 */
.wrap {
	width: 800px;
	margin: 100px auto;
	border: 5px solid black;
}
.wrap .left {
	width: 400px;
	height: 400px;
	background-color: pink;
/* float 속성 추가하기 */
  float: left; 
}
.wrap .right {
	width: 400px;
	height: 400px;
	background-color: lightblue;
/* float 속성 추가하기 */
  float: left; 
}

=> float을 사용해 좌우로 띄움 

==> 이때 section 요소가 좌우로 배치 되었지만 부모 요소인 .wrap이 자식 요소의 높잇값을 인식하지 못해 테두리를 제대로 감싸지 못함 

.wrap::after {
	content: '';
	display: block;
	clear: both;
}

=> block 속성으로 강제 변경하고, clear: both 를 적용하면 부모 요소가 float의 영향을 해제해 높잇값 인식 

 

• z-index : 겹쳐 있는 요소의 z축 순서 지정하기 

* 사실 z-index 가 궁금해서 여기까지 달려옴

- z-index 값이 큰 요소를 무조건 위로 올림 

설명이 이게 끝,,

 

적은건 이게 다지만 나름 3장까지 다 보며(훑어보며) 공부했다.

사실 문법 공부만 하니까 재미가 없어서 실습을 진행하며 그때그때 문법을 정리하는 방식으로 진행할 예정이다. 

 

그리고

만들어 보고 싶은 웹 페이지가 생겼다..그걸 동기로 심어두고 차근차근 공부해야지

 

다음 글에서는 CSS3의 인터랙티브 모션 기능을 공부할 예정