코드덤

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

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

예제 이미지 다운로드 : 안녕하세요. 코드덤입니다. 이번 시간에 부트스트랩5로 첫 번째로 만들어 볼 예제 페이지입니다! 이 예제 페이지에 사용된 이미지는 바로 위의 jpg 파일을 다운로드하여서 사용해 주시면 됩니다. 이번 페이지를 통해서 부트스트랩으로 글자 크기, 굵기, 색상 등과 같은 텍스트 스타일과 배경색 그리고 마진을 설정하는 방법에 대해 알아볼 거예요. 그리고 상단에 이미지가 있는데요. 이 이미지는 화면의 너비에 따라 이미지의 크기 또한 반응형으로 바뀌도록 만들어 줄 거예요. 이 부분도 부트스트랩을 통해서 아주 간단하게 처리할 수 있답니다! 자, 그러면 함께 만들어 볼께요!! 부트스트랩이 처음이신 분들은 맨 첫강부터 들어주셔야 보다 잘 이해하실 수 있으실 거예요. 만들어 나가는 자세한 과정은 아래..

이번 시간에는 부트스트랩으로 다양한 버튼 스타일을 지정해 볼 거예요. 부트스트랩 docs에서 botton이라고 검색하시면, 해당 페이지에 예시와 그에 대한 코드를 확인하실 수 있습니다. 이러한 예시를 보면서 원하는 버튼 코드를 적용해 주시면 되세요. class 속성에 부트스트랩 클래스 스타일을 적용해 주시면 됩니다. 이렇게 말로 설명드리면, 이해하기 조금 힘드시죠! 아래 영상에, 부트스트랩 공식 홈페이지에서 예시 코드를 확인하는 과정부터, 부트스트랩 스타일을 적용해서 버튼 모양을 만들어 나가는 과정을 상세하게 담아 두었으니까요. 아래 영상을 통해서 확인해 보세요! btn, btn-색상명 단 이 두 개의 부트스트랩 클래스만 적용해 주면, 바로 예쁜 버튼 모양을 만들 수 있습니다! 부트스트랩에서 이러한 스타..

이번 시간부터 본격적인 부트스트랩 강의가 시작되는데요. 이번 첫 시간에는 부트스트랩이 어떠한 방식으로 작동되는지 그 작동 방식에 대해 간단하게 소개해 드릴 거예요. 구글에서 bootstrap으로 검색을 해 보면, 영문 홈페이지와 한글 홈페이지, 두 가지 결과가 뜨는데요. .com이 영문 공식 사이트예요! 저희는 이 영문 공식 사이트를 참고해서 강의를 진행해 나갈 거예요! 한국어판 또한 현재는 동일한 버전이지만, 한국어판은 보통 버전 업데이트가 수개월 이상 늦어지는 경우가 많기 때문에, 가급적 영문 사이트에 익숙해지실 것을 권해 드립니다. 부트스트랩 적용 방식에 대한 상세한 내용을 아래 영상에 모두 담아 두었으니까요. 영상을 통해서 만나 보세요! 부트스트랩 공식 홈페이지에 보면 responsive site..

웹 사이트를 만들 때 가장 기본이 되는 언어가 바로 HTML, CSS 그리고 자바 스크립트입니다. 이 3개의 언어가 바로 크롬과 같은 웹 브라우저를 통해서 해석되고 동작되는 언어예요. html과 CSS 코드를 크롬으로 전송하면, 크롬에서 이 코드를 읽고 해석해서 사용자가 보기 편한 형태로 화면에 표시해 주는 거예요. 이 3개의 언어는 그 목적이 상당히 명확하게 구분되어 사용되고 있습니다. 아래 영상을 통해서 보다 자세한 설명을 들어 보세요! 집 짓는 과정에 비유해서 설명을 드릴게요. HTML은 집 전체의 틀을 잡아주는 역할을 합니다. 서재와 공부방이 딸린 방 3개짜리 집을 짓겠다는 형식으로 집 구조의 큰 틀을 HTML로 잡아줍니다. CSS는 디자인 담당입니다. HTML로 만든 집을 CSS로 멋지게 인테리..

안녕하세요. 코드덤입니다. 이제 본격적으로 웹 사이트를 만들기 위한 준비를 해 볼 거예요. 2가지 준비사항이 필요한데요. 첫 번째는 웹 브라우저입니다! 웹 브라우저는 여러분이 사용하는 웹 브라우저를 사용해서 진행해 주시면 됩니다. 단, 인터넷 익스플로러는 공식적으로 서비스가 종료되었죠. 그리고 부트스트랩 5 또한 인터넷 익스플로러와는 더 이상 호환되지 않습니다. 그래서, 크롬이나, Edge, 파이어폭스를 사용해 주시면 되는데요. 본 과정에서는 크롬 브라우저를 기준으로 설명을 드릴 거예요. 그리고 저희는 개발자 도구창을 사용할 거예요. 만약 개발자 도구창 사용에 아직 익숙하지 않으시다면, 크롬을 다운로드하셔서 사용하실 것을 권해 드립니다. 크롬 브라우저는 대부분 설치되어 있으실 것 같은데요. 만약 설치되어..

안녕하세요. 코드덤입니다. 이번 시간부터 파이썬 장고로 이어지는 웹 프로그래밍 강의 시리즈가 시작됩니다. 파이썬 장고로 웹 프로그래밍을 하기 위해, 필요한 몇 가지 선수 지식들이 있습니다. 첫 번째는 파이썬의 기본 개념 두 번째는 간단한 웹 페이지를 만들 수 있을 정도의 HTML과 CSS 기본 개념, 세 번째는 데이터베이스에 대한 기본 지식 이렇게 총 3가지 선수 지식이 먼저 선행되어 있어야 합니다. 아래 영상을 통해 보다 자세한 내용을 들어 보세요! 먼저 첫 번째, 파이썬의 기본 개념은 제 유튜브에 오픈된 무료 강좌를 통해 충분히 익힐 수 있습니다. 총 70개 이상의 다양한 예제들과 실전 프로젝트를 통해 파이썬을 배워나가는 과정이 무료로 오픈되어 있으니까요. 아래 무료 강좌를 통해 파이썬의 기초를 쌓아..

안녕하세요. 코드덤입니다. 이번에 소개해 드릴 작품은 파이썬 터틀 모듈로 만든 똥 피하기 게임이에요! 하늘에서 수많은 poop?들이 떨어집니다! 이 poop들을 피해 최대한 버텨야 하는 심플한 게임이에요! 무엇보다도 이 게임은, 파이썬 입문과정에서 클래스와 모듈을 경험해 볼 좋은 프로젝트라는 거예요! 이처럼 클래스와 모듈과 같은 파이썬 개념들도 실전 프로젝트를 통해 익혀 나갈 수 있어요! 이번 게임에서는 poop들이 하늘에서 계속 떨어지도록 만들어 줄 거예요! 이렇게 많은 poop들을 생성하고, 또 이 poop들이 하늘에서 무한으로 떨어지도록 만들어 주는 코드를 모듈로 만들어 둘 거예요! 그러면 꼭 poop 캐릭터가 아니더라도, 무언가가 하늘에서 떨어지도록 만들 때 이 모듈을 가져가서 바로 활용할 수 있..

안녕하세요. 코드덤입니다. 상당한 수준의 웹 사이트를 그것도 빠르고, 효율적으로 만들 수 있다는 사실을 알고 계시나요? 웹 사이트를 만들기 위한 가장 기본 언어인 HTML과 CSS만 보더라도, 상당한 수준의 학습량을 요구합니다. 하지만, 보다 빠르고 효과적으로 웹 사이트를 만드는 길을 선택할 수도 있습니다. 바로 전 세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷인 부트스트랩을 통해서예요! 부트스트랩을 활용하면, 상당한 수준의 웹 사이트를 그것도 빠르게 만들 수 있습니다! 부트스트랩은 이미 전 세계적으로 프런트엔드 개발자 사이에서 가장 많이 사용되고 있는 CSS, 자바스크립트 프레임워크입니다. 하지만, 그런 전문 프론트엔드 개발자뿐만 아니라, HTML을 처음 접하는 비전공자분들, 또는 추후에 파이썬 ..