본문 바로가기

분류 전체보기140

우아한테크) 동동의 css방법론 [10분 테코톡] 🎉 동동의 CSS 방법론 - YouTube [CSS란] HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어 문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할 HTML에는 구조를 기술하고, css에서는 스타일을 기술하여 관심사의 분리가 가능하다. CSS파일은 전역범위이므로 한번 스타일을 부여하면 여러 페이지에 동일하게 적용되기 때문에 유지보수에도 유리하다 BUT CSS에서의 모든 것이 전역범위이므로 모든 스타일링이 서로 간섭할 가능성이있다. [이를 위한 방법론] 1. OOCSS -레고처럼 자유로운 조합이 가능한 모듈의 집합을 만든다 -모듈을 조합해 페이지를 만든다 -그리하여 신규페이지를 만드는 경우에도 기본적으로 .. 2022. 2. 14.
우아한테크) 브랜의 프론트엔드에서 컴포넌트 https://www.youtube.com/watch?v=2C1tXVHu9XQ [컴포넌트란?] 전체의 부분 ex) -비행기의 수많은 부품이 하나의 덩어리가된다면 의존성을 분리할 수 없게된다 1. 매번 처음부터 끝까지 만들어야하기 때문에 같은 비행기를 다시 만들기 어렵게 된다. 2. 한번 설계한 과정이 새로운 디자인의 비행기를 만드는데 도움을 주기 힘들다 -> 각부분을 분리하고 작은 단위 설계, 조립한다면 독립적 설계로 효율적 설계가 가능하다 [프론트 엔드의 컴포넌트] 사용자와의 interaction이 시대에 따라 증가하면서 웹의 복잡성이 증가하였고 전체의 웹페이지를 부분부분 쪼개는 엘리먼트들이 등장하였다. 자바스크립트를 통해 element그룹을 효율적으로 관리 할 수 있기 때문에 프론테엔드에서의 컴포넌트.. 2022. 2. 10.
우아한테크)콜린의 flex layout https://www.youtube.com/watch?v=JQ0jO3B43YQ [layout:문서위에 상자를 배치하는 방법] 1. block요소 부모요소 너비를 전부 차지한다 2. inline요소 부모너비의 전부를 차지하지 않고 컨텐츠 영역만 차지 [flex] 요소들을 행, 열단위로 정렬하기 위한 1차원 레이아웃 부모요소에 display: flex; [flex 용어] 1. flex container : flex아이템들의 배치나 정렬을 담당-수평, 수직정렬등을 가능하게 해줌 2. flex item : flexcontainer의 자식요소 : 자기가 차지하는 크기 및 자신들 사이의 순서를 변경할 수 있다. 3. main axis: 주축 정렬에 대한 기준 main-start-> main-end 4. cross .. 2022. 2. 10.
day26) [HTML] HTML 기본 콘텐츠 카테고리 https://abcdqbbq.tistory.com/5 HTML inline(인라인) vs block(블록) 요소 HTML의 태그 요소는 HTML5 이전에 inline(인라인) 요소와 block(블록) 요소로 구분 되어왔다. HTML5에 들어서는 태그들을 단순히 인라인, 블록으로 구분하는 것이 아닌 Contents Model(컨텐츠 모델)로 각 태 abcdqbbq.tistory.com [콘텐츠 카테고리 종류] 카테고리 1. 메타데이터 콘텐츠 2. 플로우 콘텐츠 3. 섹션 콘텐츠 4. 임베티드 콘텐츠 5. 인터렉티브 콘텐츠 6. 헤딩 콘텐츠 7. 프레이징 콘텐츠 [메타데이터 콘텐츠] 웹 문서와 관련된 정보를 표현하는 콘텐츠와 다른 문서와의 관계를 유지하는 콘텐츠 base, command, link, met.. 2022. 2. 4.

티스토리툴바