웹 (23) 썸네일형 리스트형 [Django] 프로젝트(웹사이트) 생성하기, 프로젝트 구조 / 2021.08.19 * 참고 자료 : 코드잇 Django 강의 1. 프로젝트(웹사이트) 생성 장고에서 프로젝트는 하나의 웹사이트를 말한다. - 디렉토리 생성 명령어 mkdir 디렉터리 이름 - django 프로젝트 생성하기 django-admin startproject 프로젝트 이름 저는 식당관련 웹사이트를 만들 거기 때문에 codeit-django 디렉터리 안에 restaurant라는 이름으로 프로젝트를 만들겠습니다. django-admin startproject restaurant 2. django 개발 서버 실행 먼저, cd를 이용해 restaurant으로 이동해주고 VScode를 실행해준다. VScode를 보면 restaurant안에 여러 가지 파일들이 있는데 manage.py를 이용하여 서버를 실행해보자. 2 - .. [Django] Django 개발 환경 구성하기 (Windows) / 2021.08.17 * 참고 자료 : 코드잇 Django 강의 Django 공부를 시작하기에 앞서 개발 환경을 구성해 보자. 1. Visual Studio Code 설치 (텍스트 에디터) 구글에 visual studio code라고 입력한 후 사이트에 들어간다. 홈페이지에 들어가면 다음과 같은 화면이 뜨는데, 다운로드를 눌러 VScode를 설치해 주자. 2. Ubuntu 설치 (Linux) ubuntu를 설치하기 전에 windows 기능 켜기/끄기 에 들어가서, Linux용 Windows 하위 시스템에 체크 해준다. 2 - 1 ) ubuntu를 설치해보자. Microsoft Store에 접속한 후 ubuntu 검색 Ubuntu 18.04 LTS 설치!! 설치를 완료하고 실행하면 맨 처음 실행하면 나머지 설치 과정이 필요하다.. [HTML/CSS] 텍스트 스타일링 / 2021.08.14 * 참고 자료 : 코드잇 HTML/CSS 강의 * 텍스트 색 CSS에서 색을 표현하는 방식에는 세 가지가 있다. 1. 색 이름 h1태그를 orange색으로 바꿔보자 코드를 다음과 같이 적고 새로고침 해보면, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Color Example h1 { color: orange; } 색깔을 바꿔봅시다! cs h1태그의 내용인 "색깔을 바꿔봅시다!"가 orange색으로 바뀐 것을 확인할 수 있다. 2. RGB 값 모든 색은 RED, GREEN, BLUE의 조화로 표현할 수 있다. 이 표현 방식을 RGB라고 한다. rgb값을 가져오기 위해 "HTML Color Codes"라는 사이트를 참고하겠습니다. https://htmlcolorcodes.. [HTML/CSS] class, id 클래스, 아이디 / 2021.08.06 * 참고 자료 : 코드잇 HTML/CSS 강의 1. 클래스 예를 들어, 아래와 같은 코드가 있다. 의 글자 크기를 64px, 색을 블루로 입히는 코드이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 id/class example p { font-size: 64px; color: blue; } Heading 1 Heading 2 첫 번째 문단 두 번째 문단 세 번째 문단 네 번째 문단 Colored by Color Scripter cs 웹 페이지를 열어보면 이와 같이 나온다. 만약, 세번째 문단만 64px로 색을 블루로 입히고 싶다면 어떻게 해야 할까? 각각의 태그 4개를 구분할 방법이 없기 때문에 "클래스"를 사용해야 한다. 세 번째 .. [HTML/CSS] 링크, 이미지 / 2021.08.05 * 참고 자료 : 코드잇 HTML/CSS 강의 * 링크 1. 외부페이지로 가는 링크 다른 페이지로 가는 링크를 만들기 위해서는 태그를 사용하면 된다. 태그의 구조 내용 속성 속성 값 예를 들어, 다음 코드를 작성해 보자. 구글로 가는 링크 index.html : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 My First Website h1 { color: lime; } h2 { color: darkred; } h3 { color: blue; } p i { font-size: 30px; } My First Page I love HTML! 안녕 세상! 구글로 가는 링크 Colored by Color Scri.. [HTML/CSS] CSS기초, 옵셔널 태그 / 2021.08.04 * 참고 자료 : 코드잇 HTML/CSS 강의 1. CSS란? HTML이 내용을 담당하는 거라면 CSS는 스타일을 담당한다. 2. CSS 기본 구조 예를들어, CSS의 기본 구조는 다음과 같다. 여기서 h1은 "스타일링하고 싶은 요소"를 뜻하고 font-size, text-align 은 "속성" 64px, center 은 "속성값"을 뜻한다. 1 2 3 4 h1 { font-size: 64px; text-align: center; } cs 이 코드는 "h1의 폰트 사이즈를 64px로 설정하고 h1의 글을 가운데 정렬한다"라는 말이다. 3. CSS의 사용 CSS를 사용하기 위해 html 코드 아래에 4. 기본 CSS 속성 (1) 폰트 크기 css에서 폰트 크기를 표현할 수 있는 단위가 여러개 있는데, 그중.. [HTML/CSS] 첫 번째 웹사이트 만들기 / 2021.07.29 * 참고자료 : 코드잇 HTML/CSS 강의 1. 1 2 cs 웹브라우저에게 HTML버전을 알려주는 역할을 한다. 항상 html문서 맨 위에 써주어야 한다. 2. HTML 태그 내용 시작 태그 종료 태그 종료 태그에는 /가 있다. * 태그의 종류 - 웹페이지의 제목을 나타내는 태그이다. 브라우저의 탭이나 방문 기록에 나와 있는 제목이 이곳에 들어간다. - 가장 큰 머리말. h1은 heading 1을 말한다. - 두 번째로 큰 머리말. h2는 heading 2를 말한다. * 까지 있다. 각 머리말의 크기는 마음대로 설정할 수 있지만, 따로 설정하지 않으면 부터 순서대로 작아진다. - 긴 글, 문단을 나타낸다. paragraph의 약자이다. - 텍스트를 굵게 만들어 준다. - 텍스트를 날려서 써준다. 3. .. 이전 1 2 3 다음
