DJANGO_1

※파이썬 가상환경을 구축한 상황이라 가정하고 진행하겠습니다 (가상환경 구축은 나중에 추가 정리해서 올리겠습니다.) Visual Studio Code로 진행했으며 cmd 터미널 환경에서 Django-admin startproject config . 명령어를 사용해주면 장고가 시작됩니다. (config 옆에 있는 . 까지 포함해야 합니다.) 장고파일을 만든 후 python manage.py startapp [앱이름] 명령어를 사용하면 작업할 앱을 만들수 있습니다. 오늘 Django_1정리는 url분리와 template 분리에 대해 정리하겠습니다. 먼저 앱을 생성해준 후, django를 만들때 생성된 config파일로 이동해줍니다. 그럼 config파일 내부에 urls.py파일을 확인할 수 있을겁니다. urls.py에서 경로를 설정해주면 됩니다. urlpattern설정하는 방법에는 절대경로와 상대경로의 방법이 있습니다. 절대경로는 /로 시작하면 /최상위폴더/하위폴더/하위폴더...순으로 작성해주며 되고 상대경로는 현재폴더/연결할 파일...순으로 찾아가는 경로입니다. urlpatterns = [ path('admin/', admin.site.urls), ] 위 코드를 살펴보면 url코드가 '주소/admin'인 url에 접속하게 되면 admin.site.urls의 화면을 불러온다고 생각하면 될꺼 같습니다. 저는 아래와 같이 경로를 설정해주겠습니다. urlpatterns = [ path('admin/', admin.site.urls), path('prac/',views.index) ] 위 경로를 설정해주기 위해서는 from prac import views 코드를 작성해줘서 prac파일의 views를 가져온다고 설정해주어야 합니다. 그럼 이와같이 작성이 끝나면 prac앱의 views파일로 이동해줍니다. 혹시 prac이 어디서 나왔냐하면, python manage.py startapp prac으로 prac이라는 앱을 생성해준겁니다. views로 이동하게 되면 처음 url경로를 설정해줄때 views.index 즉 views파일의 index를 호출하게 설정해주었는데 아마 아직 아무것도 작성해주지 않아 index함수가 없는 상태일껍니다. 그럼 def index로 함수를 만들어줍니다. def index(request): return render(request, "prac/index.html") 저는 index함수를 이렇게 해줬습니다. 일단 설명하기 앞서 render에 대해 잠시 설명하셌습니다. render은 template 함수를 사용할 떄 사용하는 함수입니다. 그럼 또 template는 무엇이냐 하면, 재사용이 가능한 파일로써, views에서 데이터를 받아 동적으로 치환해서 사용합니다. (Django의 정리가 끝나면 마지막에 용어정리를 한번 하도록 하겠습니다.) template이라는 폴거를 만들어 앱과 똑같은 이름의 prac이라는 폴더를 template하위 폴더로 만들어주고 파일을 만들어줘서 관리해줍니다. 따라서 위에 작성한 코드를 다시 살펴보면 "prac/index.html"은 prac폴더의 index.html을 반환하라는 것을 의미합니다. 순서대로 프로젝트 작업 최상위 폴더에 template폴더를 생성하고 앱 이름과 똑같은 prac폴더를 순서대로 만듭니다. 만드는 방법은 그냥 아무폴더 클릭후 esc를 눌러준다음 2번째에 보이는 폴더만들기를 눌러주면 됩니다. 순서대로 만들어줬다면 prac폴더를 클릭후 index.html을 만들어줍니다. 이제는 다시 template을 사용하기 위해서는 다시 config파일의 settings.py를 수정해줘야 합니다. 약 53-54번째 줄을 확인해보면 TEMPLATES가 있는것을 확인할 수 있습니다. TEMAPLATES밑에 'DIRS':[]라고 되어 있을텐데 그 부분을 'DIRS': [BASE_DIR/'template'], 이렇게 수정해주면 됩니다. 쉽게 설명하자면 경로를 설정해준겁니다. 총 처음부터 어떻게 실행되는지 흐름을 정리하자면 모든 폴더와 파일이 세팅되었다는 가정하에 터미널에 서버 시작 명령어 python manage.py runserver을 쳐줍니다. (가상환경 상태에서 명령어를 사용해야되며 command 창에 입력해야됩니다. powershell에서는 안됩니다) 보면 빨간색으로 칠한 부분을 키보드의 ctrl을 누른채로 마우스 좌클릭을 해주면 창이 열립니다. /prac이라고 추가적으로 입력해주면 template/prac 폴더안에 생성한 index.html에 작성한 코드가 보이는 것을 확인할 수 있습니다. 처음에 이제 실행을 하게 되면, config폴더 안의 urls.py에 url주소를 맵핑해준것을 기억할 수 있습니다. prac/이라는 주소를 주었고 따라서 '주소/prac'이라는 url을 주게 되면 views.index를 호출하게 됩니다. 그럼 views.index는 어디에 있냐면 앱 생성 명령어로 통해 생성한 앱인 prac앱의 views로 이동하면 됩니다. 하지만 아직 index함수는 만들어주지 않았으니 새로이 만들어줘야합니다. def index...으로 생성해주고 render함수를 반환해줄수 있도록 합니다. 그러면 다시 views.index에서 prac/index.html로 보내게 됩니다. 그럼 다시 template/prac 순으로 만들어줬던 폴더에 있는 index.html이 호출이 됩니다. 따라서 최종적으로 사용자가 확인할 수 있는 화면은 index.html이며 사용자가 '주소/index'라는 url을 주게 되면 위의 순서대로 넘어와져 결국 index.html이 호출되는 것을 확인할 수 있습니다. 다음에는 테이블 생성으로 찾아뵙겠습니다. ※제가 공부하면서 참고할려고 만든 블로그라 많이 미숙합니다. 혹시 제가 놓친부분이나 수정할 부분 댓글 남겨주시면 반영하겠습니다. 감사합니다.

Django 터미널 명령어

메모장 용도로 제가 쓸려는 Django터미널 명령어 모음을 만들겠습니다. (powershell로 진행안되므로 commend환경에서 명령어 시작) -Django 시작하기 Django-admin startproject config . -파이썬 앱 만들기 python manage.py startapp app이름 -서버 구동 python manage.py runserver -테이블 등록을 위한 makemigrations 생성 python manage.py makemigrations -테이블 등록 python manage.py migrate -슈퍼관리자 생성 python manage.py createsuperuser -

CSS와 부트스트랩에 대해 짧은 정리

웹 페이지를 시작할 때 흥미를 잃는 경우가 종종 있는데 저 같은 경우에는 디자인이 힘들어서 도중에 흥미를 잃었던거 같습니다. 따라서 오늘은 CSS와 부트스트랩에 배운것을 간단히 정리해둘려고 블로그를 켰습니다. CSS는 사용자가 보는 화면을 꾸미는데 사용합니다. 같은 문서 내의 파일을 정의할 때, 부분에 어떤 식으로 보일지 설정을 저장해줍니다. 예를들어 버튼은 파란색으로 표기된다 라는 식으로 설정하면 부분에 버튼을 사용하면 일반 버튼이 아닌 파란버튼이 나옵니다. CSS 사용문법에 대해 알아보겠습니다. 기본 형식은 태그 안에 설정을 해줍니다. CSS를 사용해줄때, 선택자를 선택해서 사용목적을 정해줄 수 있습니다. 선택자로는 id, class 속성이 있습니다. ID 속성 : 고유한 식별을 목적으로 사용하면 작업 페이지 내에서 하나의 요소만 지정해 줄 수 있습니다. CLASS 속성 : 재사용 목적으로 사용합니다. 일반적인 CSS 사용 문법은 h2{ color : blue } 선택자 { 속성 : 속성값; } 의 형태의 문법을 갖습니다. 그리고 부분에는 Hello~ CSS! 이런식으로 사용해주면, 이 출력되는 것을 확인할 수 있습니다. 일반적인 태그 이지만 속성값을 주어 색이 파란색으로 변화되서 출력되는 것을 알 수 있습니다. 다음으로는 ID와 CLASS속성은 어떤 형식의 문법을 갖는지 알아보겠습니다. ID속성은 선택자 앞에 #을 붙여주면 됩니다. CLASS속성을 부여해주기 위해서는 선택자 앞에 .을 붙여주면 됩니다. 그럼 각각 어떻게 출력되는지 확인한겠습니다. 부분에 아래와 같이 코드를 작성해주겠습니다. h2 { color: darkorange; } .blue{ color: blue; } #red{ color: red; } 그러면 지금 CLASS속성값으로는 파란색 ID속성값으로는 빨간색이 들어간 것을 확인할 수 있습니다. 다음으로 부분에 아래의 코드를 마저 작성하겠습니다. CSS 선택자 알아보기 클래스 선택자입니다. 아이디 선택자입니다. 그럼 아래와 같은 결과화면을 얻습니다. 각 태그안에 class와 id의 속성값으로 에 지정한 선택자를 넣어줌으로 각 지정한 색이 나오는 것을 확인할 수 있습니다. 다음으로는 글씨에 효과를 주는 속성에 대해 알아보겠습니다. padding : 본문 내용과 border 사이의 여백 border : 테두리 설정 margin : border와 바깥과의 여백 text-align : 글씨 위치 조정 작성 순서는 (width(테두리두께) - style - color)의 순서를 가집니다. 태그 안에 아래와 같은 CSS를 작성해주겠습니다. h1 { text-align: right; } #texteffect1 { border:3px solid red; width: 70%; margin: 0 auto; text-align: center; } #texteffect2 { border:3px solid blue; width: 30%; margin: 30px 30px; text-align: center; } 위의 코드를 잠시 살펴보면 h1태그를 사용하면 글씨는 오른쪽 정렬을 하도록 CSS를 주었고, texteffect1은 테두리는 3px의 선이 생기고 빨간색을 칠하게 border속성을 주었습니다. width을 70% 속성을 주어 70% 크기의 테두리를 생성해주었습니다. 여백은 자동 글씨는 가운데 정렬이 되도록 설정했습니다. texteffect2는 1과 비교를 위해 다른 속성값을 주었습니다. 부분에 위 속성들을 확인을 위해 아래와 같이 작성하겠습니다. CSS 글씨효과 CSS 글씨효과1 CSS 글씨효과2 그럼 다음과 같은 결과화면을 얻을 수 있습니다. 이상으로 짧게 CSS에 배운것을 정리했습니다. 선택자와 글씨효과 말고도 다양한 CSS가 있는데 추후 공부하게 되면 추가하겠습니다. 위 처럼 직접 하나하나 CSS를 개발자가 만들 수 있지만 좋은 CSS를 미리 만들어둔 사이트가 있습니다. 바로 부트스트립입니다. 부트스트립은 오픈소스이므로 저작권에 문제가 없으며 다양한 테마의 효과를 볼 수 있습니다. 부트스트랩 : https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 위 링크를 타고 들어간 후 아래로 내리다보면 위 화면을 만나볼 수 있습니다. 부트스트랩을 적용하기 위해는 제가 별표친 부분을 복사해서 적용하고 자하는 작업파일에 붙여넣기를 해주면 됩니다. 그리고 나서 왼쪽 위에 자신이 적용하고 싶은 다양한 레이아웃을 검색해서 부분에 복사붙여넣기해서 사용해주면 다양한 레이아웃을 만나볼 수 있습니다. ※제가 공부하면서 참고할려고 만든 블로그라 많이 미숙합니다. 혹시 제가 놓친부분이나 수정할 부분 댓글 남겨주시면 반영하겠습니다. 감사합니다.

HTML 주요 태그 정리_2

HTML 주요 태그 정리 -2 이번에는 태그에 대해서 알아보겠습니다. form은 안에 사용하는 태그로 사용자가 웹사이트로 정보를 보낼 수 있는 요소들은 모두 form이라고 할 수 있습니다. 속성을 이용해서 사용자가 입력한 데이터를 어떤 방식으로 서버에 넘길지 어떤 프로그램을 사용하여 처리하는 지를 정할 수 있습니다. 그럼 form과 같이 사용하는 속성에 대해 알아보겠습니다. action 속성 : form이 전송되는 서버 url 즉, 주소를 지정하는 속성입니다. name 속성 : form의 이름으로 서버로 제출된 form데이터를 참조하거나 form요소를 참조하기 위해서 사용됩니다. method 속성 : 말 그대로 전송방법을 설정하는 속성입니다. 다음으로 태그 하위에 같이 사용되는 태그들을 알아보겠습니다. 내용을 입력하는 태그는 여러줄의 글을 입력할 때 사용한 태그입니다. 속성값으로 rows와 cols를 사용하여 너비를 조정할 수 있습니다. 이런식으로 글씨를 입력하는 입력창을 생성할 수 있습니다. 다음으로 가장 많이 사용되는 태그에 대해 알아보겠습니다. 태그는 여러 속성을 사용하여 서버로 전송하는 형식과 이름을 지정하게됩니다. 사용되는 속성으로는 name, type등이 있습니다. name속성 : 서버로 전송되는 데이터의 이름을 정해줍니다. type속성 : 입력 형식을 지정합니다. 예를들어 태그는 회원가입을 할 때 사용할 수 있습니다. 아이디 입력 : 비밀번호 입력 : 이런식으로 작성해주게 되면, 아이디 입력부터 살펴보게 되면, type은 text형식이며 서버에 보낼 때 데이터의 이름은 id로 설정한 것을 알 수 있습니다. size는 위에 설명은 안했지만 말 그대로 크기를 지정해준다고 생각하면 됩니다. 비밀번호 입력을 살펴보면 type이 아이디입력과는 다르게 password로 되어있는 것을 알 수 있는데 password 형식은 입력했을때 ●이런 형식으로 나와 입력한 비밀번호를 문자그대로가 아닌 저렇게 암호화되어 나오는 것을 알 수 있습니다. 서버로 보낼 때 이름은 pw로 설정한 것을 알 수 있습니다. 다음으로는 더 다양한 type을 알아보겠습니다. 먼저 아래의 코드를 보겠습니다. 위에 코드의 type은 submit으로 서버로 데이터를 전송하는 제출버튼입니다. 어떤 서버로 제출하는지에 대해서는 위에 설명한 form태그 속성인 action속성값으로 지정한 서버 주소로 보내게 됩니다. value는 버튼에 나타낼 텍스트를 입력해줍니다. reset type은 입력한 모든 창을 초기화 해주는 속성을 가지고 있습니다. 이런식으로 버튼이 생기게 됩니다. 버튼에 대해 더 알아보도록 하겠습니다. 대표적으로 체크박스 버튼, 라디오 버튼, 드롭다운 버튼이 있습니다. 체크박스 버튼은 다중 선택이 가능하고 라디오버튼은 단일 선택입니다. 드롭다운 버튼은 선택형버튼이라고 생각하시면 됩니다. 그 전에 태그를 소개해드리겠습니다. 태그는 for 속성을 사용하여 다른 요소와 결합이 가능하며 결한 요소와 id값이 같으면 입력창을 선택하지 않고 텍스트부분만 손택해도 입력창으로 커서를 이동할 수 있습니다. 말이 어려운데 쉽게 이야기 하면 로 텍스트를 감싸고 for속성으로 속성값을 정해주고 태그에 id속성을 이용해서 속성값을 정해줍니다. 그리고 for의 속성값과 id속성값을 같게 설정해주면 된다는 뜻인데 예시로 좀더 자세히 보겠습니다. 이름 입력 : 위 두 코드를 보면 for과 id속성값을 "user_name"으로 같게 설정해주었습니다. 그럼 위와같은 결과화면을 볼 수 있을텐데 그럼 옆의 입력창을 직접누르지 않고도 이름 입력이라는 텍스트를 눌러도 입력창에 커서가 깜빡이는 것을 확인할 수 있습니다. 이런 태그는 버튼에서 사용하면 유용할꺼 같아서 이렇게 버튼설명 전에 정리했습니다. 그럼 먼제 체크박스 버튼에 대해서 알아보겠습니다 . Java name="code" value="python">Python name="code" value="react">React type의 속성으로 checkbox를 주게 되면 아래와 같은 결과화면을 얻을 수 있습니다. 버튼 이름은 value의 속성값으로 지정했으며, 다중 선택이 가능함을 확인할 수 있습니다. 다음으로는 라디오 버튼을 알아보겠습니다. 자바 파이썬 jsp 단일 선택이 되는것을 확인할 수 있습니다. 마지막으로 드롭다운 버튼을 확인하겠습니다. 자바 파이썬 jsp 드롭다운 버튼은 태그를 이용하여 사용할 수 있습니다. 이 처럼 작성하면 아래로 목록이 펼쳐지면서 목록을 선택할 수 있습니다. 단, 역기서의 value값은 서버로 넘길 값을 지정하는 것입니다. 또한 태그 사용을 위해서는 상위 태그로 태그를 사용하여 감싸줘야 합니다. 추가적으로 버튼이나 입력창 또는 input으로 값을 입력 받을때 사용하면 유용한 속성 placeholder에 대해 알아보겠습니다, placeholder은 처음에 어떤식으로 입력하라는 식의 가이드식으로 입력창에 표기하는 용도로 사용됩니다 . 하지만 어떤 값도 아니고 입력을 하면 지워지는 것을 확인할 수 있습니다. 가이드를 위해 사용하면 사용자들이 편하게 이용할 수 있는 속성인거 같습니다. 이상으로 HTML에서 자주사용 태그들을 정리 해보았습니다. 다음에는 간단하게 CSS에 대해 배운것을 정리해보겠습니다. ※제가 공부하면서 참고할려고 만든 블로그라 많이 미숙합니다. 혹시 제가 놓친부분이나 수정할 부분 댓글 남겨주시면 반영하겠습니다. 감사합니다.

HTML 주요 태그 정리_1

프론트엔드 개발에 앞서 HTML틀과 주요 태그를 정리해보겠습니다. HTML은 와 부분으로 나누어지며, 일반 사용자가 확인하는 부분은 부분에 작성하게 됩니다. 그럼 는 무엇이냐 부분에는 페이지의 속성과 정보를 저장하는 공간입니다. 태그의 기본적인 형식은 내용의 방식과 의 방식이 있습니다. 단일태그를 사용할 때는 로 표시할 수 있습니다. (뒤에 /붙이던 안 붙이던 상관이 없습니다) Head부분의 대표적인 태그로는 태그가 있습니다. 태그를 사용해주면 웹창의 제목을 바꾸어줄 수 있습니다. 취업을 위해 를 사용하게 되면 아래와 같이 창의 이름이 변하는 것을 확인할 수 있습니다. 부분의 주요태그를 확인하겠습니다. 제목 태그가 있습니다. 이 가장 큰 글씨가 나오며, 숫자가 커질수록 글씨가 작아집니다. 내용태그는 하나의 무단을 나타내는 태그입니다. 태그 안에서는 줄바꿈이 적용되지 않아 한 줄로 이어져서 나오는 것을 확인할 수 있습니다. 따라서 내용을 입력 그대로 출력하기 위해서는 내용태그를 사용해줍니다. 또는 줄바꿈을 위해서는 단일태그 을 사용해줍니다. 실선으로 단락을 나눌때나 구분을 짓기위해서 단일태그 도 있습니다. 내용을 굵게 표현하는 방식으로는 강조할 내용태그와 강조할 내용이 있습니다. 두개의 굵기 차이는 없지만 TTS를 할때 태그가 더 강한 어조로 읽는다는데 제가 확인안해봐서 잘 모르겠습니다... 다음으로는 글씨 효과 태그에 대해 알아보겠습니다. 내용 결과 => 내용 내용 결과 => 내용 와 태그는 기울림꼴로 내용을 표시합니다. 내용, 내용, 내용, 내용는 순서대로 아래와 같이 나타납니다. 태그는 HTML5에 새롭게 추가된 태그라 합니다. 형광팬으로 칠한거와 같이 내용을 표시할 수 있으며, 태그는 글씨가 작아지는 것을 확인할 수 있습니다. 태그는 글씨중앙에 선을 그어 지울 내용을 표시할 수 있습니다. 태그는 밑줄 기능을 담당합니다. 다음은 순위나 리스트를 나타낼 때 사용하는 태그를 알아보겠습니다. 상위태그 , 태그가 있으며 하위 태그 태그를 사용하여 목록 명을 나타낼 수 있습니다. 태그는 순위가 매겨지지 않고 리스트를 보여주는 반면, 태그는 순위가 나타납니다. 사용 형식은 아래과 같습니다. 먼저 상위 태그로 감싸고 하위태그로 나타내고 싶은 목록명을 작성해줍니다. Python HTML JSP ------------------------------------------------------------------------------------------------------------------- Python HTML JSP 결과화면 : 다음으로는 테이블 태그와 관련된 태그와 속성을 살펴보겠습니다. 상위태그 태그는 표를 작성할 때 사용합니다. 하위 태그로는 , , 가 있습니다. 태그는 열을 나타내며 태그 아래 와 를 사용하여 행의 내용을 넣을 수 있습니다. 태그가 3개 or태그가 4개 있으면, 3열 4행의 테이블이 만들어집니다. 그럼 와 의 차이점이 무엇이냐하면, 태그는 행의 머리글을 담당하고 는 내용을 담당합니다. no. name email tel 1 취준생 개인정보 010-****-**** 2 호랑이 비밀공개 010-****-**** 3 임인년 비밀공개 010-****-**** 위와 같은 코드를 작성하면 총 3개의 태그와 4개의 or태그가 있음을 확인할 수 있습니다. 결과화면 : 근데 표라고 했는데 표라고 하기에는 틀이 없어보인다. 틀을 추가하는 방법은 태그에 속성을 추가해주는 겁니다. border = "1"이라는 속성을 추가해주면 틀이 생깁니다. 위의 소스코드 를 해주게 되면 틀이 생깁니다. 의 하위 태그로는 테이블제목태그도 있습니다. 이 태그를 사용하게 되면 테이블의 제목을 나타낼 수 있습니다. 개인정보 위의 소스코드 ,태그에 속성을 부가하면 열과 행을 합칠 수 있습니다. 아래와 같이 코드를 짜면, 개인정보 no name email tel 1 취준생 colspan="2">개인정보, 010-****-**** 2 호랑이 owspan="2">비밀공개 010-****-**** 3 임인년 010-****-**** 와 같은 결과화면을 볼 수 있습니다. rowspan="아래로 몇칸 합칠지 정한 숫자"는 자신의 라인을 표함한 아래로 몇칸을 합칠지 정하는 행 병합 속성입니다. colspan="아래로 몇칸 합칠지 정한 숫자"는 자신의 라인을 포함한 옆으로 몇칸을 합칠지 정하는 열 병합 속성입니다. 내용태그는 단락을 나타내는 태그입니다. 내용태그는 인라인 태그라고 불립니다. 아직 위 두개의 태그에 대해서는 확실한 설명을 첨부하지는 못하겠으나, 두 태그를 사용하고 F12를 누른후 요소(Elements)를 눌러보면 두 개의 태그가 담당구역이 다른것을 확인할 수 있습니다. (조금더 공부하고 내용을 추가하도록 하겠습니다.) 다음으로는 와태그에 대해서 알아보겠습니다. 태그는 속성을 같이 사용하며, 속성값으로 href="주소"를 주게 되면, 주소로 이동하게 됩니다. 또, target="_blank"를 같이 사용해주면 새로운 창이 열리면서 속성값을 준 주소가 열립니다. ex) 구글을 새탭으로 열기 를 만들게 되면 쉽게 생각하면 하이퍼링크가 달린다고 생각하면 편합니다. 태그는 이미지를 불러오는 태그입니다. 작업하고 있는 프로젝트내에 이미지가 있는 주소를 입력하면 사진이 출력이 됩니다. 이때 주소를 입력하는 방법은 절대경로와 상대경로가 있습니다. 절대경로는 상위폴더부터 아래로 내려와 사진이 있는 폴더까지 경로를 순서대로 입력하면됩니다. ex) src="/프로젝트폴더명/사진이있는폴더의 상위폴더/사진이있는폴더/사진이름.확장자명"을 입력해주면 됩니다. 상대경로는 지금 작업하고 있는 공간에서부터 이동하는 방식입니다. 상위폴더로 가는 방식인 ../ 을 사용하여 사진이 있는 폴더로 찾아가면 됩니다. 을 입력하면 사진을 출력할 수 있습니다. 여기에 추가적으로 alt속성을 주게되면 사진이 없을때 출력되는 문구를 같이 달아줄 수 있습니다, 또한 width와 height를 사용하여 사진의 크기를 조정할 수 있습니다. 을 입력하면 사진을 못찾으면 몰?루가 출력되고 사진은 엑박이 나옵니다. 다음에는 form에 대해 추가적으로 작성하겠습니다. ※제가 공부하면서 참고할려고 만든 블로그라 많이 미숙합니다. 혹시 제가 놓친부분이나 수정할 부분 댓글 남겨주시면 반영하겠습니다. 감사합니다.