본문 바로가기

전체 글137

[코딩 공부_57] position_Fixed 실습하기 오늘은 position_Fixed 관련해서 실습을 했다 실사용에서 많이 사용하는 gnb bar를 숨기고 펼치고 할 수 있따!! position만 있다면!! menu sub-menu1 sub-menu2 sub-menu3 sub-menu4 sub-menu5 sub-menu6 2021. 4. 21.
[코딩 공부_56] position 실습하기 2 오늘도 position 실습을 하였다 ① position - static(정적인) : inital value t, l, b, r, X - relative(상대적인) : 본인 위치에서 시작한다 - absolute(절대적인) : body를 기준으로 한다, 날라다닌다, 붕뜬다 - fixed(고정) : body를 기준으로 한다, 날라다닌다, 붕뜬다, scroll시에도 항상 고정된다 stacking context > z-index : auto; 0; > -9999 ~ 9999; z-index: 1; 더보기 거의 이렇게 하면 된다! 부모요소에는 pos: re; 자식요소에는 pos: ab; * but, 항상 그렇지 않다 피카츄 삐까삐까~~삐까츄 menu menu-sub1 menu-sub2 menu-sub3 menu .. 2021. 4. 20.
[코딩 공부_55] position 실습하기 오늘은 position 실습을 했다 피카츄를 잡았다 피카츄 피카츄는 전기 공격을 한다 꼬부기를 잡았다 꼬부기 꼬부기는 물대포 공격을 한다 이상해씨를 잡았다 이상해씨 이상해씨는 풀잎 공격을 한다 spring story Lorem ipsum dolor sit amet. summer story Lorem ipsum dolor sit amet. winter story Lorem ipsum dolor sit amet. 오류) transition을 transform으로 지정해놓고 자꾸 안된다고 다른걸 고치고 있었다 허허.. 2021. 4. 20.
[코딩 공부_54] z-index 우선 순위 지정하기 주말에 열심히 페이지를 만들겠다는 나의 계획은 호로록 사라졌다 ㅎㅎ 😂 자격증 공부하느라 바빠서 자꾸 소홀해지는 듯한 느낌이 든다,, 자격증 공부를 얼른얼른 끝내면 좋겠지만 한번 할때 너무 오래걸려서 페이지 만들기를 못했다 핑계같지만 우울하다,, 😥 이제 다시 본론으로 이야기하겠다! 금요일에 배웠던 z-index에 대해 알아보도록 하자! 1. z-index - z-index를 이용하면 우선 순위를 정할 수 있다(어떤 콘텐츠를 앞에 두고 뒤에 둘지 선정할 수 있다는 것!) - 부모가 다른 자식 요소는 순서를 바꿀 수 없다 * z-index가 설정된 경우, position이 설정되면 부모는 높이값을 잃는다! - z-index는 0이 기본이지만 auto가 default이며, z-index의 숫자가 높으면 높을.. 2021. 4. 18.
[디자인_17] 책 모양 포스터 따라하기 2021. 4. 15.
[코딩 공부_53] (**중요) position 속성에 대하여 1. position이란? - 위치를 뜻한다! magin과 다르게 다른 친구들에게 아무런 영향을 끼치지 않고 자리이동을 한다 - position을 사용하려면 공간, 기준, 자리(위치)가 필요하다 공간 html 기준 top/bottom, left/right 자리(위치) px, % Q. transform의 translate와 position의 차이는? A. transforem은 animation에 주로 사용한다(motion) 2. position 속성 속성 공간 기준 위치 공간 배정 static(default) html 본인 위치 X O absolute(절대적인) html/relative(부모) html, relative(부모) property : top, right, bottom, left value: p.. 2021. 4. 15.
[코딩 공부_52] animation-project 실습-2 오늘은 animation-project 실습 두번째날이었다 요번에는 완성해서 뿌듯했다! 아래는 결과화면과 코드이다! lee yebin Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus sequi et vitae nesciunt ad qui omnis vero veritatis distinctio illo animi officia sed fugiat quibusdam laboriosam rerum lee yebin introduce intro characteristic explanation Leeyebin 안녕하세요 저는 이예빈입니다 저에 대해 궁금하지 않나요? more 미소를 잃지 않습니다 야구를 좋아합니다 음식을 좋아합니다 fl.. 2021. 4. 14.
[코딩 공부_51] animation-project 실습-1 13일(어제) animation-project 실습을 하였다 실습 시간이 거의 3시간 넘게 주어졌는데 50프로?정도 했었다 한번 막히면 그 버그를 해결하기 위해서 부여잡고 있다보니 시간이 오래 걸렸다 A그룹에 넣었을 때, B그룹에 넣었을 때 전혀 다르게 작동하기 때문에 그런 부분들을 잘확인해겠다는 마음이 많이 든 하루였다! 분명 배웠고 항상 쓰던 부분인데 갑자기 "이렇게 하던 게 맞나?"하는 의구심이 들때도 있었고 한번 밖에 안한 건데도 뚜렷하게 기억나는 부분도 있었다 하드 코딩으로 하고 싶었지만 검색하면서 했다,, 검색할 때 구글에 보통 검색을 하는데 영어로 검색해야 더 많은 양이 나오고 내가 찾는 부분이 나온다,, 근데 영어 울렁증이 있어서 자꾸만 한글로 검색했었다ㅎ 이런 버릇도 고쳐야겠다는 생각이 .. 2021. 4. 14.
[코딩 공부_50] 페이지 기획안 만들어보기 웹페이지를 만들 때 제일 먼저 하는 과정이 바로 기획이다 기획도 다양한 과정을 거쳐서 하게 되는데 오늘은 XELF라는 콘텐츠 제작 플랫폼을 이용하여 페이지 기획안을 만들었다 XELF (주)큐리어드 : 서울특별시 강남구 논현로71길 20 현덕빌딩 4층 | 전화 : 02-535-0195 | 문의메일 : manager@xelf.io 대표자: 안태환 | 사업자등록번호 : 114-86-53076 | 통신판매업신고 : 제 2018-서울서초-0351호 © xelf.io XELF의 장점은 엄청 간단하다는 점이다 누군가 가르쳐주지 않아도 금방 습득해서 사용할 수 있다는 것! 포토샵이나 일러스트를 다루지 못하는 사람에게 정말 좋은 플랫폼이라고 생각한다!!😊 오늘 내가 만든 페이지 기획안이다 index페이지의 양이 너무 많.. 2021. 4. 12.
[디자인_16] 3D rotate로 타이포 만들기 1. 글자 입력하기 (고딕계열, 두꺼운 서체) 2. expand 혹은 create outline한 다음 글자를 나눌 선을 그어준다 글자들 중에 티끌이 남지 않도록 사이사이 겹치는 부분 체크하기 3. 선과 글자 전체 잡고 pathfinder divide를 클릭하고 ungrounp하고 한층식 그룹을 해준다 이때, 셀렉트툴로만 하기 4. 맨위를 1층이라하면 1/3/5 홀수층을 shift로 잡고 effect > 3D > rotate > 옵션창에서 position > isometric TOP 클릭 5.맨위를 1층이라하면 2/4/6 짝수층을 shift로 잡고 effect > 3D > rotate > 옵션창에서 position > isometric left 클릭 6.전체 드래그하고 object > expand app.. 2021. 4. 10.
[디자인_15] 찢어진 종이 효과로 포스터 제작하기 1. 호랑이와 인물 사진을 같은 각도인 (정면/측면) 사진으로 준비한다 이떄 동물의 눈매와 비슷한 인물 사진이 더 효과적이다 2. 두 사진 중 하나만 opacity를 낮추고 눈매와 코를 맞춰준다 부득이하게 동물사진이나 안에 찢긴 느낌으로 넣을 사진을 눌러줘서 원본의 비율을 깨뜨릴 수도 있다 3. 어느 부분으로 포인트를 잡아서 찢는 표현을 할지 위치를 잡고 난 다음 펜툴-shape로 설정하고 우선 fill값은 없애주고 storke 값은 아무색상 클릭해서 모양을 만들어준다 4. 모양을 다 만들어두었으면 다시 툴옵션에서 fill값은 흰색으로 하고 storke값은 없애준다 5. 모양을 변형할 수 있으니 ctril+j 복사하고 복사본을 rasterize layer 클릭 > ctrl+E 레이어 합치기 6. 모양 만.. 2021. 4. 10.
[코딩 공부_49] 페이지 만들기-main편 오늘은 마지막 페이지 main 페이지를 만들었다! gif로 변환하면서 알아차린 부분인데 녹화할때 마우스가 안보인다 마치 혼자 움직이고 있는 듯한 느낌이 든다 하하.. Animate.css pratice about info gallery service Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi perspiciatis quam, repellat id vitae quis quas ipsam perferendis pariatur voluptas ratione dolore qui maxime minima at nemo, accusamus praesentium. Id. button Lorem, ipsum dol.. 2021. 4. 9.
[코딩 공부_48] library 사용해보기(페이지 만들기-index편) 오늘은 animation.css 라이브러리를 사용하는 법에 대해 animation.css 라이브러리 사용해보기 전 꼭 파악해야하는 부분이 있다 첫번째, Framework vs Library vs plug in의 차이에 대해 알아야한다 - Framework > Libary > plug in 순으로 크다 ① Framework : 전체적인 틀을 잡아주는 도구이다 ex) node, react, bootstrap ...등 ② library : 부분적으로 필요한 유용한 도구들의 모음이다 - 과한 사용은 서비스를 느리고 무겁게 만든다 - 많이 알고 잘 적기에 사용하는 것은 또한 능력이다 - 라이브러리에 너무 익숙해지면 바보가 된다 ex) jQuery, annimated.css, fullpage ...등 ③ plug-.. 2021. 4. 9.
[코딩 공부_47] 다양한 animation 실습해보기 스크롤 배너 만들기 scroll banner test 로딩바 만들기 hue 효과로 애니메이션 주기 빙글빙글 돌아가게 만들기 타이핑 치듯이 만들기 hello world 나의 페이지에 적용시키기 * 코드 생략 느낀점 : 홈페이지가 움직이니까 좀더 재미있고 멈춰있는 페이지보다 더 많이 집중되는 거 같다 !! 오늘은 내가 한 배너도 적용 시켜보는 시간이었는데 나의 작업물을 넣어보니 신기하고 더 애착이 가는 거 같다 ㅎㅎ!! 근데 배너가 놀이기구처럼 너무 왔다리 갔다리하는데 멈추고 싶지만 ... 어떻게 하는 지 잘모르겠다... 난 역시 응용이 너무 부족한 거 같다 ㅜㅜ.. 2021. 4. 7.
[코딩 공부_46] animation에 대하여 animation은 css스타일을 다른 css스타일로 부드럽게 전환시켜준다 동적으로 보이게 해준다고 생각하면 이해하기 쉬울 거 같다! animation은 영상 편집과 똑같다고 생각하면 좋다 키프레임을 지정해서 수치를 주고 그 수치와 키프레임에 따라 느낌이 달라진다! 실습부분을 보기 전에 animation에 대한 여러 속성을 먼저 정리해보자! animation-name @keyframes 애니메이션 이름을 지정한다 animation-duration 한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 0s animation-timing-function 애니메이션 효과를 위한 타이밍 함수를 지정한다. ease animation-delay 요소가 로드된 시점과 애니메이.. 2021. 4. 6.
[코딩 공부_45] css, filter에 대하여 1. filter : 색상 filter효과를 준다! - blur : 흐림효과, 값이 클수록 더 흐려진다 - brightness : 밝기 조정, %로 조정하며 0%는 이미지를 완전히 검정색으로 만든다 (defult : 100%(1)) - contrast : 대비 조정 (brightness와 동일하게 조정한다) - drop-shadow : 이미지에 그림자 효과를 적용한다 - grayscale : 이미지를 회색조로 변환한다 - hue-rotate : 이미지에 색조 회전 적용한다 - invert : 이미지의 샘플을 반전시킨다 - opacity : 이미지의 불투명하게 만든다 - sepia : 이미지를 세피아로 변환한다 blur(default: 0px) brightnews(default: 100%) contrast.. 2021. 4. 6.
[코딩 공부_44] self_introduce 만들기_2 style.css html 이예빈 안녕! 나는 예빈이야! food 저는 음식을 정말 좋아합니다! 밥 먹는 게 너무 좋아요 c4d 배우고 있는데 너무 어려워요! 머리가 어지러워요 painting 그림 그리는 건 취미에요! 너무 즐거워요 software skills html5 90% css3 80% javascript 90% jqurey 60% photoshop 80% illustator 90% Leeyebin www.helloworld.com | phone. 010-1234-1234 | leeyebin.green@gmail.com 결과화면 오늘은 복습을 하기 위해 self_introduce를 예쁘게 꾸며보았다 내가 좋아하는 가수의 동영상을 넣기 위해 유튜브에서 코드를 복사 붙여넣기 했었는데 재생이 안되서 .. 2021. 4. 4.
[코딩 공부_43] transform - translate, scale, skew, rotate? 오늘 배운 내용인 transform의 translate, scale, skew, rotate에 대해 정리하는 시간을 가져보겠다! ① translate : 이동 - element 현재의 위치에서 이동을 시작한다 - value : px(x축, y축), %(본인 크기에 대한) / translateZ(px) : 3D에서 사용한다 - 기본 형태이다 gold 색에는 translate를 coral 색에는 margin-left를 넣어 차이를 주도록 하겠다! - translate를 주어 위치를 이동시키면 전체적인 박스형태는 그대로 gold 박스만 이동하지만, margin은 전체적인 박스도 같이 움직이기 때문에 hover같은 기능을 주었을 때 왔다리갔다리 하는 요상한 버그가 생기게 된다! 차이점을 유의해서 사용하자!! ②.. 2021. 4. 2.
[디자인_14] 포스터 제작하기 요번 과제로 포스터를 제작하였다 너무 재미있었다 다음 디자인은 어떻게 나올지 궁금하다! 다음엔 브랜드 디자인을 하는데 !! 막막하다!! 2021. 4. 2.
[코딩 공부_42] self-introduce 만들기_1 오늘은 self-introduce를 만드는 실습을 했다 나는 하드코딩한다고 엄청 헤맸다 😥 열심히 꾸미려고 하니 시간이 끝나서 허겁지겁 캡처하고 압축해서 제출했다 ,, 코딩을 하면 할수록 엄청 어렵고 머리 아파서 재미있는 지 잘몰랐었는데 이번 실습을 하면서 코딩에 대한 재미가 느껴졌다! 주말에 더 꾸며보는 시간을 가져볼 것이다!! 😎 yebin.lee 안녕하세요 저는 예빈이에요! 코딩도 디자인도 너무너무 재미있어요! 가끔 머리 아프지만 결과물을 보면 뿌듯하고 두근거려요! 얼른 배워서 저만의 홈페이지를 만들고 싶어요 엄청 뿌듯하겠죠?ㅎㅎ intoduce Lorem ipsum dolor sit amet consectetur adipisicing elit. A nisi aspernatur quasi velit.. 2021. 4. 1.
[코딩 공부_41] transitions 적용하기 ① transitions : 엘리먼트의 두가지 상태 사이에 변화를 줄 수 있다 - transition-timing-function 종류 linear 균일하게(가장 많이 사용) ease 잠깐 느리게 빠르게 느리게(기본값) ease-in 느리게 빠르게 ease-out 빠르게 느리기 ease-in-out 느리게 빠르게 느리게 - hover를 줄 때 사용하며, transitions은 hover가 아닌 곳에 넣어줘야 한다 (default) - 의도에 따라 달라질 수 있다 ex1) ease linear ease-in ease-out ease-in-out ex2) hover/zoom/transition 2021. 3. 31.

티스토리툴바