초코찜빵의 study note 초코찜빵의 study note

웹사이트 개발

• 간지나는 웹사이트 개발을 위한 무료 그래프 코드 사이트 [echart] - HTML JavaScript

  웹사이트 개발 2024. 11. 19. 15:42

  무료로 그래프의 코드를 받을 수 있는 사이트에 대해 알아보자. Echart는 다양한 예쁜 그래프들의 JavaScript 코드를 얻을 수 있다.   Webhttps://echarts.apache.org/examples/en/index.html Examples - Apache ECharts echarts.apache.org Example 메뉴에 들어가면 다양한 그래프들을 볼 수 있다.   Install구현 시에는 echarts를 설치해야한다.npm으로 echart를 설치해보자. npm install echarts  Code설치가 끝나면, 실제 코드가 적용될 div를 정의해준다. 그래프가 뜨지 않는다면 크기도 정의되었는지 확인하자.  아래는 echart 사이트에서 얻어온 코드의 앞부분이다. (1) 넣어줄 di..

  Read More
• [HTML/CSS] 웹 개발 - 무료 아이콘 삽입하기 / 사이트 추천(fontawesome)

  웹사이트 개발 2024. 3. 26. 20:19

  깔끔한 UI를 제공하는 아이콘 사이트를 소개한다. 주소는 아래와 같다. https://fontawesome.com/icons Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com HTML에서 아이콘을 삽입하기 위해 아래와 같이 스크립트 관련 코드를 삽입해준다. 아래는 5.15.3버전을 이용한 것임을 참고바란다. 실제로 사용할 때에는 아래 코드를 이용한다. fa-music이라 되어 있는 부분에 아이콘의 모양을 넣으면 되고, fa-stack-1x 와 fa-invers..

  Read More
• [Django] Static 이미지를 수정해도 변경되지 않는 경우 (Static image modify not working)

  웹사이트 개발/Django 2024. 2. 8. 19:11

  Django로 웹 개발을 할 때 Static 이미지 수정이 반영되지 않을 때가 있다. 먼저, settings.py 파일에서 static 폴더의 설정이 제대로 되었는지 확인하자. STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR,'앱이름','static')] settings.py 파일 내에 위와 같이 코드가 작성되어있는지 확인하고, static 폴더가 올바르게 있는지 확인한다. 이후 터미널에 아래와 같이 입력한다. (터미널 상에서 manage.py를 실행할 수 있는 위치여야한다.) python manage.py collectstatic 만약 아래와 같은 메세지가 뜬다면, yes를 입력했을 때 static 폴더 변경 작업이 수행된다. 이후 다..

  Read More
• [Django] HTML에 이미지 추가하기 / static 이미지 HTML에 띄우기

  웹사이트 개발/Django 2022. 7. 30. 19:35

  HTML에서 원래 이미지를 넣듯이 코드를 작성한 후 runserver시키면 Django에서는 이미지가 깨져서 나타난다. 그래서 이미지를 넣을 때에는 static이라는 폴더를 따로 형성하고 경로 지정을 해주는 작업이 필요하다. 1) settings.py settings.py 파일 내, SATIC_URL = '/static/' 아래에 다음과 같은 코드를 붙여넣는다. STATICFILES_DIRS=[ os.path.join(BASE_DIR,'myprofile','static')] STATIC_ROOT = os.path.join(BASE_DIR, 'static') 그러면 os에 에러가 뜰텐데, import os를 해줌으로써 해결해준다. urls.py 이후, urls.py에서 아래와 같은 코드를 추가한다. url..

  Read More
• [Django] 가상환경 설정 venv, source, activate, createsuperuser

  웹사이트 개발/Django 2021. 8. 14. 18:36

  $python -m venv [가상환경 이름] 가상환경을 만들고$ source [가상환경 이름]/Scripts/activate * Windows 기준으로 작성되었다. 혹시 맥에서 이 코드가 에러가 뜬다면 아래 코드로 시도해보기 바란다. $source [가상환경 이름]/bin/activate * activate 가 있는 위치에 맞게 가상환경을 실행시키면 된다. 위의 코드를 입력하면 아래와 같이 괄호가 포함된 창으로 바뀐다. 이후, manage.py 를 실행시킬 수 있는 폴더로 들어가서 아래와 같은 명령문을 쳐준다.$ python manage.py migrate $ python manage.py createsuperuser 이러한 코드를 치면 아래와 같이 설정하는 창이 뜨고, 이메일, 비밀번호 등을 ..

  Read More
• [HTML] HTML에서 표 및 글자 가운데정렬하기

  웹사이트 개발/HTML 기본 2021. 8. 1. 13:27

  표 가운데 정렬 : 글자 가운데 정렬 : 위에서 {{problem}} {{Answer}}이 테두리 없는 표이다. 가운데 정렬이 완료된 것을 확인할 수 있다. border = 1 코드를 추가하면 표가 가운데 정렬 되었다는 사실이 더욱 명확해진다.

  Read More
• [HTML] HTML에서 주석 작성하는 방법

  웹사이트 개발/HTML 기본 2021. 8. 1. 13:11

  HTML 상에서 주석을 작성하는 방법은 로 감싸는 것이다. 한 줄 이상 주석으로 만드는 것도 가능하다. 이렇게 두 줄 이상 주석으로 만들 수도 있다. 원하는 만큼 감싸면 된다.

  Read More