Be a developer

h4 태그에 instagram 글자를 넣었다. 그 결과 3줄로 바꼈다. 이유는 i tag는 inline element이고, div는 block element이기 때문이다. inline과 block element에 속하는 tag는 여기서 볼 수 있다. 설명은 여기서 볼 수 있다.따라서 div를 inline으로 바꿔줘야 위의 모든 element가 한 줄에 들어갈 것이다.일단 head 태그 안에 style 태그를 넣어서 css를 적용시켜 준다.그 결과한 줄로 잘 들어갔다.다음으로는 instagram 글자 까지는 왼쪽에, 나머지 아이콘들은 오른쪽으로 이동시켜야 한다. 따라서 두 개의 박스로 나눠준 후 큰 박스(div) 안에 넣어준다. left div와 right div를 나눠주기 위해서는 flex를 이용한다.(..

html, css를 통해 페이지를 만들려면 우선 인스타그램의 layout을 분석해야 한다. 일단 상단의 navbar가 보인다. 스크롤을 내려도 고정되어 있는 것을 볼 수 있다. 그리고 아이콘 몇 개와 인스타그램 글자, 검색창이 보인다.그리고 다른 페이지로 넘어가도 항상 있다. 따라서 모든 페이지에 공통적으로 적용되는 부분이라고 할 수 있다. 이렇게 공통적인 부분은 템플릿 상속을 통해 구현한다. 상속을 위해서 먼저 상속되는 파일들을 담을 공간을 만든다. 아래와 같이 home app과 같은 계층에 폴더를 만든다. 그 안에 상속될 base.html 파일을 만들어 준다. 그리고 상속 받을 home.html에서 아래와 같이 템플릿 태그안에서 extends를 통해 상속받는다. block content와 endblo..

가상환경 활성화 되어있는 상태이다. 1. app을 추가한다. 이름은 마음대로위 사진과 같이 home 앱이 추가되었다. 2. app을 만들면 가장 먼저 settings.py에 가서 INSTALLED_APPS에 app을 추가해줘야한다.여기에 추가하지 않았다가 url과 html파일 경로를 잘 설정해줬는데도 TemplateDoesNotExist error가 발생해서 해맸던 경험이 있다.따라서 app을 추가하게 된다면 바로 settings.py에 가서 app을 등록해주자. 3. app을 등록했으니 서버를 실행시켰을 때 보여줄 page를 만들어야 한다. 아직은 웹 페이지에 접속했을 때 보여줄 어떠한 파일도 없다.따라서 home.html 파일을 만들어주자.먼저 app 폴더 안에 templates 폴더를 만들어주고, ..

1. mkdir project && cd project디렉토리 생성 후 이동 2. python -m venv myvenv가상환경을 만들어준다.venv는 Python 3.3 이후 부터 기본모듈에 포함되었다고 한다.가상환경은 프로젝트마다 필요한 환경을 따로 설정하기 위해 필요하다.예를 들어, 지금 만드는 프로젝트에서 사용된 환경이 다음에 만들 프로젝트에는 필요없을 수 있기 때문에만약 다른 프로젝트를 새로 만들게 되면 새로운 가상환경을 다시 설치하면 된다. 3. source myvenv/Scripts/activate가상환경을 실행시켜 준다. 4. pip install django현재 가상환경에 Django를 설치한다. 5. mkdir repo && cd repo프로젝트를 담을 디렉토리를 하나 생성한 후 해당 ..