본문 바로가기

전체 글126

5. 부트스트랩 이용해서 포스팅박스 추가하기 https://getbootstrap.com/docs/4.0/components/forms/ Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com 위의 페이지에 들어가서 forms 코드를 copy 으로 묶여있는 곳에 붙여넣어 주고, 을 로 바꾼다. 그러면 아래와 같이 나오게 되는데, 이메일 박스처럼 보이는 부분을 이제 포스팅 박스 형태로 바꿔주면 된다. https://developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Cascadin.. 2021. 8. 21.
4. 부트스트랩이용해서 메모(카드) 페이지 만들기 https://getbootstrap.com/docs/4.0/components/jumbotron/ Jumbotron Lightweight, flexible component for showcasing hero unit style content. getbootstrap.com 해당 페이지에 접속 후, copy 클릭 밑에 붙여넣어 준다. 위와 같이 나오게 된다. 그리고 왼쪽 메뉴에 cards로 들어가서 위 그림에 해당하는 코드를 copy해서 jombotron 밑에 붙여넣기 해준다. 결과 이미지가 안 뜨는 이유: 코드를 자세히 보면 카드 이미지 소스가 ...으로 되어 있기 때문이다. 이제 이미지를 넣어보자. 위와 같이 card 하나만 남겨두고 다 삭제 시켜준 뒤에, 마음에 드는 사진 하나를 골라 '이미지 주.. 2021. 8. 20.
3. 부트스트랩 그렇다고 한다. * 부트 스트랩 시작 템플릿: 부트 스트랩을 사용하기 위한 준비를 하는 것 index.html 파일을 새로 생성한 후, 아래의 코드들을 작성해준다. #mood 위의 코드를 작성하면, 웹 페이지만 #mood 글씨만 나올뿐, 아무것도 나오지 않는다는 것을 확인할 수 있다. 무언가를 적용하기 위해서는 컴포넌트를 적용해야 한다. 부트스트랩을 적용하기 위해서는 항상 위의 코드와 같은 시작 템플릿을 적용하고 시작해야 한다. https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and .. 2021. 8. 19.
2. CSS 기초 html이 웹 페이지의 뼈대라고 한다면, CSS는 뼈대를 바탕으로 꾸며주는 것이라고 할 수 있다. 가끔씩 웹 페이지를 방문할 때, 오류가 나면 페이지의 색이 전부 사라지고 글자만 남은 경우를 경험해 본 적 있을 것이다. 그것이 html이다. 즉, 우리가 보게 되는 예쁜 형태의 웹 페이지는 css를 이용해서 만들어준 것이라고 할 수 있다. 위와 같이 타이틀 아래에 을 추가해주고, h1에 class="my title"를 덧붙여줌으로써 CSS를 사용할 준비를 한 것이다. *class를 붙여주는 것은 명찰을 달아주는 것과 같다. 이를 적용해보면 아래와 같이 타이틀 색깔이 분홍색으로 바뀐 것을 확인할 수 있다. *text-align: 텍스트 위치 background-image:url(""); : 이미지 링크 ba.. 2021. 8. 18.
1. html 기초 1. 파이참 프로 설치 https://www.jetbrains.com/pycharm/download/#section=windows Download PyCharm: Python IDE for Professional Developers by JetBrains Download the latest version of PyCharm for Windows, macOS or Linux. www.jetbrains.com 설치 후, 라이센스를 Jetbrain에 등록한 후에 (대학생들은 1년의 교육용 무료 라이센스가 주어진다.) 바탕화면에 연습용 폴더를 만들어 준다. 설치한 파이참을 실행시킨 후, OPEN 을 눌러주고, 연습용 폴더를 열어준다. 그리고 new 버튼을 이용해 html 코드 파일을 생성해주면 아래와 같은 창이.. 2021. 8. 17.
5주차-완성: 익명 타임라인 페이지 1. 익명 페이지 * AWS에서 발급받은 데이터베이스를 통해 intellj에서 만든 웹 익명 타임라인 페이지를 MySQL 서버로 연결했다. 그래서 서버를 닫아도 이제 메세지가 사라지지 않을 것이다. * 익명 아이디는 문자열 조합으로, 랜덤으로 구성해서 나타나도록 했다. 랜덤으로 구성하는 문자열 조합이기 때문에 메세지를 작성할 때마다 아이디가 바뀌는 점을 사람마다 아이디 고정으로 해두는 것으로 바꾸는 것이 나을까? (익명 커뮤니티처럼) 이거는 고민해 봐야 할 사항인 것 같다. * 인터페이스는 깔끔해보이지만(트위터처럼 생겼다...) 더 많은 기능들을 추가하며 바꿀 수 있으면 바꾸는 방향을 고려 * 메세지가 삭제되면, 창은 새로고침(reload) 된다. * 수정 버튼을 누르면 메세지 수정도 가능하다. * 다른.. 2021. 8. 3.