코드덤

안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩으로 간단한 폼을 하나 만들어 볼 거예요. 이번 폼에는 부트스트랩의 플로팅 레이블 스타일이 적용되어 있어요. 입력창을 클릭하면, 상단에 레이블이 작게 뜹니다. 바로 부트스트랩 플로팅 레이블을 적용한 스타일이랍니다. 부트스트랩에 제시된 예제 코드로 이러한 플로팅 레이블을 빠르게 적용시켜 줄 수 있습니다. 그리고 현재 폼 또한 반응형이에요. 그래서 큰 화면에서는 이름과 이메일 입력란이 가로로 배치됩니다. 하지만, 작은 화면에서는 세로로 배치되도록 만들어 볼 거예요. 부트스트랩의 플로팅 예제 코드를 활용하면, 이러한 폼을 상당히 빠르게 만들 수 있습니다. 부트스트랩 닥스, Form 카테고리에 floating label이 있는데요. 여기에서 플로팅 레이블의 다양..

안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩 5로 심플한 테이블을 만들어 볼 거예요. 총 2가지 테이블을 만들어 볼 건데요. 첫 번째 테이블이 부트스트랩의 기본 스타일을 적용한 예시입니다. 그리고 이전 시간에 배웠던 프로그래스 바도 넣어 보았습니다. 그리고 두 번째 테이블은 색상과 줄무늬 스타일이 적용된 예시입니다. 또한 마우스 포인터에 닿을 때마다 하이라이트 효과도 넣어 볼 거예요. 그리고 두 번째 예시에서는 부트스트랩의 뱃지 스타일을 넣는 방법에 대해서도 소개해 드립니다. 만들어 나가는 자세한 과정은 아래 영상에 담겨 있습니다. 아래 영상을 참고해서 여러분도 빠르게 테이블의 스타일을 잡아 보세요! 2가지 실천 프로젝트를 통해서 부트스트랩을 보다 체계적으로 배워나갈 수 있는 강좌를 오픈하였습니다..

부트스트랩 5 예제 9 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 레스토랑 대표 메뉴를 소개하는 페이지를 이미지 슬라이드 쇼 형식으로 만들어 볼 거예요. 부트스트랩의 캐러셀 예제 코드를 활용하면 빠르게 만들 수 있습니다. 여러 장의 이미지가 자동으로 슬라이드 되면서 보입니다. 그리고 이미지 좌우로 버튼이 보이죠. 좌우 버튼을 클릭해서 이미지를 이전과 다음으로 넘길 수도 있습니다. 이번 예제 코드는 부트스트랩에서 제공하는 예제 코드를 가져와서, 이미지만 넣어주고, 너비와 같이 간단한 스타일만 추가로 잡아 준 거랍니다. 부트스트랩의 carousel은 여러 장의 이미지를 슬라이드시켜 주는 요소인데요. 부트스트랩 Docs를 통해서 다양한 예시들을 제공하고 있어요. 만들어 나가는 자세한 과정은 ..

예제 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 부트스트랩 5로 디지털 명함을 만들어 볼 거예요. 아래 이미지와 같이 전체적인 배경을 넣고, 그 위로 디지털 명함을 넣어 볼 거예요. 그리고 프로필 정보 가장 하단에 SNS로 연결되는 버튼들이 있는데요. 이 버튼에 사용된 아이콘은 부트스트랩에서 제공하는 아이콘을 사용했습니다. 이렇게 이번 시간에는 부트스트랩 아이콘을 가져오는 방법에 대해서도 함께 배워 보겠습니다! 큰 화면에서는 이렇게 프로필 사진과 세부 정보가 수평으로 배치되고요. 작은 화면에서는 프로필 사진 아래쪽으로 텍스트가 배치되도록 만들어 볼 거예요. 부트스트랩을 사용하면, 입문 과정에서도 이러한 웹 페이지는 크게 어렵지 않게 만드실 수 있습니다. 그럼 함께 디지털 명함을 만들어 ..

부트스트랩5 예제7 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에 부트스트랩으로 만들어 볼 예제를 먼저 소개해 드릴게요. 이전 시간에 그리드 시스템을 적용해서 여러 장의 카드를 배치시켜 보았습니다. 그때, 부트스트랩의 카드 스타일을 적용해서 이미지 아래쪽으로 텍스트를 배치시켰는데요. 이번 시간에도 부트스트랩의 카드 스타일을 적용해서 만들어 볼 거예요. 차이점은, 이번 예제에서는 카드 전체에 배경 이미지로 이미지를 깔아 준다는 거예요! 그리고 그 배경 이미지 위로 텍스트를 띄워 볼 거랍니다! 위의 사진처럼 말이에요! 이러한 카드 스타일 또한 부트스트랩에 예제 코드가 제시되어 있으니까요. 우리는 이 예시 코드를 활용해서 빠르게 만들어 줄 수 있어요! 자, 그럼 함께 만들어 볼게요! 만들어 나가는..

부트스트랩 예제 6용 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 카드 형식으로 반려견을 소개하는 페이지를 만들어 볼 거예요. 각 카드에는 이렇게 이미지와 간단한 소개들이 들어가 있습니다. 그리고 지난 시간에 배운 부트스트랩의 그리드 (grid) 시스템 또한 적용되어 있어요. 그래서 large 사이즈 이상에서는 이렇게 카드 4장이 일려로 펼쳐집니다. small 사이즈 이상에서는 한 줄에 카드 2장씩, 가장 작은 화면에서는 카드 한 장식 출력되도록 만들어 볼 거예요. 오늘의 예제에 필요한 이미지는 상단의 첨부 파일을 다운로드하여서 사용해 주시면 됩니다. 오늘 예제는 부트스트랩의 카드 (card) 스타일과 그리드 (grid) 시스템을 활용한 예제인데요. 부트스트랩에서 제공하는 예제 코드를 활..

예제 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에 부트스트랩으로 만들어 볼 예제는 프로필 소개 섹션이에요! 위의 그림과 같이 이미지와 텍스트를 배치시켜 볼 거랍니다. 왼쪽으로 사진이 배치되어 있죠. 그리고 오른쪽으로 프로필에 대한 세부 사항이 배치되어 있는데요. 이 예제는 부트스트랩의 그리드 시스템이 적용된 예제랍니다! 그래서 화면이 스몰 사이즈 이하로 작아지면, 사진 아래쪽으로 텍스트가 배치되도록 만들어 줄 거예요. 부트스트랩의 가장 큰 장점 중 하나가 바로 반응형 웹 디자인입니다. 반응형 웹 디자인은 브라우저의 너비에 따라 레이아웃을 변경해 주는 것을 말하는데요. 이제는 스마트폰이나, 태블릿, 노트북뿐만 아니라, 자동차나 가전제품을 통해서도 웹 브라우저 접속이 가능해졌습니다. 이처럼 우..

안녕하세요. 코드덤입니다. 이번 시간에는 영화 평점을 이렇게 프로그래스 바를 사용해서 표현해 볼 거예요. 부트스트랩에서 제공하는 기본 예제 코드를 활용해서 바로 이러한 프로그래스 바를 만들 수 있답니다! 위의 이미지에서처럼 줄무늬 모양도 넣어보고, 색상이나, 값도 아주 간단하게 바꿔줄 수 있어요! 그리고 이미지로는 보이지 않지만, 애니메이션 효과도 들어가 있답니다. 이 부분은 아래 영상을 통해서 확인하실 수 있어요. 프로그래스 바의 스타일부터 애니메이션까지 부트스트랩으로 간단하게 만들어 줄 수 있답니다! 자, 그러면 프로그래스 바를 활용한 영화 평점 웹 페이지를 함께 만들어 볼게요! 만들어 나가는 자세한 과정과 상세한 설명까지!! 아래 영상에 모두 담아 두었습니다! 그러니, 아래 영상을 참고해 주세요~ ..

예제 소스코드 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에는 포트폴리오 갤러리를 만들어 볼 거예요. 부트스트랩 클래스를 적용해서 사진 3장이 이렇게 가로로 펼쳐지도록 만들어 보겠습니다. 그리고 화면 크기에 따라서 이미지의 크기와 여백 또한 그에 맞춰 달라지도록 만들어 볼 거예요. 본 예제에 사용된 이미지는 상단에서 다운로드하실 수 있습니다. 이전 시간에 배경 색을 넣고, 불투명도를 지정하고, 텍스트 속성 및 가운데 정렬하는 방법에 대해 배워보았는데요. 함께 만들어 나가기 전에, 배경색과 제목 그리고 이미지를 3장이 반응형으로 들어가도록 여러분 스스로 먼저 도전해 보세요! 물론 이 3장을 부트스트랩으로 가로 배치시키는 방법에 대해서는 오늘 함께 배워나갈 거예요! 만들어 나가는 과정은 아래 영상을 통..

안녕하세요. 코드덤입니다! 이번 시간에는 부트스트랩으로 간단하게 카드 형식을 만드는 방법에 대해 알아볼 거예요. 예제로 짧은 명언을 카드 형식으로 만들어 보았는데요. 부트스트랩 스타일을 적용해서 빠르게 아래와 같은 카드 형식을 만들어 줄 수 있답니다! 부트스트랩에서 카드 모양은 shadow 클래스 하나만 적용해 주면, 간단하게 카드 모양을 만들어 줄 수 있어요! 거기에, 패딩으로 내부 여백을 넣거나, rounded 클래스로 모서리를 둥글게 만들어 줄 수도 있습니다. 자세한 내용은 아래 영상을 통해서 확인하실 수 있습니다! 부트스트랩 기본 코드를 가져오는 방법부터, 부트스트랩의 blockquote 클래스와 blockquote-footer 클래스로 인용 문구의 스타일을 적용하는 방법, 카드 모양을 잡아주고,..