PSY_IT_Tech

[ Bootstrap ] 다양한 기능 부트스트랩 위치와 Font Awesome Bootstrap CSS 적용 bootstrap.min.css bootstrap.min.css.map 파일을 /bootstrap4/css/에 넣고 link 함. Bootstrap Javascript 적용 "Compiled CSS and JS" Download > jsDeliver 찾기 > 밑에 스트리트 3줄 찾아 전에 복사 Bootstrap Navbar 적용 Components 인덱스 Navbar 위치 원하는 나브 바 적용 Bootstrap 디자인 적용 Utilities > Colors 위치 원하는 디자인 적용 Bootstrap 웹사이트 모양 적용 1. bootstrap > 상단에 Examples > Blog 원하는 모양 적용..

[ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용 부트스트랩을 활용하기에 앞서 가장 중요한 것은 버전을 확인하는 것이다. Doit 장고 부트스트랩 교재에서는 4.5 버전을 사용하니 이에 유의하여 작성하길 바란다. Bootstrap Navbar 1. 부트스트랩 홈페이지(bootstrap.com)에 접속한다. 2. Components 인덱스의 Navbar를 클릭한다. 3. 다양한 디자인의 나브 바와 코드가 나열되어 있다. 4. 원하는 Navbar를 클릭한다. 5. Html에 있는 원래 nav태그가 있는 곳에 복사 붙여 넣기 한다. 6. 반응형 navbar를 사용하면 윈도 크기에 따라 나브 바 디자인이 변경된다. 7. a 태그의 innerHTML과 hre..

[ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용 col은 행으로 x축과 같이 폭을 설정하는 단위이다 row은 열로 y축과 같이 높이를 설정하는 단위이다. Bootstarap Spacing Row margin : 마진은 경계 바깥쪽 간격을 의미한다. 경계선으로부터 떨어진 거리를 의미한다. padding : 패딩은 경계 안쪽 간격을 의미한다. 경계선으로부터 페이지 내용까지의 거리를 의미한다. t = 위쪽 b = 아래쪽 l = 왼쪽 r = 오른쪽 x = 왼오(x축) y = 위아래(y축) (없음) = 왼쪽, 오른쪽, 위, 아래 표에 나와있는 속성을 마진과 패딩으로 조합해 활용할 수 있다. 예를 들어 이 태그는 행의 마진을 위아래로 3px 만..

CSS Javascript Bootstrap 부트스트랩 웹사이트 접속 활용 방법 1. getbootstrap.com 사이트에 접속한다 2. Doit 장고 부트스트랩 교재에서 사용한 버전은 4.5 버전이다. 3. 상단에 다운로드 버튼을 클릭한다. 4. Bootstrap v5.1 클릭한다 5. All versions 클릭해 4.5 버전을 클릭한다. 6. Head to the downloads page 클릭하지 말고 새 탭에서 열도록 하자. 7. Compiled CSS and JS의 Download 버튼을 클릭한다. Bootstrap 파일 생성 부트스트랩 파일이 bootstrap-4.5.3-dist.zip으로 생성되었을 것이다. 그러면 zip 압축을 풀고 css 디렉터리에 접근한다. bootstrap.min...

HTML CSS Javascript 프로그래밍 모든 웹페이지 작성에 기본이 되는 HTML CSS Javascript를 이용해 장고 프로젝트의 틀을 만들 것입니다. html 소스코드를 보는 방법은 ctrl + u를 누르시거나 마우스 오른쪽을 클릭한 뒤 페이지 소스를 클릭하면 됩니다. html은 태그로 이루어져 있는 마크업 언어로 작성한 웹페이지를 확인하기 위해서는 보기 > 명령 팔레트 > Live Server : Open with Live Server을 클릭해 웹페이지 상에 나타나는 결과물을 볼 수 있습니다. 이를 더 쉽게 하기 위한 단축키는 ctrl + shift + p입니다. HTML emmet을 이용해 html 기본 구성을 빠르게 작성할 수 있습니다. ! + tab 키를 누르고 불필요한 meta 태그..