본문 바로가기

웹114

[코딩 공부_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.
[코딩 공부_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.
[코딩 공부_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.
[코딩 공부_40] 음수마진(negative margin)에 대하여 ① 음수마진(negative margin) : 마이너스 값으로 margin을 설정한다! 시작점을 앞당긴다고 생각하면 된다 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum pariatur, fugit voluptate omnis exercitationem tempore placeat, alias iusto aspernatur quis suscipit ut neque necessitatibus laboriosam sed consequuntur illo numquam ullam! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus omnis, necessitatibus con.. 2021. 3. 29.
[코딩 공부_39] 가상 요소 셀렉터 1) 가상 요소 : 요소의 특정 부분을 선택한다. - :(단일 클론), ::(이중 클론)의 차이 : IE8의 경우 CSS3를 지원하지 않기 때문에 싱글콜론만 지원이 가능하다 그래서 :(단일클론)만 사용하는 게 호환성이 더 좋다 ① :before - 요소의 앞을 선택하며, 스타일적으로 content를 추가할 수 있다 ** inline 속성이다 (스타일적으로 content에 추가한다는 뜻은 꾸미기 위한 용도에서 끝나는 것이라고 생각하면 된다!) p:before { content: "hello"; color: gold; } world ② :after - 요소의 뒤를 선택하며, 스타일적으로 content를 추가할 수 있다 ** inline 속성이다 p:after { content: "hello"; color: .. 2021. 3. 26.
[코딩 공부_38] li 간격 없애는 방법 3가지 코드를 작성하다보면 많이 쓰게 되는 태그가 바로 "li"이다 리스트를 나열할때 자주 사용하는 태그인데 가로로 배열해서 간격을 동일하게 주고 싶어서 시도를 해보면 내가 생각했던 대로 되지 않던 경우가 많았다 그래서 오늘은 태그 사이의 간격을 적절히 떨어뜨리는 방법에 대해 알아보고자 한다! 내가 구현하고 싶은 화면은 아래와 같다 (아이콘을 가로로 배열하고 태그 사이의 간격을 동일하게 주기) 1. 아이콘 나열하기 먼저 html에 ul li태그로 아이콘을 둘러싼다 ** 이때, ul로 묶어주게 되면 ● 모양으로 리스트를 구분하게 되는데 reset.css 파일을 만들어 "li {list-style: none;}"을 주게 되면 ● 모양 없이 리스트가 나열된다 * a 태그의 하이퍼링크 표시 없애는 방법 : a {tex.. 2021. 3. 24.
[코딩 공부_37] 인스타그램 실습하기 저번주에 이사를 해서 블로그에 신경을 못썼다 🙄,, 다시 열심히 포스팅해야겠다(화이팅!) 오늘 인스타그램 시험을 쳤었다! 요번 인스타그램 실습 관련하여 코드와 결과화면을 올리고 나의 느낀 점에 대해 이야기해보도록 하겠다! 내 스토리 saera justine hans.park.dev 중구 국채보상로 zz green님 외 100명이 좋아합니다 @charset "utf-8"; @import "reset.css"; #app { width: 500px; margin: 5% auto; border: 1px solid #999; border-radius: 10px; background-color: rgba(255, 255, 255, 0.7); overflow: hidden; } /* header */ /* gnb *.. 2021. 3. 23.
[코딩 공부_36] CSS로 카카오 실습 꾸미기 수업시간에 계속 카카오 실습을 하고 있다😊 각 페이지마다 html 코드를 작성하고 CSS로 꾸미는 작업을 하고 있고, 지금 홈-채팅-뉴스까지 했다 CSS로 꾸미는 작업까지 들어가니 재밌기도 하고 복잡했다 ㅎㅎ,, 사실 vertical align으로 정렬하는 방법을 들었을 땐 알겠는데 막상 내가 칠땐 엄청 헤매서 할때마다 검색했었는다 ,, 요번에 수업들으면서 개념을 딱 알게 됬다 ! 주말에 꼭 한번더 실습해보고 내 지식으로 만들겠다!!😤 @charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; color: inherit; } h1, h2, h3,.. 2021. 3. 17.
[코딩 공부_35] bem class명 규칙 오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자! 1. BEM의 기본 구조 - BEM은 Block, Element, Modifier를 뜻한다. - 저 세가지를 이용하여 각각 __와 --로 구분한다. ① 블럭(Block) : 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다 .header { property: value; } .footer {{ property: value; } ② 요소(Element) : 블럭이 포함하고 있는 한 조각이다 (__로 표시) .header__logo { property: value; } .header__tagline { property: value; } .header__searchbar { property: value; } ... 2021. 3. 16.
[코딩 공부_34] css 복습하기 오늘은 복습을 하기 위해 요리 레시피를 주제로 html 문서를 만들어봤는데 ,, 기획을 간단하게 해서 금방 만들었다,, 다음에 할땐 더 구체적으로 기획해서 연습해봐야겠다! 김치찌개 돼지고기, 김치, 설탕, 간장, 대파, 다진마늘 1. 돼지고기는 찌개용으로 먹기좋은 크기로 준비한다. 2. 김치는 먹기 좋게 잘 썰어서, 다진마늘, 설탕 각 큰 숟갈 1스푼 넣고 냄비에 들기름 두르고 볶아준다. 3. 2번 냄비에 물을 적당량 부어서 끓인다. 4. 1번의 돼지고기를 넣고, 된장 반스푼 정도를 넣어 돼지 잡내를 잡고, 간도 한다. 5. 간장 살짝 넣어서 간 맞춘다. tip) 이 때 같이 넣으면 더 맛있는 재료들을 파만 빼고 다 넣어주면 됩니다. 6. 중불 정도에서 푹~ 끓여준다. 7. 마지막.. 2021. 3. 14.
[코딩 공부_33] css, 가로·세로 중앙정렬하기 오늘은 css로 세로, 가로 중앙 정렬하는 방법을 알아보겠다! 세로, 가로 중앙정렬하는 개념은 정말 어려운 거 같다 😑 이론으로만 이해하려하지말고 꼭 실습해보면서 익히는 걸 추천한다!! - 가로 중앙 정렬은 text-align을 center로 하면 쉽게 중앙 정렬이 가능하다. 하지만 text에만 적용되기 때문에 text가 아닌 경우엔 display를 inline으로 설정하고 사용해야한다 - margin을 auto로 주게 되면 중앙 정렬이 되지만block 요소만 적용이 가능하기 때문에 주의 해야한다! - inline 요소를 수직 정렬 하기 위해선 Vertical-align을 꼭 알아야 한다 ① vertical-align - inline, inline-block에서 사용(div에서 사용하면 작동되지않음) -.. 2021. 3. 13.
[코딩 공부_32] wiki.html을 css로 꾸며보자 오늘 수업은 wiki.html을 css로 꾸미는 실습을 하였다! 수업시간에 해봤는데 아직 셀렉터를 활용을 잘못하고 엉망진창으로 코드를 작성한 거 같아 마치고 다시 해봤다!! 검색하고 내가 전에 썼던 블로그도 보면서 해결할 수 있었다 블로그 쓰는 게 재밌기도 하지만 매일매일 쓴다는게 귀찮아서 미룬 적도 많지만 오늘만큼은 유용하게 쓴 거 같아서 기분이 좋다 😎 아직도 많이 미흡해보이지만 코드와 결과화면을 올리겠다!! 01-wiki.html 위키백과:요청 위키백과, 우리 모두의 백과사전. 관리 요청 도움이 필요하신가요? 각 사항 요청에 맞는 페이지를 방문해 주세요. 요청을 하기 전에 반드시 가이드라인을 읽어 주세요. 삭제 요청 문서의 삭제를 신청하시는 경우 해당 문서에 {{삭제 신청}} 또는 {{특정판 삭제 .. 2021. 3. 12.
[코딩 공부_31] CSS 박스 모델 CSS 박스 모델에 대해 알아보자 박스모델이란 무엇일까? HTML 태그들은 모두 박스모델을 갖고 있다 F12를 누르고 Elements 탭으로 가서 아무 태그나 눌러 style탭을 보면 아래와 같은 그림이 나온다 이것이 바로 박스모델이라 한다 margin - border - padding - content 순으로 둘러싸고 있는 박스모델에 대해 자세하게 설명하도록 하겠다 ① margin : 다른 태그와의 거리를 나타낸다 - box-sizing, border-box, content-box는 width에 포함되지 않는다! ② border : 테두리를 말한다 - width에 포함되지 않으며, 굳이 padding을 넣지 않아도 생긴다! ③ padding : 내용과 테두리 사이의 간격이다 - background-co.. 2021. 3. 11.

티스토리툴바