오랜만에 쓰는 블로그 >.< 

ㅡ 그간 공부하며 블로그에 캡쳐하고 같이 올리느라고 가뜩이나 없는 시간 2배나 걸려서... 잠시(?) 방치했었는데 정말 오랜만이구나 ㅎㅎㅎ 

 

여하간 '교안 안보고 코드 적어보고 구현하기'를 목표로 하면서, 다시 상기시켜야 할 점을 적어보려한당

 

*순서대로 아님. 혼자 못 쓴거 적는것!*

ㅡ strart project 가 아니야 (철차도 틀렸어)

   -> django-admin startproject 'to_do2'

ㅡ django-app 'app' (바보냐ㅠㅠ)

   -> python manage.py startapp 'app'

ㅡ (왜 models에 변화가 없는데 여기서 migrate를 해줘야 하지?)

    python manage.py makemigrations

    python manage.py migrate

ㅡ 나는 수퍼유저 만드는데 앞에 winpty를 써야 실행됨

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ  // 준비단계

 

0. models.py에 어떤 테이블 넣을지 구상

ㅡ 제목. 내용. 마감기한

   title. content. due_date

 

1. url에 들어오는걸 생각해보자

(기본)

index

detail

new

(우선 보고 싶어하겠지. detail에 또 있는 눌러야 하는 기능들)

edit -> 수정되는 페이지 새로 뜨겠고

delete -> 그냥 삭제

comment -> 댓글 다는 공간이 새로? 그냥 여기에...

delete_comment

(새롭게 만드는 페이지에서 눌러야 하는 기능들)

x 제출하기 - 이것만 type input?으로 해주면 될 듯? 

 

2. views (위에 url에서 받은 후, 기능 발휘해야 하는 함수들 다 만들어주기!) 

(1)

(2)

(3)

(4)

(5)

(6)

(7) 

 

3. html (그 기능들을 html에 어떻게 구현할 것인가~~)

 

 

4. css

 

 

 

    

이제 html 큰 틀을 어떻게 잡는지는 알겠다.

*아직 잘 못해서 공부해야할거*
ㅡ 태그 속성 공부
ㅡ css......
flex, position 등등

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

https://www.samsungsds.com/global/ko/support/insights/Responsive_web_1.html

 

Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들

Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들

www.samsungsds.com

1) meta tag에 Viewport에 대한 별 내용이 없으면 기본적으로 웹 페이지는 980px을 기준으로 렌더링 한다.
2) 하지만 글자의 가독성이 떨어지므로 장비별로 가독성이 가장 좋은 device-width를 Viewport에 세팅할 수 있는 옵션이 존재한다.
3) 위의 옵션 정의 후, 장비별 device-width로 페이지가 렌더링 된다.

 

Viewport 옵션을 이용하면 어떤 장비든지 보기 좋고 동일한 UX를 만들 수 있다~ 

 

ex) 두 손가락으로 확대하면 지도만 확대되어야 하는데 웹 페이지 전체가 확대되는 경우가 있죠. 이러한 경우를 방지하기 위해서 아래와 같은 코드가 사용됨

레이아웃

ㅡ '사물을 공간에 잘 배치하는 것'

웹의 기본 요소인 HTML, CSS, JavaScript 중 요소를 정의하는 것이 HTML, 그것을 어떻게 보여줄지 결정하는 것이 CSS, 동작을 결정하는 것이 JavaScript라면, 레이아웃 결정은 CSS

 

미디어쿼리

동일한 페이지의 디자인을 두 벌 만들지 않고, 웹 사용자와 모바일 사용자 모두를 고려한 반응형 웹으로 만들려면 어떡해야 하는가입니다. 이 고민을 해결해 주는 것이 바로 CSS3의 미디어 쿼리.

 

이러한 기능을 통해 웹페이지가 모바일 페이지 사이즈에 따라 변경되는 스타일 시트를 만들어 놓으면, 웹/모바일 페이지 모두에 대응할 수 있는 반응형 웹 페이지가 만들어짐

 

또, 스타일 시트를 웹 페이지에 삽입하는 link 태그를 미리 지정하는 방법도 존재. CSS만 분리하여 태그를 지정해 두면 콘텐츠와 HYML은 그대로 두고 CSS의 분리 페이지를 개발 가능. 

링크 통해서 만든 과정 상세하게

https://www.samsungsds.com/global/ko/support/insights/Responsive-Web-2.html

 

Responsive Web ② – 반응형 웹을 위한 레이아웃 설계 방법

Responsive Web ② – 반응형 웹을 위한 레이아웃 설계 방법

www.samsungsds.com

 

 

ㅡㅡㅡㅡㅡㅡ

 

https://nalrarydesigner.tistory.com/entry/%EB%AF%B8%EB%94%94%EC%96%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EA%B3%B5%EB%B6%80%ED%95%B4-%EB%B3%B4%EC%9E%90

 

미디어쿼리를 공부해 보자.

안녕하세요. 키다리디자이너입니다. 오늘은 요즘 있어보인다는 웹사이트의 필수요소인 반응형웹에서 주로 사용되는 미디어쿼리에 대해 알아보도록 할게요. 미디어쿼리란 모르면 어려워 보이지만 알고 나면 별 거..

nalrarydesigner.tistory.com

미디어쿼리는 쉽게 조건문.

개발언어 if구문 처럼 "만약 ~~라면 ~~을 실행하라"의 뜻일 뿐이구요, 그 조건으로 해상도나 디바이스의 가로, 세로등의 값을 이용하는 것. 

 

대충 훑어 보자면 위에서 작성했던 '@media screen and (min-width: 481px){ h3{color:#000; }'라는 구문의 뜻은 현재 최소 너비가 481이상이면 'h3{color:#000;'을 실행하라는 뜻. 

 

 

 



'2020 > 과제' 카테고리의 다른 글

장고 웹사이트 만들기 (to-do)  (0) 2020.05.25
페이스북 클론  (0) 2020.04.28
인스타그램 사이트 따라해보기  (0) 2020.04.15

오늘따라 마음이 왜이렇게 쳐지는지.
탐탐에서 새벽 2시 전에 나온 것도 처음 같다.

뭐든 자신감이 있어야 추진력이 생기는거지.
다시 자신감을 장착하자~!

밤에는 탐탐_ 공휴일엔 스벅

p.s To be, rather than to seem.
열심히하는거에 취하면 절대 안됨. 결과가 중요함.



'2020 > 잡담' 카테고리의 다른 글

codecademy 환불 과정 처음부터  (0) 2020.04.13

https://www.vobour.com/1-flexbox-%EC%9D%B4%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%AA%A8%EB%93%A0-%EA%B2%83-understa

 

1 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

개인 블로그로 옮겼습니다. 블로그를 옮기면서 어색했던 표현, 번역 투, 오타, 띄어쓰기 등을 최대한 다듬어 보았습니다. 좀 더 자연스러운 글을 보고 싶으시면 여기 Flexbox 이해 - 당신이 알아야 할 모든 ...

www.vobour.com

 

'2020 > CS 좋은 자료' 카테고리의 다른 글

flex 연습 사이트  (0) 2020.04.15
파이썬 실시간으로 결과값 보여주는 사이트  (0) 2020.04.14
웹 레이아웃  (0) 2020.04.12
공부법 추천  (0) 2020.04.11
참고 블로그  (0) 2020.04.11

+ Recent posts