css8 [Web] 숙제 - ( week 1) 현재 페이지에서 예시를 보고 요소를 추가하기 부트스트랩 form 1. Form 선택 부트스트랩에서 사용할 요소의 코드를 가져온다. 예시를 보면 '별점'이라는 설명과 드롭다운이 같이 있으므로 형식에 맞는 코드를 찾아서 사용한다. 드롭다운 요소의 위치는 URL과 Comments 입력칸 사이이다. 코드를 넣어주고 별점에 대한 정보를 넣어준다. Movie URL Rating -- Select -- ⭐ ⭐⭐ ⭐⭐⭐ Comments 완성 2023. 4. 9. [Web] 배포하기 - ( week 1 ) 지금까지 만든 웹 페이지는 생성한 그대로 보이는 것으로 이를 정적 웹 페이지라고 한다. 이러한 정적 웹 페이지는 배포가 비교적 간단하기 때문에 이번엔 Github를 사용해서 배포해 보도록 한다. Github 깃허브에 가입을 진행한 다음 배포를 위해서 Repository를 생성해 준다. Create repository를 누르면 해당 저장소의 이름을 지정해 준 후 생성이 진행된다. 생성된 저장소에서 Quick setup을 보면 'uploadinng an existing file.'을 볼 수가 있다. 이 링크를 누르면 파일을 업로드할 수 있는 창으로 안내된다. 업로드 페이지가 뜨면 내가 만들었던 index.html 파일을 업로드 해준다. 깃허브에 페이지를 호스팅 하기 위해서는 한 가지 약속이 있는데 해당 파일.. 2023. 4. 9. [Web] 부트스트랩 활용 - ( week 1 ) Card 부트스트랩을 활용해서 페이지에 카드 붙여 넣기를 사용해 본다. Bootstrap Card 적용시킬 카드는 위와 같이 동일한 카드를 나열한 형태이다. 아래에는 사용하기 위한 코드가 있다. 해당 코드를 복사한 다음 현재 페이지의 소스에서 div를 새로 생성하고 추가해 준다. Card title This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. 이 부분이 하나의 카드라 볼 수 있으며 이 부분을 수정해서 여러 개를 사용할 것이기 때문에 하나만 남겨두고 나머지는 지워준다. 여기는 한 줄에 몇 개를 보여줄지 정할 수 있으며 한.. 2023. 4. 9. [Web] Spartapedia - ( week 1 ) 지금까지 배운 내용들을 사용해서 영화를 모아서 볼 수 있는 페이지를 만들어본다. 우선 영역을 정의하고 그 안에 텍스트와 버튼을 넣어준다. Best movies in my life Add Movie div영역의 높이를 조절해 주고 안에 있는 요소들을 가운데로 정렬시켜 주도록 한다. display: flex; flex-direction: column; align-items: center; justify-content: center; 위 코드는 일반적으로 붙어 다니는 코드로 자주 사용된다. display : flex를 사용하면 해당 요소는 Flexbox 컨테이너가 되고 그 안에 있는 자식들은 아이템이 된다. flex-direction은 정렬시킬 방향을 정할 수 있다. align-items를 통해서 플렉스박스 .. 2023. 4. 7. 이전 1 2 다음
