'분류 전체보기' 카테고리의 글 목록 (16 Page)

분류 전체보기

CSS - @media 쿼리 2019.03.02
CSS - 애니메이션 @keyframes 2019.03.02
육아일기 191일 - 어린이집 OT와 서울 결혼식 나들이 2019.03.02
아내일기 - 190226 아내 부황을 뜨다... 2019.03.02
육아일기 188일 - 잼잼놀이문화센터 2019.03.02

CSS - @media 쿼리

2019. 3. 2. 01:24

반응형 디자인을 만들기 위해서 쓴다

특정 페이지 크기 이상이되면 css를 동적으로 사용할수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
        <style>


            @media (min-width: 600px) {
                /*페이지크기 600px이하 되면 아래 구문 수행*/
                /* width < 600 */

                /* 만약 @media (min-width: 600px) {*/
                /*페이지크기 600px이상 되면 아래 구문 수행*/
                /* width > 600 */
              div {
                display: none;
              }
            }

            @media (max-width: 600px) and (min-width:400px){
             // 이렇게하면 600이상 , 400 이하 일경우 아래 구문 수행
                .maxdang{
                    display: none;
                }
            }    
      
            .div{
             width: 500px;
             height: 500px;
             background-color: pink;
            }
        </style>
</head>
<body>
    <div class="div">
    안녕
    </div>
</body>
</html>

이렇게 동적으로 화면을 반응형으로 만들수 있는게 @media 미디어 쿼리이다

css의 조건문 같은느낌이다.

media 쿼리는 이것말고도 상당히 많은 부분을 할수있다

가령 print 할경우 @media print { } 로 써서 프린트할떄 필요없는부분을 display:none; 을 사용하여

바꿀수있다.

미디어 쿼리로 반응형을 사용하엿을경우 모바일은 적용이 잘안되는모습을 볼수있는대 (크기가 다르기때문)

위와 같이 메타태그를 추가하면 모바일에서도 똑같이 작동된다.

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - 애니메이션 @keyframes (0)	2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) (0)	2019.03.01

CSS - 애니메이션 @keyframes

2019. 3. 2. 01:23

CSS 애니메이션은 자바스크립트로 표현하는 것보다 더 상세히 기술할수있는

용량을 줄이는 획기적인 방법이다.

transition 과 매우비슷 ~~(사실 뭐가 다르냐)~~

선언은 @keyframes 이름 { } 으로 기술하며

0% 부터 100% 까지 %로 선택하여 기술할수있다

from { } to { }로 할 수 도 있다.

@keyframes fadeIn {
   from{  // 0% 일때의 상태
      opacity : 0;   //투명도 0일땐 완전한 투명이고
  }
   to {  //100% 일때의 상태
      opacity : 1;   // 투명도 1일땐 완전한 불투명 이다
   }
}

◎ animation 과 transform 예제

▼ 내용

abcd

<html>
<head>
    <style>
        div{
            height:200px;
            width:200px;
            background:blue;
            color:White;
            font-size: 39px;
            transition: all .5s ease-in-out;
            /*모든 속성에대해 장면전환 transition 적용*/
            animation:  rotate 3.0s ease-in-out infinite;
            /*infinite 는 애니메이션 무한반복 rotate 는 keyframe 이름
            3초동안 div가 회전하면서 애니메이션 효과 무한 반복*/
            
        }
        div:hover{
            transform: rotate(5turn) scale(0.5,0.5);
            /*5번 회전 , 크기 1/2배로 줄임*/
            background-color : red;
            color : green;
        }

        @keyframes  rotate{
            0%{
                transform:none;
            }
            50%{
                transform:rotate(5turn) scale(.5 , .5);
                color: red;
                font-size:20px;
            }
            100%{
                transform:none;
            }
        }
    
    </style>
</head>
<body>
    <body>
        <div>안녕</div>
    </body>
</body>
</html>

css 애니메이션 참조하면 좋은 블로그

https://brunch.co.kr/@99-life/3

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - @media 쿼리 (0)	2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) (0)	2019.03.01

육아일기 191일 - 어린이집 OT와 서울 결혼식 나들이

2019. 3. 2. 01:10

오늘은 어린이집 OT 가는날

아침엔 OT를 가고 저녁엔

서울결혼식장을!!

우리애기의 머리털 나고

서울 첫 나들이네요~

어린이집 오티현장~

저희아가를 돌봐줄 선생님들을

만나 뵜어요! 선생님 1분당

아이 3명씩 맡는대

영아반은 총 선생님이 2분!!

아이는 총 5명!! 아이좋아~

너무 일찍 맡기는 감이 있기는한데...

3~4월은 와이프가 같이따라다니고

그이후 와이프가 육아휴직 끝나고

일을 복귀해야해서요 ㅠㅠ

미안해 아가야

아고 우리 기여운 아가보소

뭐든 짚기만하면 다 입으로들어가네...

병걸리는거 아닌가 몰라...

먹지마 먹지마 아가야

그거안되 먹는거아냐

어허!

맘마 줄게 맘마먹어!

우리아가 비누방을 난생 처음봐서

신기하지!~

사실 아빠도 신기해....

비누방울가지고

아빠가 더 재밌게 놀았다는건

함정..

요즘 이유식도 먹고

과일도 먹기 시작하는 우리아가...

다른과일은 잘 안먹는대

배를 주면 잘먹는다...

히죽히죽 웃는거바라

맛잇어?

달지 달아~ 사실 아빠는

과일을 별로 안좋아해서

아가많이줄게 많이먹어!~!

마지막 마무리로 아기사진 방출~

육개장 먹으면서 아기가 앉아있기!~

친구놈 결혼식 다녀왓어요

와 군인결혼식 정말멋잇네요

행복하게 살아라 요놈아!

'육아일기 > 2019년' 카테고리의 다른 글

육아일기 219일 - 땅콩을 볶아요 (0)	2019.03.27
육아일기 205일 - 오렌만에 올리는 최근근황 (0)	2019.03.03
아내일기 - 190226 아내 부황을 뜨다... (0)	2019.03.02
육아일기 188일 - 잼잼놀이문화센터 (0)	2019.03.02
육아일기 185일 - 아가랑 컴퓨터랑 (0)	2019.03.02

아내일기 - 190226 아내 부황을 뜨다...

2019. 3. 2. 01:08

아내에게 부황을 떠줬다...

입으로 부황자국을 등짝에

2개를 남겼다가....

와이프가 은근 좋아한느거 같길래...

셀프 부황(실리콘으로된) 게 있어서

등짝에다가 5개의 동그라미를 만들었다...

이걸로 아내 등짝에

글자를 만들어야겠다...

글자는

'한' 으로...

제가 한맺힌게 많아서...

하하하

작성하신 에 이용자들의 신고가 많은 표현이 포함되어 있습니다.

신고가 많은 표현

다른 표현을 사용해주시기 바랍니다.
건전한 인터넷 문화 조성을 위해 회원님의 적극적인 협조를 부탁드립니다.

더 궁금하신 사항은 고객센터로 문의하시면 자세히 알려드리겠습니다.

'육아일기 > 2019년' 카테고리의 다른 글

육아일기 205일 - 오렌만에 올리는 최근근황 (0)	2019.03.03
육아일기 191일 - 어린이집 OT와 서울 결혼식 나들이 (0)	2019.03.02
육아일기 188일 - 잼잼놀이문화센터 (0)	2019.03.02
육아일기 185일 - 아가랑 컴퓨터랑 (0)	2019.03.02
육아일기 180일 - 설날에 새배를 해요! (0)	2019.03.02

육아일기 188일 - 잼잼놀이문화센터

2019. 3. 2. 01:08

안녕하십니까!

개발자아빠 입니다!~

오늘은 아이랑 애기엄마랑

제 아는 지인과 함께 방문했어요!

이런곳이 있었다는게 참 신기해요!

애기가 너무 힘들어서 혼이 다빠졌지만....

그럼 육아일기 쓰똬또!

아기전용 가발이 있길래

뽀글이가발 씌어주고 사진한장 찍으려하니간

이떄부터 거어어어업나 칭얼 대기시작...

이짜식 내 속도모르고 맘도모르고!

안그래도 우리 아가가

얼굴이 큰데 이거씌우니간

진짜 2등신이 됫더라고요...

몸이 얼굴반 몸통반...

나중에 애기가 커서도

파마는 하지말아야될거같아요

그래도 우리아기 넘이뽀~

아이 방망이 맛잇어

도깨비 방망이 맛잇어

파란색은 파란맛~

빨간색은 빨간맛 ~

(빠빠빠빨간맛~ 궁금해 허니~)

이아저씨의 이모티콘이랑 똑같이 생겻죠 ? 하하

개굴개굴 개구리~

노래를한다~

아줌마들 여럿이~ 다모여서~

왠지 파마머리때부터 시작징후가 안좋더니

그 이후 20분간은 웃고 잘놀다가..

이때부터 다시 칭얼이가 시작...

(사실 저희아가가 답답한옷을 싫어해요~)

개구리소년으로 변신해서

다같이 개구리사진 찍을준비하는데....

그래도 이떄까지만 해도정말 이뻣답니다..

애기들끼리 다같이 앉히고 사진을 찍는중인데...

어찌나 울던지 이자식....

개구리소년 빰빠밤

니가울면 무지개연못에 비가 온단다~

그리고 내 핸드폰도 울어....

사진찍기가 힘들어서 아빠도울어

흑흑흑

아가야 무엇이 그렇게 시르니~

결국은 아가가 너무울어서...

개구리소년의 정상적인 사진은 포기했습니다..

도무지 웃어주질 않더라고요...

그래서 울음사진의 레전드샷을 건졌어요!!

하하하 마지막 사진 저거보고 얼마나 웃기던지

입에서 불뿜는거같아요 ㅋㅋㅋㅋ

(에~ 네~ 르~ 기~ 파~~~!!!!)

볼떄마다 너무 귀여워!!

파이어볼 같은걸 넣어주고싶은데

네이버 에디터는 왜 이런게없는거야~!!!!

오늘 하루 이 문화센터에서 저희아가의

울음소리로 다른아기들도 전염(?)됫는지

이날.. 아기들의 울음바다였습니다..

역시 개구리가 왜 우는지 알겟더라고요...

이렇게해서 다들 개구리처럼 울기 시작했답니다...

그래도 재밌었어요

5000냥에 이렇게 재미난걸 즐길수있다니~

그럼 다음일기볼에서 다시만나요

씨유순어게인~

'육아일기 > 2019년' 카테고리의 다른 글

육아일기 191일 - 어린이집 OT와 서울 결혼식 나들이 (0)	2019.03.02
아내일기 - 190226 아내 부황을 뜨다... (0)	2019.03.02
육아일기 185일 - 아가랑 컴퓨터랑 (0)	2019.03.02
육아일기 180일 - 설날에 새배를 해요! (0)	2019.03.02
육아일기 177일 - NoName (0)	2019.03.02

PREV 1 ···13 14 15 16 17 18 19 ···24 NEXT

아빠개발자의 노트