# Inherit

[CSS] inherit와 100%의 차이
🌈 Intro 아래 두 개를 혼용하여 사용하다 뜻대로 되지 않아 애먹었던 적이 있다. 둘의 의미의 차이를 알아보자. 📍 inherit vs. 100% 1) width: inherit 부모 요소의 width 속성의 값을 그대로 상속받는다. 예를 들면, 부모 요소가 width: 50%이면 자식 요소 또한 width: 50%가 된다. 결국 자식 요소는 50%(부모 요소 width 속성 값) × 50%로 전체 너비의 25%가 된다. 2) width: 100% 위와 동일하게 부모 요소가 width: 50%이면, 50%(부모 요소 width 속성 값) × 100%로 전체 너비의 50%가 된다. 이것은 결국 부모 요소 너비와 동일하다.
[PostgreSQL] Inherits 상속
ERD 로 모델링을 마치고 이를 바탕으로 테이블에 데이터를 적재하는 과정을 살펴본 적이 있다. SQL문을 보고 살펴보던 중 몰랐던 내용이 있어 기록해둔다. 상황은 이렇다. Place ┌────────────────┴────────────────┐ City Country Continent place 가 parent, city, country, continent 가 child가 된다. cf) inherit 하는 방법 부모 테이블의 내용을 조회하면 자식 테이블의 내용까지 조회된다. 이를 확인하기 위해 부모 테이블인 place 테이블에는 데이터를 넣지 않고, , country, continent 테이블에 insert를 하나씩 해보자. 값을 잘 넣었다. 이제 부모 테이블을 조회해보자. place 테이블에 값을 insert 하지 않았지만 자식 테이블의 값이 모두 조회되어 3개의 row를 보

URL Namespace / Template 상속
앱을 만들면 views.py가 각각 따로 존재하고 함수이름도 같은 경우가 생겨 요청간의 충돌이 발생할 수 있습니다. 이런 문제를 예방하고 url관리를 용이하게 하기 위해서 새로운 앱에 url을 구분해 보겠습니다. 구분하기 프로젝트의 메인 앱인 django_tutorial의 urls.py에서는 개별 앱까지만 경로를 설정합니다. 뒷부분은 각 앱과 연결된 주소를 설정해줍니다. 개별 앱인 articles에 해당하는 다양한 패턴의 경로들이 저장되어 있습니다. articles 앱의 dinner 경로로 출력됨 url namespace namespace를 사용해주면 불러올 주소를 'review' 등의 이름으로 임의 지정하고 불러올 수 있습니다. 이름을 명시했을때 좋은점은 연결된 주소가 바

[TIL] HTML layout & CSS 기초(1): HTML layout, CSS Selector, Inherit, Attribute - 221012
HTML layout & CSS 기초(1) HTML layout (Semetic tag) CSS 특성과 선택자 (Selector) 자식/하위/동위 선택자 (Inherit) 속성 선택자 (Attribute) Board 만들기 예제: 방명록 만들기 1. HTML layout (Semetic tag) 기본적으로 HTML의 layout은 Header (머릿말), Body (본문), Footer (꼬릿말)로 구성되어 있고 nav, aside 등이 추가되기도 한다. 
[css] 잡다한 CSS Tips.1
[주의] 단. 'Can I Use'에서 호환성 체크 필수 1. 상속(inherit) 위 태그들은 폰트 크기가 기본 사이즈보다 작다. inherit 속성을 적용하면 동일해진다. input, select, button, textarea {font: inherit;} 컬러 역시 inherit 이 필요한 a 태그 a {color: inherit;} 2. 크기 지정? (max-width) 고정된 폭보다 %를 사용하거나 vh, vw, wmin, wmax등 사용 권장. 큰 해상도에서 고정된 폭을 지정할 때 width:보다 max-width: 사용을 권장한다. , , , 같은 요소는 max-width: 100%로 설정을 잊지 말자. 3. 다단 텍스트(columns) column-count: {num} 동일

[220713] 오늘의 배움(TIL) - HTML / CSS
🔸 HTML > * HTML로 삽입하는 이미지를 무엇이라 하고, 어떤 방법을 사용하는가? > >: 콘텐츠 이미지, img 태그로 삽입할 수 있음 > * 특수 문자는 어떻게 마크업하는가? > >: &'특수 문자 이름';의 방식으로 마크업할 수 있고, 이를 엔티티라고 함 : 가령 `` 같은 특수 문자는 이미 HTML에서 태그 오프닝과 클로징의 역할을 담당하고 있으므로 표기의 혼란을 막기 위해 엔티티를 사용함 > ex) © : 저작권 기호, & : & 기호 > * 키보드 포커싱을 받을 수 있는 요소에는 무엇이 있는가? > > : href 속성이 존재하는 a 태그, form > : a 태그의 경우 href 속성이 없으면 인터랙티브 콘텐츠가 될 수 없기 때문에 포커싱되지 않음 > * img 태그의 alt 속성은 왜 작성해야 하는가? > > : **웹 접

CSS 상속_inherit,선택자 우선순위
[상속] : 부모의 css속성을 자식이 상속받을 경우 css가 동일하게 적용됩니다. 1. 상속 가능한 속성들 2. 강제 상속할 때 값에 inherit을 작성 width와 height는 부모의 크기를 그대로 상속받아 표현됨 참고) width는 작성하지 않아도 자동 상속되어 표현됨 3. 속성은 선택자 우선순위 순서에 따라 상속됩니다. 1순위 : 점수가 높은 선택자가 더 높은 순위 2순위 : 점수가 같을 경우 가장 마지막에 읽힌 선택자가 더 높은 순위 •!important : 9999999999 점 •인라인 방식 : 1000 점 •#ID 선택자 : 100 점 •.Class 선택자 : 10 점 :first-child / last-child / nth-child / :not 클래스 선택자 •태그 선택자 : 1 점 ::before, ::after 태그(요소) 선택자 •전체 선택자(*) : 0 점

프로토타입과 프로토타입 상속
1. 프로토타입 상속 개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생긴다 예를 들어 user라는 객체가 있는데 이 user와 굉장히 유사하지만 약간의 차이가 있는 객체를 만들어야 된다고 생각해보면 어떤 방식이 가장 효율적일까? 그 방식 중 하나가 바로 프로토타입 상속(prototypal inheritance)이다 [[prototype]] 자바스크립트의 객체는 [[prototype]]이라는 숨김 프로퍼티를 갖는다 이 값은 null이거나 다른 객체에 대한 참조가 되는데 다른 객체를 잠초하는 경우 참조대상을 '프로토타입(prototype)'이라 부른다 프로토타입에 재밌는 점은 위의 그림에서 object에서 프로퍼티를 읽으려고 하는데 해당 프로퍼티가

[CSS] CSS의 상속(Inheritance)
1. CSS의 상속(Inheritance) >CSS에서의 상속이란, 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻한다. 2. 상속되는 CSS 속성 quotes // 인용문의 큰따옴표를 꾸미는 속성 text-align text-indent text-transform visibility white-space //요소가 공백 문자를 처리하는 법을 지정하는 속성 word-spacing azimuth // 수평전 공간의 각도를 설정하는 속성 border-collapse border-spacing caption-side color cursor direction elevation // 텍스트 방향을 지정 empty-cells font-family font-size font-style font-variant // 소문자를

[CSS] CSS 애매한 것 다시 개념 잡기
💡 CSS를 하다보면 내 예상과 틀리게 움직이는 것들이 많았다. 아마도 나의 기본 개념기가 부족했던 것 같다. 그래서 인강을 들으면서 정리를 해보았다. 🔴 가상 선택자 nth-child(n) : div:nth-child(n) 의 뜻은 div이면서 n번째 child(자식)인 것을 선택해라! div:nth-child(1)은 없다. span 태그 때문에 div 1번째가 두번째 자식이 되어버렸다. `

[CSS] Selector(선택자) & Inheritance(상속)
🧿Selector CSS 규칙을 적용할 요소를 정의한다. 🏹Type Selector 전체 웹페이지에서 일반적으로 적용해야 하거나, 일괄적으로 적용해줘야 하는 스타일이 있을 때 사용한다. 일괄적으로 바뀌기 때문에 사용시 주의해야한다. 🏹ID Selector 전체 웹페이지에서 일반적으로 적용해야 하거나, 일괄적으로 적용해줘야 하는 스타일이 있을 때 사용한다. 일괄적으로 바뀌기 때문에 사용시 주의해야한다. 🏹Class Selector 전체 웹페이지에서 일반적으로 적용해야 하거나, 일괄적으로 적용

CSS | float
float을 사용할 때 주 사용 이미지 주변에 텍스트를 감싸기 페이지 전체의 레이아웃을 잡을 때 과거에 레이아웃 잡는데 사용함. 최근 레이아웃 잡는데 사용하는 것 flex > float float값의 종류 none : 요소를 띄우지 않습니다. (default) left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄웁니다. right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄웁니다. Inherit : 요소 자신을 포함하고 있는 부모의 float 속성을 가져옵니다. float는 좌측(또는 우측)으로 붙기 때문에, {position: absolute} 와 같이 사용될 수 없다. float 문제와 해결 문제 1 : 부모가 높이를 인지 불가 → 부모를 벗어남 해결 1 1. 바깥 마지막에 아무