본문 바로가기

전체 글117

[Bootstrap] 반응형 홈페이지 개발 오늘은 부트스트랩에 대해 알아보는 시간을 가졌습니다. 부트스트랩은 웹 페이지를 구현하는 과정에서 레이아웃, 컬러, 폰트 사이즈, 캐러셀, 반응형 등 다양한 기능 등이 포함되어 있고, 그런 개발을 간단하게 해줄 수 있는 웹 프레임워크, 오픈형 플러그인입니다. 저희는 부트스트랩을 이용해서, 기본적인 웹 페이지, 메뉴판 등을 만들 수 있고요, 당장 저만 같아도 기존에 만들기 힘들었던 미디어쿼리를 이용한 반응형 홈페이지 또한 만들기에 훨씬 용이해지는 걸 알 수 있었습니다. 그럼 이 부트스트랩은 어떻게 이용하는 걸까요? 부트스트랩 1. 부트스트랩 바로 가기 getbootstrap.com Bootstrap The most popular HTML, CSS, and JS library in the world. getb.. 2021. 7. 7.
[HTML5 CSS3] CSS Flex flex 사이트를 보면, 대부분 레이아웃은 수직으로 구성되어 있기 때문에 위에서 아래로 스크롤 합니다. 이처럼 레이아웃은 저희가 많이 사용하는 요소들이 기본적으로 블록 개념으로 쌓여 있기 때문에 '수직'은 상대적으로 쉽게 만들 수가 있는데요? flex 알기 전 저는 메뉴나 이미지 등을 수직이 아닌 '수평'으로 구성하기 위해선 float을 left로 지정해 줬습니다. 근데 이제부턴 이러한 구성 방법 말고 오늘 제가 배운 Flex(Flexible Box)를 이용해 레이아웃을 쉽게 수평으로 구성할 수 있게 됐습니다. 먼저 수직으로 쌓인 박스들을 수평으로 구성하기 위해 박스부터 한 5개 쌓아 봤습니다. 그리고 평소 같으면 li에 float: left;로 왼쪽에서 오른쪽으로 쌓이게 했겠지만, 오늘 배운 flex를.. 2021. 7. 6.
[Clone Coding] 언더아머 클론코딩 프로젝트 개요 안녕하세요. 오늘은 HTML과 CSS 그리고 JavaScript의 진도를 어느정도 나갔다면, 그리고 이 프론트엔드와 더 친해지고 실력 향상에 도움이 되는 훈련으로 손 꼽히는 클론코딩을 해 봤습니다. 저는 헬스와 패션 등이 취미인 만큼 헬스 의류 브랜드를 한 번 클론코딩 해 봐야겠다고 생각했는데요. 전체를 다 클론코딩 하지 않고 홈페이지 첫 스크롤에서 보이는 이미지와 상품 이미지, 그리고 footer까지만 해 봤습니다. 본 작업물의 상표, 로고, 이미지 저작권은 전부 언더아머에 있으며, 출처도 언더아머에 있음을 밝힙니다. 또한 클론코딩 목적 이외에 상업적, 영리 목적으로 절대 사용되지 않았음을 밝힙니다. 프로젝트 URL 깃허브 페이지 URL https://baikseungjeon.github.. 2021. 7. 5.
[jQuery] 아코디언 메뉴 개발 아코디언 메뉴 아코디언 메뉴의 정확한 의미는 모르지만, 연습 중인 예제들만 풀어봐도, 접었다 폈다 하는 카테고리나 메뉴라는 것은 어림짐작 할 수 있습니다. 이러한 기능들은, 솔직히 지금 어느 웹 페이지나, 앱을 들어갔을 때, 메뉴들을 탭 하면 흔하게 볼 수 있는 효과들인데요. 그렇기 때문에 본능적으로 아코디언 메뉴를 많이 만들어 볼 필요성을 느꼈습니다. 제가 만든 메뉴입니다. 컨셉은 QnA 게시판이고요, 질문을 클릭하면 답변이 밑에 뜨는 것을 코딩 했습니다. 물론 다시 한 번 누르면 답변은 slideUp 되고요, 클릭 한 질문의 답변 외에 다른 답변들이 열려있지 않게도 코딩 했습니다. See the Pen by BeBe (@baikseungjeon) on CodePen. 2021. 6. 30.
[jQuery] 폰트 키우기 / 윈도우 Scroll 이벤트 폰트 키우기 '-' 버튼을 클릭하면 본문의 폰트를 작아지게 하고, '+' 버튼을 누르면 폰트를 키워봤습니다. 그리고 다시 처음으로 돌아가고 싶으면 '초기화' 버튼을 누르면 돌아가게도요. - 초기화 + 12px Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi id autem doloribus ipsum ullam esse, error quibusdam consequatur consectetur, quod accusantium, dolorum eum perferendis explicabo quisquam quis ut neque placeat? Lorem ipsum dolor sit amet consectetur adipisicing elit. .. 2021. 6. 29.
[jQuery] 애니메이션 메소드 / CSS 속성을 변수 지정 jQuery 애니메이션 메소드 $("요소 선택").hide(); // 요소 숨김(hide: 숨기다) $("요소 선택").show(); // 요소 출력(show: 보여지다) $("요소 선택").toggle(); // 위 두 효과 적용 $("요소 선택").fadeOut(); // 요소가 점점 투명해지면서 사라짐 $("요소 선택").fadeIn(); // 요소가 점점 선명해지면서 나타잠 $("요소 선택").fadeToggle(); // 위 두 효과 적용 $("요소 선택").slideUp(); // 요소 위로 슬라이드 $("요소 선택").slideDown(); // 요소 아래로 슬라이드 $("요소 선택").slideToggle(); // 위 두 효과 적용 $("요소 선택").animate({스타일 속성}, 적용.. 2021. 6. 29.

티스토리툴바