우주바다 개발일지

과제는 homework 폴더 안에서 진행. homework 폴더 열기 그 안에 index.html 파일 만들어서 시작 템플릿 붙여 넣고 시작. *과제 내용 ▼부트스트랩 홈페이지▼ 참고해서 예시 이미지처럼 레이아웃 만들고 주문하기 버튼 누르면 '주문이 완료되었습니다.' alert 하기. https://getbootstrap.com/docs/4.0/components/alerts/ *이미지 : div로 영역 만들고 background에 이미지 씌워도 되고, img 태그만 사용해도 됨. *주문하기 버튼처럼 text 속성을 가진 컴포넌트 가운데 정렬: 가로 길이 설정 , margin: auto; 해서 안되면 display : block ;으로 설정할 것. img 태그로 한 것과 / div 태그로..

주소와 코멘트 입력, 저장하면 카드로 생성되는 form 부트스트랩 > forms에서 찾아보기. *참고 : 태그는 로 바꿔서 사용 (정확한 이유는 모르지만 자유롭게 쓸 수 있는 div 태그로.) posting-box 이름 붙이고 css. border-color가 있길래 적용해봤지만 무반응. 자동완성에서 이것저것 찾아봐도 잘 모르겠다. 그래서 구글링. 바깥 선 색이니까 outline color로 검색 대충 맞는 것 같아 적용해보니 이것도 무반응. 답을 확인해보니 검색어는 css border. 번역기 돌려보니까 테두리는 border. outline은 윤곽, 개요로 뉘앙스가 좀 다르다. 검색할 때 참고하기 좋은 대표 사이트 2개. [1] MDN mozilla (css border) https://develope..

예제. 상단 영역 글씨 바꾸고 구글 폰트에서 원하는 폰트 적용. (+이름이 좀 어색한 것 같아서 '나만의'로 바꿨다.) 카드에 링크 제목, 코멘트 줄 추가하고 css로 색 변경 여기까지 했는데 제목을 링크로 거는걸 까먹었다.. a태그로 href 걸고... 글이 링크가 되는 게 뭐더라.. dev tool 찬스. a태그 쓰는 법을 제대로 기억 못했나보다. 글씨를 좀 크게 하고 싶어서 링크 걸고, css로 font-size 조절했다. 마지막으로 제목, 카드제목 글씨 두껍게. font-weight : bold; 까지하고 끝!

만들 예제. 부트스트랩에서 컴포넌트를 가져다 쓰면서 똑같이 만들어보기. 일단 강의대로 4.0 버전으로 진행. 드래그해서 복사하거나 copy 버튼으로 복사. body 태그 안에 붙여넣기. 다음은 카드에서 같은 모양 찾기. 아래로 쭉 내리면 Card columns 있는데 그 묶음들 중 필요한 모양의 카드만 사용. 불러왔을 때 다르게 뜨는 이유는 가져다 쓴 코드 안에 이미지 주소가 비어있어서. 나중에 사진 넣으면 된다. 그 전에 필요한 카드만 자를 때, 어디까지 잘라야할 지 보려면 파이참에서 직접 지우면서 봐도 되지만 작업 전, 개발자 도구(우클릭 - 검사 )로 미리 확인하고 지우는 게 더 안전하고 마우스 댔을 때 구역 표시되니 편함. 필요한 카드만 남기고 삭제 이미지 태그 안의 src =" 여기에 주소 넣기..

부트스트랩은 CSS를 가져다 쓸 수 있는 라이브러리. ▼ 부트스트랩 홈페이지 ▼ https://getbootstrap.com/ 홈페이지에서 시작하기를 누르면 소개 페이지가 나온다. 매번 업데이트되고 있으므로 쓰려는 버전을 선택하고 introduction 페이지에서 링크를 복사, head에 import 해야 한다. ▼ 부트스트랩 4.0 ▼ https://getbootstrap.com/docs/4.0/components/alerts/