본문 바로가기

bootstrap3

[Web] 숙제 - ( week 1) 현재 페이지에서 예시를 보고 요소를 추가하기 부트스트랩 form 1. Form 선택 부트스트랩에서 사용할 요소의 코드를 가져온다. 예시를 보면 '별점'이라는 설명과 드롭다운이 같이 있으므로 형식에 맞는 코드를 찾아서 사용한다. 드롭다운 요소의 위치는 URL과 Comments 입력칸 사이이다. 코드를 넣어주고 별점에 대한 정보를 넣어준다. Movie URL Rating -- Select -- ⭐ ⭐⭐ ⭐⭐⭐ Comments 완성 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] Bootstrap - ( week 1 ) 부트스트랩 CSS를 다루는 방법을 알더라도 잘 꾸미는 것은 별개의 일이다. 부트스트랩은 잘만든 CSS를 미리 모아둔 것으로 미적 감각이 없더라도 선택만 잘하면 페이지를 잘 꾸밀 수 있게 된다. 부트스트랩을 사용하기 위해서는 외부에서 파일을 가져와야 하는데 다음과 같이 가져올 수 있다. 태그를 통해서 CSS를 가져올 경로를 설정하고 를 통해 가져올 수 있도록 만든다. 해당 코드를 추가한 다음 CSS를 모아놓은 페이지를 방문해서 코드를 통해서 가져올 수 있다. bootstrap 페이지에서 사용하고자 하는 코드를 복사해서 내 html에 붙여놓도록한다. 그러면 선택한 디자인과 작동방식의 버튼을 만들 수 있게 된다. 버튼 이외에도 CSS로 꾸며진 다양한 태그들을 얻을 수 있기 때문에 웹 개발에 상당한 편의성을 제.. 2023. 4. 7.