본문 바로가기

웹/CSS71

[코딩 공부_65] float simple project-1 실습하기 float simple project를 만들어 보았다 말 그대로 심플해서 좋았다 float이 포스트잇이야!만 생각하면 쉽게 이해할 수 있는 거 같다 새로운 걸 배울땐 머리가 너무너무 아픈데 계속 복습하다보면 아리쏭해도 머릿속에 조금씩 들어오는 거 같다 히히 beginning your journey Lorem, ipsum dolor. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam placeat beatae dolor doloribus aut illum dolorem sit odit minima, neque officiis nostrum id animi harum fugiat sint nobis sunt laudantium? get Ti.. 2021. 5. 6.
[코딩 공부_64] float란? 휴우!! 드디어 float까지 왔다!! 😎 나는 하루 수업을 안들어서 float에 대한 특성에 대해 잘모르고 그냥 따라하기만 했는데 이제 좀 이해가 간다 !! 하루 수업 안들었다구 바보가 되니 우울했다 ,, 1. float : 이미지/텍스트 배치하기 또는 레이아웃 배치하기 (참고) float로 배치하는 방법은 전통적이고 옛날 방식이다! flex나 grid가 최신이지만 아직 float를 많이 사용하는 편이다! - float는 띄우다는 뜻으로 img와 text를 같이 배치하기 위해 고안되었다. 즉 포스트잇처럼 고정시키고 옆에 글들이 배치되도록 설정이 가능하다 - markup의 위치가 중요하다 - float은 뒷따라오는 컨텐츠와 섞이게 한다 - clear로 섞이지 않게 할 수 있다 ① 특성 : 부모요소는 자식.. 2021. 5. 4.
[코딩 공부_63] fullscreen-slider 만들기 궁극의 기술 개발을 향한 여정, 영자닷컴이 바꿀 미래를 주목하라. 매년 범람하는 새로운 기술 및 보안에 대응하여 각 분야의 전문인력구성, 연구개발, 기술력 향상을 최우선으로 합니다. IT 기술 성장의 중심 기업 ‘영자닷컴’ 공공분야, 대기업 중심의 IT컨설팅, SI구축, 웹기반 시스템구축, 어플리케이션 플랫폼 구축 등을 수행하는 기업입니다. 환경과 안전을 위한 기술적 가치를 추구하는 기업 중·소규모 사업장의 효율적인 화학안전 관리를 위한 Smart System을 개발하여, 환경과 안전을 위한 기술적 가치를 실현하고자 합니다. 2021. 5. 4.
[코딩 공부_62] modal과 slider를 함께 응용하기 show x my skill set html5 Lorem ipsum dolor sit amet consectetur adipisicing elit. my skill set css3 Lorem ipsum dolor sit amet consectetur adipisicing elit. my skill set javascript Lorem ipsum dolor sit amet consectetur adipisicing elit. X 2021. 5. 3.
[코딩 공부_61] modal, slider 만들기 후후 .. 정말 자격증 때문에 일주일동안 블로그에 소홀했었다 소홀한 만큼 자격증을 잘했어야했을텐데!! 아주 그냥 망해버렸다 !! 다시 자격증 공부 열심히 하구 ! 블로그도 열심히 챙겨야겠다 ^_^ 많이 사용하는 modal과 slider를 구현해보는 시간을 가져보았다 modal은 포트폴리오에 자주 출몰하는 녀석이라 한다 ... 곧 포트폴리오를 만들어야한다니 눈물이 나온다 😥 view x 파리행 티켓을 구매하시겠습니까? no yes 맨 윗부분엔 뭘 해야될지 적어두면 좋다고 한다! 하나의 문서니까 부연설명이 있으면 좋다는 이야기인거같다! modal을 하면서 가장 많이 헷갈렸던 부분이 셀렉터 지정하는 부분인 거 같다 분명 저번달쯤에 배운 거 같은데 잘 사용안하다보니 헷갈리는 듯하다 물결이 뭐였지! 플러스가 뭐였.. 2021. 5. 1.
[코딩 공부_60] 메인 페이지 실습하기 web class back-end front-end publisher designer creative Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, eveniet voluptatibus. Aperiam quo ut ratione odio dolore molestiae ipsum labore rem, eos, perferendis iure officiis autem accusantium ducimus? Voluptates, a! join get your dream, go forward view calfornia office Lorem ipsum dolor sit amet consectetur adipisicing elit. Repu.. 2021. 5. 1.
[코딩 공부_59] the space project-2, 코딩하기 로그인 회원가입 ENG The Space 회사소개 제품소개 고객지원 세계로 뻗어나가는 디지털 트랜스포메이션 솔루션 시시각각 변하는 현대사회에 최적화된 디지털 상품 정보 관리 시스템 보험, 금융 산업의 대표 기업이 선택한 Space Product를 확인해보세요 더보기 Space Product Space Product는 상품의 기준 정보와 업무 규칙을 통합 관리하는 디지털 상품 정보 관리 시스템으로 상품 기획, 개발, 릴리스, 운영 및 판매 분석에 이르는 상품 라이프 사이클을 더 효율적으로 수행할 수 있도록 합니다. 강력한 자체 개발 룰 엔진을 기반으로 기업 내∙외부 환경 변화에 신속한 대응이 가능한 상품 시스템의 구축이 가능해집니다. The Space는 혁신적입니다 금융 급변하는 금융 시장에서 기업이 시장.. 2021. 4. 27.
[코딩 공부_58] the space project-1, 기획하기 요번 시간은 project 기획부터 시작해서 코딩까지 하는 실습시간이었다 나는 the space라는 기업을 임의로 만들어서 페이지를 만들었다 자료가 없어서 내용은 lorem으로 했지만 만들때는 이노룰스(innorules.com/kr/index.php)라는 기업의 페이지를 참고해서 만들었따 ! 그부분은 다음 포스팅에서 이야기 해보도록 하겠다! 이제 xelf로 만드는 것도 재밌고 적응하게 되었따! 그룹화나 단축키같은 건 없지만 쉽고 간단하게 만들 수 있어서 좋다 ㅎㅎ 2021. 4. 23.
[코딩 공부_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.
[코딩 공부_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.
[코딩 공부_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.