본문 바로가기

분류 전체보기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.

티스토리툴바