★★★ ▶ Libre Web Publisher - images_ex_2 ◀ ★★★ (boxModeling Layout)

[웹디자이너&웹퍼블리셔, 하드코딩 실습용 이미지 입니다.]

 

 

 

[공유마당 자유이용 사이트]

https://gongu.copyright.or.kr

 

 

 

    

 

  

  

 

  

  

 

  

  

 

 

 

 

 

 

 

 

     

    

   

 

 

   

 

  

    

 

 

     

 

 

00-CSS_레이아웃(포지셔닝)실습_텍스트.txt

다운로드

 

 

  

   

 

 

 

 

    

 

+ + + + + + +

 

 

 

images_ex.zip

다운로드

background_images.zip

다운로드

 

 

[CSS Layout Float Box Modeling]

layout.zip

다운로드

 

Box Modeling 1 - css / float

190415-01_화면설계기초.html

다운로드

 

Box Modeling 2 - css / float

190415-02_화면설계기초.html

다운로드

 

[Box Images]

 

 

 

 

imgBannerBox.zip

다운로드

 

 

 

 

 

[Banner Images]

 

 

+ + + + + + +

!! 디자인 베리에이션(Design variation) !!

처음 제작한 하나의 디자인 시안을 모티브로, 여러가지 형태의 변화를 시도해 시안 디자인을 추가로 수정보완해 제작해 보는 것!!

 

하나의 디자인을 뽑았을때 이 디자인이 가지는 속성을 다양하게 변화시켜 보는 행위를 Variation(변화) 이라고 한다.

 

디자인이라는 것은 다양한 속성을 지닌 결합체이다.

크기, 색상, 질감 등등 다양한 속성이 어우러져 하나의 "디자인" 이 완성되는 것인데, 이것을 조금더 나은 결과물로서 도출해내기 위해 다양한 변화를 시도해 보는 과정이다.

 

 

 

색상에 대한 베리에이션이라면...

 

디자인이 가지는 "색상" 이라는 속성에 변화를 줘보고 어떠한것이 가장 나은가를 최종 선택하는 행위를 의미한다.

 

(베리에이션 작업!! 시안디자인 결과물 3개 이상 제작해 보기)

[Variation Sample - Event Banner]

 

 

 

 

 

 

[Event Banner Sample]

 

 

 

 

 

 

 

 

 

[sample_01]

 

 

[sample_02]

 

 

 

  

  

 

 

[sample_03]

 

 

 

 

 

 

 

        

    

  

  

  

 

 

 

 

 

 

 

 

 

 

      

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Header & Footer Images

 

 

 

 

 

 

 

Box Modeling 3 - css / float

190415-03_화면설계(응용).html

다운로드

 

 

Box Modeling 4 - css / float

190415-04_화면설계(응용_이미지삽입).html

다운로드

 

 

Box Images

    

     

     

 

 

Box Modeling 5 - css / float

cssFloatBoxModelingBasicSource_YoonSemCom.html

다운로드

 

[Box Modeling - Main visual image box sample]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

  

  

  

 

 

 

Box Modeling 6 - css / float

cssFloatBoxModelingBasicSourceV2_YoonSemCom.html

다운로드

 

 

 

 

[Box Modeling - Contents Layout Sample]

 

+++ 위메프 +++

 

+++ 네이버 1 +++

 

 

 

+++ 네이버 2 +++

 

 

 

 

+++ ZUM 1 +++

zum_site.zip

다운로드

 

 

 

 

+++ ZUM 2 +++

 

 

+++ 다음 +++

 

 

+++ 삼성 +++

 

 

 

Box Modeling 7 - css / float

cssFloatBoxModelingBasicSourceV3_YoonSemCom.html

다운로드

 

 

Box Modeling 8 - css / float

cssFloatBoxModelingBasicSourceV4_YoonSemCom.html

다운로드

 

 

Box Modeling 9 - css / float

uiuxDesign_gnbMunu-01.html

다운로드

cssFloatBoxModelingBasicSourceV9_YoonSemCom_end1.html

다운로드

 

 

[추가 기초 실습소스 - float + gnb + semantic + video ]

cssLayoutBoxModelingSource.zip

다운로드

    /    PW 9112??

 

 

 

Box Modeling 10 - css / float & position:fixed;

(우측 배너고정)

cssFloatBoxModelingBasicSourceV10_YoonSemCom_end2(position_fixed_banner).html

다운로드

 

 

 

Box Modeling 11 - css / float & position

박스모델링_실습과제_1번_float(윤샘컴교실).html

다운로드

박스모델링_실습과제_1번(윤샘컴교실).html

다운로드

박스모델링_실습과제_2번_position(윤샘컴교실).html

다운로드

 

 

 

 

[추가 응용실습]

(우측 배너고정)

 

 

uiuxDesign_gnbMunu-02.html

다운로드

(헤더 영역 / GNB 2단 메뉴, 모듈소스 삽입)

 

uiuxDesign_gnbMunu-02(end).html

다운로드

 

 

 

 

[Background Images]

 

 

[Background Box Images]

 

js_images_190617.zip

다운로드

js_images_190627.zip

다운로드

js_images_190624.zip

다운로드

 

 

 

 

 

 

 

 

 

 

 

 

◆ 로그인 없는 편안하고 자유로운 사이트... (^(oo)^) 윤샘 컴교실 ◆
edyoon.tistory.com