전체 글
-
CSS 입문 (4) 폰트, 텍스트Frontend/CSS 2023. 7. 26. 23:36
1) typography Baseline: 소문자 ‘x’의 하단 라인 (소문자 ‘x’가 기준) ex: 소문자 ‘x’의 높이 (소문자 ‘x’가 기준) Descender: Baseline 아래로 넘어가는 영역 . ex) xgypqjx … 에서 x뒤에 나오는 문자들의 꼬리가 위치하는 영역 Ascender: ex 위로 넘어가는 영역. ex) xTbAldkiJhx ….. 에서 x뒤에 나온 문자들의 상단이 위치하는 영역 em: 폰트의 전체 높이. 2) font-family 글꼴을 결정하는 속성. font-family: family-name, generic-family 이름 중간에 공백이 있거나 한글명일 때에는 작은따옴표(’) 로 묶어서 선언. 한글 글꼴을 지정할 때에는 반드시 영문으로된 글꼴명도 같이 선언해줄 것...
-
CSS 입문 (3) 단위, 배경, 박스모델Frontend/CSS 2023. 7. 20. 23:37
1) 정의와구문 CSS 는 주기적으로 Update 되고 있으므로 신뢰도 높은 사이트에서 주기적으로 확이해주는 것이 좋음. 참고 사이트 https://www.w3schools.com/ https://developer.mozilla.org/ko/docs/Web/CSS 위와 같은 사이트에서 다음을 확인할 수 있다. 정의 : 속성에 대한 설명 스펙 Spec: 속성마다 갖고 있는 설정. 모든 스펙은 기본 값을 갖는다. ex) font-size 는 Default vlaue, Inherited, Animatable, Version, JavaScript systax 라는 스펙을 갖는다. Version은 CSS 의 버전을 의미하며 CSS의 버전에 따라 지원되는 브라우저의 종류, 버전이 달라지므로 사용 시 사전 확인이 중..
-
CSS 입문 (2) 가상 선택자 ~ CascadingFrontend/CSS 2023. 7. 15. 00:36
5) 가상 선택자1 ~ 2 가상클래스: 동적인 조건/상황을 미리 클래스로 정의한다.(=가상 클래스) 해당 조건/상황이 만족되었을 때 브라우저가 특정 요소에 미리 정의된 가상 클래스를 적용하도록 하는 CSS의 기능. 일반적으로 동적 처리되어야 하는 부분은 HTML + CSS 만으로 처리하기 어렵지만 자주 쓰이는 상황에 대해서는 가상클래스로 미리 구현하여 적은 비용으로 처리 가능하게 함. ‘:’ + 가상 클래스명 사용 방법: Tag명**:가상클래스명** { ~ } ex) a:first-child{color:red;} :first-child {~}, :last-child {~} Tag 중 첫번째/마지막이 되는 요소에 적용되는 클래스 (문서 구조 관련) :link { ~ }, :visit { ~ } Tag 중 ..
-
CSS 입문 (1) 기본 문법 ~ 선택자Frontend/CSS 2023. 7. 14. 00:03
CSS 이해하기 1) CSS 소개 Cascading Style Sheets 2) CSS 문법과 적용 구성 선택자(selector): style을 적용할 요소. 속성(property): html tag의 속성(attribute)과 구별할 것 값(value) 선언(declaration): 속성(property): 값(value); 선언부(declaration block): { (선언) } 규칙(rule set): 선택자+선언부 CSS 적용방법 Inline : html Tag에 속성으로 추가. ex). 요소마다 선언해주어야 하므로 관리 불편. Intenal: External: 외부 스타일 시트. 별도의 .css 파일을 생성하여 해당 파일의 링크를 head에 선언하는 방식. ex) 스타일이 파일로 관리되므로 I..
-
django 입문(6) 장고관리자 adminBackend/Django 2023. 7. 12. 23:39
장고관리자화면에 접속할 슈퍼유저 생성: python3 manage.py createsuperuser 장고관리자 페이지 주소: http://{자신의 페이지 주소}/admin/ 장고관리자에 모델 등록 from django.contrib import admin from .models import Question admin.site.register(Question) 장고관리자에 모델을 등록하면 자동으로 장고관리자페이지에 모델이 나타난다. 장고관리자를통해 모델을 사용(=모델 형식대로 데이터 등록, 삭제, 수정 등)할 수 있다. 모델 검색 기능 추가 구조 class {ClassName}(admin.ModelAdmin): search_fields = [{member_var}] 위 클래스는 미리 구현한 모델 클래스(e..
-
HTML(3) 콘텐츠모델, 시멘틱마크업,블록인라인Frontend/HTML 2023. 7. 11. 23:43
1. 콘텐츠모델 Metadata: style, script, 다른 문서와의 관계 및 정보. 대부분 내에 들어간다는 것이 특징 Flow: html 요소 대부분이 Flow에 포함 Sectioning: 문서의 구조와 관련된 요소들이 포함. 아웃라인이 있음 Heading: 제목, header Phrasing: 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소 Embedded: 외부 콘텐츠 Interactive: 사용자와 상호작용 2. 시멘틱 마크업 시멘틱: 기계(브라우저)가 잘 이해할 수 있도록 하는 것 3. 블록&인라인 블록 레벨 요소: 부모 영역의 가로를 꽉 채워 표현하는 요소. 앞 뒤로 자동 줄바꿈 ex) , , 등 인라인 레벨 요소: 내용만큼의 박스로 표현. 줄바꿈 효과 없음. 블록 ..
-
django 입문(5) Model 1) 기본 사용법Backend/Django 2023. 7. 10. 22:50
Model 데이터베이스 처리를 하기 위해 사용되는 개념. 쿼리문 대신 데이터를 처리할 수 있게 해줌. 장고는 ORM을 사용한다. ORM: Object Relational Mapping. DB의 테이블을 모델화(=객체화)하여 사용하는 방식. DB 종류를 변경하는데 수월함. (쿼리문이 아닌 모델 객체를 사용하기 때문에 - 쿼리문은 개발자마다 그 내용이 다를 수 있어 통일성 확보가 어려움. MySQL과 오라클 간 호환에도 쿼리문 차이가 발생하여 번거로움.) {app}/models.py models.py 에 구현되는 클래스(=모델)는 django.db의 models.Model을 상속 받아야만 한다. 왜냐하면 models.Model에 ORM을 사용할 수 있는 기능들이 구현되어 있기 때문이다. from django..
-
django 입문(4) CRUD 기본 작업Backend/Django 2023. 7. 7. 00:00
브라우저가 서버로 Data를 전달할 때 2가지 method : GET, POST 1) Read (GET) Tag: 기본적으로 Data를 특정 페이지(href가 가리키는 URL) 로 이동하는 동작을 수행. = GET 방식(=Server에서 Data를 가져오면서)으로 Server에 접속함. HTML Code를 return 하는 함수 구현: HtmlTemplate HttpResponse에 출력하려는 Html code(HtmlTemplate의 반환값) 를 parameter로 넘겨줌. from django.shortcuts import render, HttpResponse topics = [ {'id': 1, 'title': 'routing', 'body': 'routing is...'}, {'id': 2, 't..