'분류 전체보기'에 해당되는 글 27건

2024.02.28 UI/UX 디자인의 중요성
2017.09.13 포토샵 플러그인 GUIDE GUIDE 4
2017.04.13 hover 메뉴 만들기
2017.04.12 팝업 뛰우기
2017.04.06 에어팟(AirPods)을 귀에 딱맞게 쓰는 영리한 방법~ 7
2017.04.05 텐핑가입하기
2017.04.05 자바스크립트,카드
2017.04.03 자바스크립트/ 시작
2017.03.27 제이쿼리-스크롤제어
2017.03.06 java script 01
2017.03.01 css/ inline 알아보기
2017.02.22 태광실업 반응형 사이트
2017.02.20 CSS 시작???
2017.02.20 HTML 시작!~ 1
2017.02.20 Firefox, 플러그인
2017.02.20 웹표준
2017.02.20 git.저장소 1
2017.02.20 언제인가? 프로토 타입 진도나갈때..메모
2017.02.20 자바스크립트,제이쿼리,SVG 2
2017.02.20 티스토리 html, css 1
2017.02.15 자바스크립트~ 1
2017.02.15 1072시간의 여정
2017.02.15 무선의 자유로움~ 3
2017.02.15 이미지 좋은데? Hero니깐! 2
2017.02.15 영리한 에디터 너의 이름은 아톰 1
2017.02.14 누구에게나 그런날 2
2017.02.14 1072시간 긴여정의 기록

UI/UX 디자인의 중요성

★UX 2024. 2. 28. 10:17

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

UI/UX 디자인의 중요성은 사용자 경험과 직결되어 있으며, 이는 제품이나 서비스의 성공에 결정적인 역할을 합니다. 예를 들어, 스마트폰 앱을 생각해보겠습니다. 사용자가 앱을 처음 사용할 때, 직관적이고 이해하기 쉬운 인터페이스는 사용자가 앱을 계속 사용하고자 하는 욕구를 증가시킵니다. 반면, 복잡하고 이해하기 어려운 인터페이스는 사용자가 앱을 삭제하고 다른 대안을 찾게 만들 수 있습니다.

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

포토샵 플러그인 GUIDE GUIDE (4)	2017.09.13
Firefox, 플러그인 (0)	2017.02.20
웹표준 (0)	2017.02.20
git.저장소 (1)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20

ASOG

UI Design, Ux Design

포토샵 플러그인 GUIDE GUIDE

★UX 2017. 9. 13. 14:31

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

나만 몰랐나?

디자인 작업을 하면서 그리드 작업을 할때면

1px만 틀려도 다시 그리드 작업을 다시 하곤 했습니다.

일단 아래 주소를 클릭해서 프로그램을 설치합니다.

https://guideguide.me/

중략

자세한 내용은 시간날때 다시 작성할게요...

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

UI/UX 디자인의 중요성 (0)	2024.02.28
Firefox, 플러그인 (0)	2017.02.20
웹표준 (0)	2017.02.20
git.저장소 (1)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20

ASOG

UI Design, Ux Design

hover 메뉴 만들기

기타/-자바스크립트&제이쿼리 2017. 4. 13. 18:16

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

마우스 오버할때 배경과 메뉴명이 바뀌는 메뉴를 만들어보자.

<nav>

<ul>

<li><a href="">Description</a></li>

<li><a href="">A. Hover Menu</a></li>

<li><a href="">B. ScrollMove Menu</a></li>

<li><a href="">C. Slide Banner</a></li>

<li><a href="">D. Fade Banner</a></li>

<li><a href="">E. SNS Move List Gellay</a></li>

<li><a href="">F. Wing banner</a></li>

<li><a href="">G. Layout Popup</a></li>

</ul>

</nav>

$(function(){

// A hover menu

$("nav>ul>li").hover(function(){

$(this).find('a').css({'color':'#0042a4','font-weight':'600'})

},function(){

$(this).find('a').css('color','#000')

});

$("nav>ul>li").hover(function(){

$(this).css('background-color','#fff')

},function(){

$(this).css('background-color','#ccc')

});

</script>

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

팝업 뛰우기 (0)	2017.04.12
자바스크립트,카드 (0)	2017.04.05
자바스크립트/ 시작 (0)	2017.04.03
제이쿼리-스크롤제어 (0)	2017.03.27
java script 01 (0)	2017.03.06

ASOG

UI Design, Ux Design

팝업 뛰우기

기타/-자바스크립트&제이쿼리 2017. 4. 12. 01:10

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

제이쿼리인지 자바스크립인지 정확히 잘모르겠으나, 팝업 만들기를 제작했습니다.

자세한 설명은..다음에 하도록 하겠습니다..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>팝업만들기</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
  $(function(){
    function blind(){
      $('body').append("<div class='blind'></div>");
      $('.blind').fadeTo(500,.5)
    }
    $('.popup').click(function(){
      blind()
      console.log('okk')
      $('.popup_wrap').fadeIn();
    })
    $('.close').click(function(){
      $('.blind').fadeOut();
      $('.popup_wrap').fadeOut();
    })
  })
  </script>
  <style>
 
   .blind{
     position: absolute;
     background-color: #000;
     display:none;
     opacity: 0.5;
     left:0;
     right:0;
     top:0;
     bottom:0;
   }
   .popup_wrap{
     width: 300px;
     height: 300px;
     position: absolute;
     border: 1px solid #000;
     left:50%;
     top:50%;
     margin-left: -200px;
     margin-top: -200px;
     background-color: #fff;
     z-index:1;
     display: none;
   }
 
 
  </style>
</head>
<body>
  <button class="popup"> 팝업열기</button>
  <div class="popup_wrap">
    <img src="1072.jpg">
    <button class="close">닫기</button>
  </div>
 
</body>
</html>
 
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

hover 메뉴 만들기 (0)	2017.04.13
자바스크립트,카드 (0)	2017.04.05
자바스크립트/ 시작 (0)	2017.04.03
제이쿼리-스크롤제어 (0)	2017.03.27
java script 01 (0)	2017.03.06

ASOG

UI Design, Ux Design

에어팟(AirPods)을 귀에 딱맞게 쓰는 영리한 방법~

기타/-IT제품리뷰 2017. 4. 6. 23:30

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

사실 에어팟(Apple AirPods)을 사용한지는 꽤 되었는데요.

에어팟을 2016년 12월에 주문하고 한달 가까이 기다리고서 2017년 1월이 되어서야 택배를 받을 수 있었습니다.

주문날짜랑 택배 받은 날짜를 알려드리기에는 지금은 에어팟 주문이 어렵지 않으니 주문관련 내용은 패스 하겠습니다.

이렇게 딱~~

포장을 뜯기전 모습입니다.

박스마져 너무 견고하고 이쁘내요~

이 얇은 비닐포장을 뜯는 설레임이란~

아~~기분이 좋아요~~

순정상태의 에어팟입니다~

제귀에서는 너무나 잘 빠져요~~

특히 런닝을 할때는 음악은 포기해야합니다~

그런데 이게 멀까요??

제가 애기하고 싶은것은 이것인데요?

에어팟을 특성상 분실의 위험이 따르기 때문에

사실 고가이기도 하지만 삼성 무선 이어폰과 가격차이는 많이 나지도 않아요

삼성 제품보다 밧데리 지속시간이 더 길죠~

그래서 삼성제품이랑 비교하는건 개인적으로 좀 우습내요~

애플 유선 이어폰이 귀에서 잘 빠지는 분들이 많이 있으실텐데요

특히나 운동을 할때는 선도 걸리적 거리지만 런닝이라도 하면 귀에서 자꾸 빠지는 경험 있으신가요??

그런데 이걸 딱 끼면 그럴 염려가 사라집니다.

분실의 위험도 적고

애플의 이어폰을 쓰시는 분들이라면 이건 꼭 사야 합니다.

가격도 그리 많이 비싼편도 아니기에 꼭 사면 후회 없습니다.

그렇게 잘 쓰던 EARPOD를 벌써 2번째인데 매번 한쪽만 잃어버려서

이번엔 다홍색으로 주문을 했습니다.

EARPOD를 잃어버리기는 해도 에어팟은 절대 잃어버리지 않아서

다행입니다.

혹시 모르죠 어느날 한쪽만 분실한다면 한쪽만 사야 하는 상황이 올수도.

그래도 에어팟 충전기 일명 치실통이라 불리는 것을 같이 갖고 다니기 때문에 그럴염려는 없는거 같습니다.

전에 쓰던 흰색이나 빨강색 보다 더욱더 쫀쫀하게 잘 맞내요

새거라 그런지 모르겠지만 전에 쓰던 흰색 제품보다는 고무재질 확실히 달라졌습니다.

귀가 불편하지도 않고 저를 위한 에어팟 악세사리인듯 합니다~

이게 없었다면 저는 에어팟을 사용을 못했을 겁니다.

다행이 전부터 유선 애플 이어폰을 이용할때 부터 사용하던 악세사리라서

에어팟이 출시가 될날을 손꼽아 기다려왔었죠~~

전에 쓰던 한쪽 잃어버리고 한쪽만 남은 이어포드 입니다.

전에 색상도 괜찮았지만 이번에 산 다홍색?? 형광빛이 나는 색도 맘에 드내요.

맨처음에는 흰색을 사용했었는데 분리하고 나면 흰색이라 그런지 눈에 잘뛰지도 않아서 어디에 두었는지 찾기도 힘들고

그래서 원색으로 눈에 뛰는 색으로 사용하고 있습니다.

에어팟의 핵심기능?인 시리를 불러내는 터치를 하는것도 전혀 불편합이 없어요.

귀에 꼿을때 착착 붙는 느낌이 혹시나 에어팟이 빠져서 땅에 떨어지면 어떻하지?

이런 걱정은 이어포드 악세사리를 착용하는 순간 그런 마음은 저멀리 사라집니다.

오늘 새로 주문했던 다홍색 이어포드 악세사리 포장은 이렇게 생겼어요.

EARSKINZ라는 브랜드가 보이내요

뒷면은 이렇게 생겼는데요

제조년도를 보니 2014년도 내요 저도 그때쯤부터 이어포드 악세사리를 사용했던거 같내요.

자세히 보시면 위에 애플제품이 보이는데 애플 전용제품에 특화된 상품인거 같아요.

가격은 만원이 조금 넘는 가격입니다~

이렇게 에어팟을 저는 너무나 활용을 잘 하고 있어요

사실 노트북으로 에어팟을 이용을 할수도 있겠지만

저는 데스크탑 컴퓨터에서도 에어팟을 블르투스로 연결해서 사용하고 있어요.

동글이 작은 usb를 데스크탑 컴퓨터 본체에 달아주기만 하면 되는데요.

그 내용은 다음번 포스팅때 설명 드릴게요~~^^

'기타 > -IT제품리뷰' 카테고리의 다른 글

무선의 자유로움~ (3)	2017.02.15

ASOG

UI Design, Ux Design

텐핑가입하기

카테고리 없음 2017. 4. 5. 15:00

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

선배 이메일 등록하기--->> daybyday1072@gmail.com

저작자표시

ASOG

UI Design, Ux Design

자바스크립트,카드

기타/-자바스크립트&제이쿼리 2017. 4. 5. 12:16

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

자세한 설명은...나중에...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
 
  var 카드통 = [];
  console.log("현재 :" + 카드통 +"준비완료");
 
  var 카드모양 = ["하트","클로버","다이아몬드","스페이드"];
  console.log("카드모양셋팅 :" + 카드모양+ "의 카드가 있습니다." );
 
  var 카드모양당갯수 = 13;
  console.log("카드갯수 :" + 카드모양당갯수 +"개 준비완료");
              //4
 
 
 
  for(i=0; i<카드모양.length;i++){
 
      for(j=0; j<카드모양당갯수; j++){
          if(j == 0){
            카드통.push(카드모양[i]+"A")
          }else if(j == 10){
            카드통.push(카드모양[i]+"J")
          }else if(j == 11){
            카드통.push(카드모양[i]+"Q")
          }else if(j == 12){
            카드통.push(카드모양[i]+"K")
          }else{
            카드통.push(카드모양[i]+(j+1))
          }
      }
  }
 
  //보이드 함수 = 변환값 없음 --> 실행
  //리터널 함수 = 반환값 있음 -->결과값
  //인자 --> 아규먼트 --> 매개변수
 
  console.log(카드통)
  console.log("카드정리완료")
 
  </script>
 
</head>
<body>
</body>
</html>
 
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

hover 메뉴 만들기 (0)	2017.04.13
팝업 뛰우기 (0)	2017.04.12
자바스크립트/ 시작 (0)	2017.04.03
제이쿼리-스크롤제어 (0)	2017.03.27
java script 01 (0)	2017.03.06

ASOG

UI Design, Ux Design

자바스크립트/ 시작

기타/-자바스크립트&제이쿼리 2017. 4. 3. 19:27

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

변수는 데이터를 보관하는 장소입니다.

필요할 때 언제든지 사용할 수 있습니다.

var 변수이름 = 저장테이터;

예) 수납박스(변수이름)

여름옷,겨울옷,가을옷...(저장 데이터)

중략...작성중....

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

hover 메뉴 만들기 (0)	2017.04.13
팝업 뛰우기 (0)	2017.04.12
자바스크립트,카드 (0)	2017.04.05
제이쿼리-스크롤제어 (0)	2017.03.27
java script 01 (0)	2017.03.06

ASOG

UI Design, Ux Design

제이쿼리-스크롤제어

기타/-자바스크립트&제이쿼리 2017. 3. 27. 15:40

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 
    <script>
    $(document).ready(function(){
 
        var offleft = $('.wrap').offset().left;
        var wrapwidth = $('.wrap').width();
        $('.fly').css('left',offleft+wrapwidth+10);
 
        $(window).scroll(function(){
 
            var sct = $(window).scrollTop();
            $('.fly').stop().animate({
                'top':sct
 
            })
        })
 
    });
 
    </script>
 
    <style>
        .wrap{width:800px; height:4000px; border:1px #F00 solid; margin:0 auto;}
        .fly{width:80px; height:200px; border:1px #F00 solid; position:absolute; left:0; top:0;}
    </style>
</head>
<body>
 
    <div class="wrap">
 
    </div>
    <div class="fly">
 
    </div>
 
</body>
</html>
 
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

hover 메뉴 만들기 (0)	2017.04.13
팝업 뛰우기 (0)	2017.04.12
자바스크립트,카드 (0)	2017.04.05
자바스크립트/ 시작 (0)	2017.04.03
java script 01 (0)	2017.03.06

ASOG

UI Design, Ux Design

java script 01

기타/-자바스크립트&제이쿼리 2017. 3. 6. 21:18

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

자바 스크립트

- 자바스크립트는 선마이크로시스템즈(Sun Micro Systems)와 넷스케이프에서 공동으로 개발한 스크립트 언어

- 자바스크립트 정적인 HTML 문서를 동적을 만드는 것

-core:어떤한 값을 만들어내고 행위

-dom:도큐먼트 오브젝트 모델

jqrery:자바스크립트로 만들어진 언어

document.get ElementById(id)

$('#id')

-버전: ECMAscript6

Angular

React

javascript

라이브러리:제이쿼리,리엑트

프레임워크:앵귤러,cencha

플렛폼:

node.js

클라이언트 컴퓨터에서 구동되는 언어

웹개발자 공부하는법?

php언어보다 디비-->에스큐엘을 먼저 공부하기

자바스크립트 코어

제이쿼리

익스프레스로 웹서버 구동(express)

몽고디비(mongodb)

아래 뷰엔진

jade

ejs

swig*

handlebar*

문자 string

숫자 number

상수

변수 variable

연산자

배열 array

조건문 if

조건연산자

반복문 for

함수 function

리터럴 함수(난이도 상)
보이드 함수
인자함수
콜백(난이도 상)
클로제

객체 object

~~정규표현식~~

저작자표시 비영리 변경금지

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

hover 메뉴 만들기 (0)	2017.04.13
팝업 뛰우기 (0)	2017.04.12
자바스크립트,카드 (0)	2017.04.05
자바스크립트/ 시작 (0)	2017.04.03
제이쿼리-스크롤제어 (0)	2017.03.27

ASOG

UI Design, Ux Design

css/ inline 알아보기

기타/-HTML&CSS 2017. 3. 1. 18:02

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

display:inline은 세로영역이 없다고 해야할까?

가로 영역만 제어가 가능하다고 해야하나.

그게 어떤 의미인지 실질적으로는 경헙해보지 않아 다음과 같은 코드를 작성하기 됐다.

i라는 클래스에 아웃라인속성을 넣어 시각적으로 알 수있게 해주고, 패딩을 넣어주어 다른 박스 모델과 어떻게 보이는지 알아보자.

패딩값 마진값을 당연히 가질수 있지만 다른 블럭과 영향은 미치지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .wrap{
    outline: 1px solid tomato;
    margin-top: 100px;
  }
  .i{
    width: 100px; height: 100px;
    outline: 1px solid tomato;
    background-color: rgba(20, 0, 0, 0.5);
    outline: solid tomato 1px;
    display: inline;
    margin: 40px;
    padding: 30px;
  }
  .b{
    width: 100px; height: 200px;
    outline: 1px solid tomato;
    background-color: rgba(255, 0, 0, 0.5);
  }
  .footer{
    margin: 0 auto;
    height: 50px;
    outline: 1px solid tomato;
    background-color: #eee;
  }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="i">inline</div>
    <div class="b">block</div>
  </div>
  <div class="footer">footer</div>
</body>
</html>
 
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'기타 > -HTML&CSS' 카테고리의 다른 글

태광실업 반응형 사이트 (0)	2017.02.22
CSS 시작??? (0)	2017.02.20
HTML 시작!~ (1)	2017.02.20
티스토리 html, css (1)	2017.02.20

ASOG

UI Design, Ux Design

태광실업 반응형 사이트

기타/-HTML&CSS 2017. 2. 22. 14:34

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

아티클은 에치티엠엘 5에서만 사용가능함

부트스트랩을 쓰면 가능(부트스크랩 사이트 참고)

<!--[if lt IE 9]>

<![endif]-->

비디오 태그(

autoplay 하면 트루만 안넣어주면 기본값

loop : 반복

비디오 사이즈 지정화면 원래 사이즈가 나옴

img,video{vertical-align:top;} <--이미지에 간격 없애기

</div>

</header>

자식요소의 헤이트가 275를 주고 부모는 80을 준다.

비디오 태그는 80부터 시작하게 된다.

한줄로 하는거..

white-space:nowrap;

서브메뉴 시작 할때 div감싸준다..활용성

모바일에서 보여줄때 아래 추가

http://himedia.i-make.kr/guide.html

레스를 쓰는 이유

저작자표시 비영리 변경금지

'기타 > -HTML&CSS' 카테고리의 다른 글

css/ inline 알아보기 (0)	2017.03.01
CSS 시작??? (0)	2017.02.20
HTML 시작!~ (1)	2017.02.20
티스토리 html, css (1)	2017.02.20

ASOG

UI Design, Ux Design

CSS 시작???

기타/-HTML&CSS 2017. 2. 20. 22:59

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

코드 경량화(미니파이 minify)

캐스캐이딩(우선순위)규칙

1.저작자

2.명시도

3.우선순

{!important}

user agent style (최초의 기본적인 스타일)

예)h1태그

아래 태그적용 우선순위

같은 조건이라면 마지막에 작성된게 우선순위

프로젝트 관리툴

레드마인/wbs

http://www.lionssoft.co.kr/redmine/

지라

https://ko.atlassian.com/software/jira

포지션 (relative/ static)

absolute (절대위치)

위치값(레프트,탑..)을 입력하지 않으면 부모 바로 밑에 위치하여

엡솔루트를 선언하는 순간

부모에 상속되지 않는다.(클래스…)

Flex

컨테이너의 역할을 하는 부모태그와 자식의 역활을 하는 태그

Container

display

flex-direction

flex-wrap

flex-flow

Justify-content

Align-items

Align-content

Item

order

Flex-grow

Flex-shrink

Flex-basis

Flex

Align-self

디스 플레이 :인라인 블럭(인라인 속성과 블럭 속성을 같이 지님)

버티칼 얼라인 값으로 조정 가능함 -3px;

li안에 구분이미지는 백그라운드 이미지로 처리

fieldset{border:0;}

legend{

text-indent:-9999px;

font-size:0;

position:absolute;

left:-9999px;

top:-9999px;

}

아이알 기법 검색해볼것 위에..

텍스트 가운데 정렬을 패딩이나 마진말고 라인헤이트로 조절 !!!

li요소는 디스플레이 인라인 말고 플롯 레프트로 해결 !!!

글자 라인헤이트를 키우고 블럭으로 처리 하면 마우스 오버 햇을때 선택 영역이

라인 헤이트 만큼 영역이 넓어진다....

less,css,사용법(스타일 컴포넌트)

사람이 되면 자바스크립트 이씨엠 스크립트..

각 차이점?????아직 모른다....

less 문법:?

https://atom.io/packages/atom-less

디아이브이와 스판에게 같은 스타일을 적용해 알아보자

스판은

마진이 좌우만 먹음

패딩도 적용되나 크기??

블럭은 인라인 얼라인 속성 적용 안됌

인라인 가능

인라인블럭 inline-block

대표적인것-->아임지 , 버튼 ,인풋

위드 헤이트 가능

텍스트 얼라인도 가능

ie7이하에서는 불가 단 핵을 사용하면 가능

/* 디스플레이:인라인 블럭;*/

*디스플레:인라인;

*줌:1;

간격이 생긴다..부모에게 폰트사이즈:0을 해주고

하위에서 폰트사이즈를 다시 정의 해준다.

디아이브이도 테이블처럼 쓸수 있다

디스플레이:테이블-셀;

위드즈:오십px;

헤이트:100px;<--이렇게 헤이값을 보통 넣진 않고 부모 디아이브이에서 선언해준다

디스플레이에 가장 큰영향을 미치는것이 버티칼!! 상하정렬에 쓰임

버티칼의 속성 _> 탑 미들 보톰 베이스라인 텍스트_탑 텍스트-바텀

디폴트가 베이스라인(라인-헤이트:40px; 기준으로 배치됨)

그리고 부모에게서 영향을 미친다 (예/스판)

예) 버티칼-얼라인:텍스트-탑;

텍스트-바텀, 텍스트-탑 쓸일이 없음?(윗첨자 아랫첨자 같은 기능이기에/ 인라인이라 가능)

파이어 폭스에서 쉬트트 에프5 클릭하면 소스수정 가능

vertical-align: text-bottom; // 자신을 기준으로 다른것이 아래에 가게함...

저작자표시 비영리 변경금지

'기타 > -HTML&CSS' 카테고리의 다른 글

css/ inline 알아보기 (0)	2017.03.01
태광실업 반응형 사이트 (0)	2017.02.22
HTML 시작!~ (1)	2017.02.20
티스토리 html, css (1)	2017.02.20

ASOG

UI Design, Ux Design

HTML 시작!~

기타/-HTML&CSS 2017. 2. 20. 22:54

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

정리되지 않는것들 필기

아톰 패키지 플랫폼 아이디 터미널 패키지 설치후

아톰에서 컨트로 + ~

터미널창 연결(node.js때 쓰임)

http://www.w3schools.com/

Doctype 기준으로 유효성 검사 기준이 된다.

문서 선언시 대문자 사용안해도 무방함

99년도 이후로 독타임 많이 발생??

비추천 태그목록들(왜? 독타입 호환성문제?)

폰트태그
?

독타입별로 어떤 차이가 있는지? (정리할것!)

http://www.w3schools.com/tags/tag_doctype.asp

프레임셋 현재 사용 X

HTML4.01

프레임셋 사용 X, 비추천 태그X

HTML Encoding (Character Sets)]

http://www.w3schools.com/html/html_charset.asp

For HTML4:

For HTML5:

HTML Headings

http://www.w3schools.com/html/html_headings.asp

파이어폭스 (헤딩맵 플러그인)로 헤딩 구조 파악

HTML Paragraphs

http://www.w3schools.com/html/html_paragraphs.asp

HTML Quotation and Citation Elements(인용문)

http://www.w3schools.com/html/html_quotation_elements.asp

<blockquote cite="http://www.worldwildlife.org/who/index.html">(cite-->출처)

HTML Lists

http://www.w3schools.com/html/html_lists.asp

규칙 헷갈리지 말것 !!!

<ul>

<li>drink</li>

<ul>

<li>Coffee</li>

</ul>

HTML Element Reference

http://www.w3schools.com/tags/default.asp

<address> (어드레스 안에서 블럭속성 사용하지 않음)

<basefont> (젋대값이 정해지지 않을때 ?? 상대경로로 위(헤드)에서 정의하고..그주소를 절대경로로 사용가능??)

<bdi>

HTML <button> Tag

http://www.w3schools.com/tags/tag_button.asp

<button type="button">Click Me!</button>

인풋타입으로 버튼 안만듬

버튼 타입으로 버튼 만듬

~~HTML <canvas> Tag~~ #html canvsa

~~http://www.w3schools.com/tags/tag_canvas.asp~~

~~자바스크립트 식스를 이해해야 구현 가능? 코드로 그림을 그림??~~

~~수학에 대한 ..삼각함수..개념필수..~~

HTML <cite> Tag

http://www.w3schools.com/tags/tag_cite.asp

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

인용 태그(작품의 제목을 인용?)

detalist....

보통 자바스크립트로 구현 왜? html5에서만 동작하기 때문에

details (html5에서만 지원)

정보 요소로 쓰임

<디테일><서머리></서머리></디테일>

핑거

- 이미지태그 사용할때 감싼다. 왜????

프레임 프레임셋

- html5 지원 안함

※ 더블유 삼씨 스쿨에서 빨간색으로 설명된것은 비추천이라는....

html5에서 생겨난 태그가 많은데 태그 네임을 본인이 정의해서 작성을 할 수 있다?

단점: 협업시...문제소지??

pre (중요함)

작성된 코드의 형태 그대로 브라우저에 출력

*회원가입 약관에 쓰인다.보이는 코드 그데로..출력

책 82페이지 참고 할것

<!--[if lt IE 9]>

<![endif]-->

html5(반응형웹)

ie 9,10, 11

비디오 태그

</video>

브라우저별 호환문제로 비디오 태그가

xhtml

ie 6, 7, 8(xp user)

프로그레스(디자인변경 가능)ie-10에서 지원

w3schools.com

http://www.w3schools.com/html/default.asp

더블유삼씨 스쿨에 빨간색 문구는 지원하지 않는다라는 표시

이노엠

http://innom.co.kr/category/blog/learn_coding/

젠코딩

http://docs.emmet.io/cheat-sheet/

https://flukeout.github.io/

1. float : 공중에 붕 뜨다(사전적 의미)

2. float이 선언된 엘리먼트는 컨텐츠가 피해간다

3. float이 선언된 엘리먼트는 먼저 작성된 엘리먼트 위로 뜰수 없다.

wid100+??

https://c9.io/?redirect=0 호스팅 제공 , 로컬컴퓨터 서버화 시킴???

https://youngcheol-youngcheoljung.c9users.io

플롯 레트프 해주면 안에 컨텐츠 만큼 줄어듬..가로 사이즈

버티칼? 기본적인 여백 생김 ---> 버티칼 탑으로 설정 해주면 .간격 사라짐

레이아웃 잡는 방법

1.블럭으로 쌓을 블럭에 {clear:left;} 처리

(상위또는 부모의 float속성들에 의해 변화됨)

clear:left;---> 부모중에 float:left중 가장 긴 것으로 밑으로 붙음

clear:right;---> 부모중에 float:right중 가장 긴 것으로 밑으로 붙음

clear:both;---> 부모중에 float:right,left 둘중 가장 긴 것으로 밑으로 붙음

2.div로 감싸고 height값으로 아래 div 블럭 처리

여백을 마진으로만 하지 않는 이유?? 마진이 겹친다?

아톰 패키지 설치할것

pigment

emmet

file-icons

git-plus

minimap-cursorline

open-in-browsew

platformio-ide-terminal

wakatime

webbox-color

https://c9.io/kimminchul

https://ide.c9.io/kimminchul/sd-study

스판은 인라인 요소 / 블럭으로 처리하여 위드와 헤이트값을 가질수 잇다

인라인은 (마진이 탑 보톰 안됌 ,좌우만 가능)

선택자

부모 자식

.content .first-news li

캐스캐이딩

필터 선택자 : last/ first child (호환성이 떨어짐)

속성 선택자

저작자표시 비영리 변경금지

'기타 > -HTML&CSS' 카테고리의 다른 글

css/ inline 알아보기 (0)	2017.03.01
태광실업 반응형 사이트 (0)	2017.02.22
CSS 시작??? (0)	2017.02.20
티스토리 html, css (1)	2017.02.20

ASOG

UI Design, Ux Design

Firefox, 플러그인

★UX 2017. 2. 20. 22:48

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

UI/UX 디자인의 중요성 (0)	2024.02.28
포토샵 플러그인 GUIDE GUIDE (4)	2017.09.13
웹표준 (0)	2017.02.20
git.저장소 (1)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20

ASOG

UI Design, Ux Design

웹표준

★UX 2017. 2. 20. 22:47

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

웹표준 --> 올바른 태그사용(마크업,시맨틱)

접근성

누구나 웹을 이용(장애인)

'★UX' 카테고리의 다른 글

포토샵 플러그인 GUIDE GUIDE (4)	2017.09.13
Firefox, 플러그인 (0)	2017.02.20
git.저장소 (1)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20

ASOG

UI Design, Ux Design

git.저장소

★UX 2017. 2. 20. 22:35

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

SVN : 저장소 역활

GIT : 해외에서 많이 쓰임(오픈소스 전세계적으로 공유가됨)\

https://git-scm.com/

CVS :

머큐리얼(Mercurial)

https://www.mercurial-scm.org/

PC->FTP-> SERVER

위키(WIKI) 문법으로 하루 공부한것 정리

\\192.168.0.148\Users\smart_digtal\00._수업자료\smart

GIT 명령어

시작 -> 실행 -> CMD

CD /

(상위 디렉토리 이동)

DIR

(해당 드라이브 디렉토리 보여줌)

cd users

cd 디렉토리명

cd.. 상위로 바로 이동

cd 디렉토리명/디렉토리명 (이동)

작업폴더에서 오른쪽마우스 깃 베시 클릭

git 명령어

http://egloos.zum.com/incredible/v/7136780

git init (저장소 만들기)

clear

git config --global user.email "you@example.com"

git status 저장소에 담겨잇지 않은 파일이 잇다 빨간색으로 표시됨 (파일)

git add 파일명.파일 확장자

git commit

$ git commit -m "first commit"

$ git add*

xhtml/html5 현재 많이 사용하는 버전

깃이 잇는 숨겨진 폴더가 잇는 곳에서 깃을 열라

깃 공부할것/생활코딩

https://opentutorials.org/course/1492/8045

리버트를 쓰기 시작하면 개짜증이난다 프로그램이 필요함...그땐..

gitlab 서버셋팅 회사내에서서만 이용 할수 있는 환경,보안유지,소스비공개

github 오픈소스로 배포하는 동의 하여 무료로 제공되는 환경

https://git-scm.com/book/ko/v2/Git의-기초-Git-저장소-만들기#_git_cloning

린터 설치관련

https://git-scm.com/book/ko/v2/Git의-기초-Git-저장소-만들기#_git_cloning

http://www.sublimelinter.com/en/latest/installation.html#linter-plugins

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

Firefox, 플러그인 (0)	2017.02.20
웹표준 (0)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
자바스크립트~ (1)	2017.02.15

ASOG

UI Design, Ux Design

언제인가? 프로토 타입 진도나갈때..메모

★UX 2017. 2. 20. 22:25

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

엑슈어 라이브러리

http://tzl7gb.axshare.com/buttons.html

엑슈어 메뉴얼

http://www.axure.com/support/reference/flow-diagramming

아이콘 사이트

http://www.flaticon.com/

무료이미지

https://pixabay.com/

컬러추출

https://color.adobe.com/

핀터레스트

https://kr.pinterest.com/

브랜드 네이밍 자료

http://www.oricom.com/data/BrandJournalPDF/brand62/62.pdf

\\192.168.0.148

구글 독스 팀자료

https://docs.google.com/presentation/d/13ojRPOr-BRHwWeMWQFjqD9A4IzkWHzguMRdEHw_oSgQ/edit#slide=id.g1ae26735b2_5_78

패르소나

https://app.xtensio.com/folio/0n2xq6gh

엑슈어 공식사이트

https://www.axure.com/downloadthanks?dl=80pc

템플릿 자료(HTML,CSS)

https://themeforest.net/

구글 무료 폰트(노토)

https://www.google.com/get/noto/

유투브 프리아이브 검색( html강의)

위시캣 사이트(재택알바? 프로젝트)

https://www.wishket.com/?referer_type=Google-Wishket&gclid=CjwKEAiAkajDBRCRq8Czmdj-yFgSJADikZgg3j_u1lGNyc1xQIdo6tI23QUeUO501pZGSiUrxL3VaRoCIqHw_wcB

시그마 사이트(엑슈어 벤치 사이트)

http://periodicitems.com/sigma/html/index.html

에이콘 책?html 아마존 판매1위 추천도서

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

웹표준 (0)	2017.02.20
git.저장소 (1)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
자바스크립트~ (1)	2017.02.15
1072시간의 여정 (0)	2017.02.15

ASOG

UI Design, Ux Design

자바스크립트,제이쿼리,SVG

★UX 2017. 2. 20. 12:20

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

2017.02.02 정리중입니다 !~

좀비 상태가 아니였는데 오늘도 별로 건진게 없는거 같습니다.

그나마 다행인게 필기한게 있어서 다행입니다.

오늘 오후부터 언제 끝날지 모르겠지만 반응형 웹사이트 제작을 본격적으로 시작했습니다.

태광실업 사이트를 만들고 있느데.그룹핑도 복잡하고 이유도 모르겠고..

숨은 그림찾기 같습니다. 공부한지 1달이나 지났는데..

나만 그런가요? 살려주세요...ㅜㅜ

Plug-in (wow.js)

http://mynameismatthieu.com/WOW/index.html

제일 먼저 상단에 3번째 GITHUB메뉴를 클릭하고 들어가면 연두색 버튼을 클릭해서 파일을 다운 받습니다.

https://github.com/matthieua/WOW

그리고 나서 HOW TO USE? 메뉴에서 사용방법을 안내 받으세요.

js파일과 css파일을 연결시켜줍니다.

Animate.css에 연결

1

<link rel="stylesheet" href="css/animate.css">

WOW.js 연결 및 활성화

1
2
3
4
<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>
cs

https://daneden.github.io/animate.css/

http://www.flaticon.com/

무료 아이콘을 제공해주고, SVG로 변환된 파일도 제공

http://codepen.io/

html, css, js 등 최신 웹 프론트 기술을 화면상에서 코딩해서 볼수 있는 사이트

비슷한 사이트로 jsfiddle.net이 있다고 하내요

사용자끼리 공유도 할 수 있고 GIT으로도 공유가 가능하다고 합니다.

아래내용은 시간이 날때 정리 !!!

http://mynameismatthieu.com/WOW/index.html에서 깃에서 다운로드

아래 2개를 폴더에 넣고 연결해줌

https://daneden.github.io/animate.css/

wow.js

animate.css

javsscript = jQuery

document.getelementbyld("id").child;

$("#id").child('a')

자바스크립트 자주 쓰이는것들 라이브러리

자바스크립트 스크롤링링값을 받는다..제어가 가능

무료아이콘

http://www.flaticon.com/

http://codepen.io/

자바스크립트,제이쿼리,플랫아이콘

FLATICON,WOW,ANIMATE

저작자표시 비영리 변경금지

'★UX' 카테고리의 다른 글

git.저장소 (1)	2017.02.20
언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트~ (1)	2017.02.15
1072시간의 여정 (0)	2017.02.15
이미지 좋은데? Hero니깐! (2)	2017.02.15

ASOG

UI Design, Ux Design

티스토리 html, css

기타/-HTML&CSS 2017. 2. 20. 01:04

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

어제 티스토리 html소스와 css소스를 좀 수정 했는데 시간에 비해 성과과 너무 없내요...

티스토리가 요즘 사람을 집요하게 만드내요...-_-''

저작자표시 비영리 변경금지

'기타 > -HTML&CSS' 카테고리의 다른 글

css/ inline 알아보기 (0)	2017.03.01
태광실업 반응형 사이트 (0)	2017.02.22
CSS 시작??? (0)	2017.02.20
HTML 시작!~ (1)	2017.02.20

ASOG

UI Design, Ux Design

자바스크립트~

★UX 2017. 2. 15. 12:19

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript">
  $(function(){
    var rap = $('.imageblock img').attr('src');
    console.log(rap)
    $('.cover').css('background-image','url('+rap+')');
 
    console.log($('body').html())
  })
  </script>
Colored by Color Scripter
cs

여기 티스토리에서 이미지가 들어가는 게시글을 올릴경우 첫번째 이미지가 노출되는 소스입니다.

아직 자바스크립트를 몰라서..대략 느낌만 만족하고 있습니다.

저작자표시

'★UX' 카테고리의 다른 글

언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
1072시간의 여정 (0)	2017.02.15
이미지 좋은데? Hero니깐! (2)	2017.02.15
영리한 에디터 너의 이름은 아톰 (1)	2017.02.15

ASOG

UI Design, Ux Design

1072시간의 여정

★UX 2017. 2. 15. 01:03

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1072

시작합니다.

벌써 한달이나 지나갔지만,

순간 순간을 하루 하루를...

잘해낼지 아직 알수는 없지만...

중략

시간날때 다시 내용 보완할게요

저작자표시

'★UX' 카테고리의 다른 글

언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
자바스크립트~ (1)	2017.02.15
이미지 좋은데? Hero니깐! (2)	2017.02.15
영리한 에디터 너의 이름은 아톰 (1)	2017.02.15

ASOG

UI Design, Ux Design

무선의 자유로움~

기타/-IT제품리뷰 2017. 2. 15. 00:53

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

2016년 12월 17일 주문하고

한달을 기다려서 받았습니다.

에어팟!

중략

시간날때 다시 글보완 할게요~

저작자표시

'기타 > -IT제품리뷰' 카테고리의 다른 글

에어팟(AirPods)을 귀에 딱맞게 쓰는 영리한 방법~ (7)	2017.04.06

ASOG

UI Design, Ux Design

이미지 좋은데? Hero니깐!

★UX 2017. 2. 15. 00:46

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

요즘들어 알게된 사실인데

Hero 이미지라고 부르더군요

영웅?

멀까요??

감이 오시나요??

중략

※ 시간이 날때 내용을 보완할게요!!!

저작자표시

'★UX' 카테고리의 다른 글

언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
자바스크립트~ (1)	2017.02.15
1072시간의 여정 (0)	2017.02.15
영리한 에디터 너의 이름은 아톰 (1)	2017.02.15

ASOG

UI Design, Ux Design

영리한 에디터 너의 이름은 아톰

★UX 2017. 2. 15. 00:39

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

요즘 코딩할때 정말 많은 도움을 받는 에디터 프로그램 아톰(atom)입니다.

아톰만 써보기는 했지만 다른 에디터 프로그램은 눈에도 안들어 옵니다.

사실 새로운 ui에 적응하는게 두려워서인지도 모르겠내요.

중략....

필수 패키지 프로그램

activate-power-mode

Activate-power-mode

Emmet

Minimap

FILE-ICON

GIT-PLUS(git 연동)

platformio-ide-terminal (사용법 ctrl + ~)터미널 실행

open-in-browser (ctrl + alt +q) 코드 브라우저 미리보기

코드정리 EDIT-->LINE-->AUTO INDENT

문법
http://docs.emmet.io/abbreviations/syntax/

  div.container>div.item{$}*5

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>

Various Artists-우주 소년 아톰

푸른 하늘 저 멀리
랄랄라 힘차게 날으는
우주소년 아톰 용감히 싸워라
언제나 즐거웁게
랄랄라 힘차게 날으는
우주소년 아톰 우주소년 아톰

푸른 하늘 저 멀리
랄랄라 힘차게 날으는
우주소년 아톰 용감히 싸워라
언제나 즐거웁게
랄랄라 힘차게 날으는
우주소년 아톰 우주소년 아톰

언제 어디서나
랄랄라 깊은 바다까지
우주소년 아톰 인간을 지킨다
언제나 신나게
랄랄라 과학의 아들
우리들의 친구 우주소년 아톰
우리들의 친구 우주소년 아톰

하늘을 가르며
랄랄라 우주를 날으는
우주소년 아톰 지구를 지킨다
언제나 착하게
랄랄라 과학의 아들
십만마력 아톰 우주소년 아톰
십만마력 아톰 우주소년 아톰

저작자표시

'★UX' 카테고리의 다른 글

언제인가? 프로토 타입 진도나갈때..메모 (0)	2017.02.20
자바스크립트,제이쿼리,SVG (2)	2017.02.20
자바스크립트~ (1)	2017.02.15
1072시간의 여정 (0)	2017.02.15
이미지 좋은데? Hero니깐! (2)	2017.02.15

ASOG

UI Design, Ux Design

누구에게나 그런날

카테고리 없음 2017. 2. 14. 23:56

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

주변지인이랑 책을 몇권 바꺼서 읽었는데

워낙에 독서를 하지 않는 사람이라.

작년에 빌린 책인데

절반정도 읽었내요.

작가의 표현력이 맘에 들어서

처음부터 다시 읽고 돌려줘야 할까 봅니다.

저작자표시

ASOG

UI Design, Ux Design

1072시간 긴여정의 기록

카테고리 없음 2017. 2. 14. 13:59

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

게시글에 올린 이미지를 자바 스크립트를 이용해서

헤더클래스에 보내서 배경으로 처리했습니다.

게시글마다 헤더이미지가 바뀌게 됩니다.

ASOG

UI Design, Ux Design

'분류 전체보기'에 해당되는 글 27건

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -IT제품리뷰' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글

'기타 > -HTML&CSS' 카테고리의 다른 글

'기타 > -HTML&CSS' 카테고리의 다른 글

'기타 > -HTML&CSS' 카테고리의 다른 글

'기타 > -HTML&CSS' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

WOW.js 연결 및 활성화

'★UX' 카테고리의 다른 글

'기타 > -HTML&CSS' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'기타 > -IT제품리뷰' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

'★UX' 카테고리의 다른 글

카테고리

공지사항

태그목록

ASOG

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바