본문 바로가기

UI

 (227)
[CSS]Margin collapse into each other Margin서로 상하좌우 충돌할 경우 margin 이 작은쪽이 큰 쪽에 먹힘 1. 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 2. 빈 요소의 상/하 마진이 겹칠 경우 ==> 빈 요소의 마진 Top or Bottom 1개만 남음(위 아래로 박스에 마진이 붙었을 지라도) 3. 부모 박스와 자식 박스의 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 - 부모의 마진이 자식의 마진보다 클때 - 부모의 마진이 자식의 마진보다 작을 때 아래 사이트가 설명 잘 해놓음 https://seons-dev.tistory.com/entry/css-Collapsing-Margin The Basic Concepts What’s important to know is : Margin collapse only ha..
[HTML] Loading="lazy" 렌더링 속력 올리기 Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. From MDN 지연 로딩은 리소스를 비차단(중요하지 않음)으로 식별하고 필요할 때만 로드하는 전략입니다. 이는 중요한 렌더링 경로의 길이를 단축하여 페이지 로드 시간을 단축하는 방법입니다. 적용 지연 로딩은 애플리케이션의 여러 순간에 발생할 수 있지만 일반적으로 스크롤 및 탐색과 같은 일부 사용자 상호 작용..
[HTML]링크를 연결 할 때 키워드 만들기 Link 주의사항 1. 전체 주소를 사용하는 것은 피할 것 2. "여기 클릭(links to)"을 넣는 것은 피할 것. 왜냐하면 우리는 다 알고 있으니까 3. 최대한 간소화해서 넣을 것 4. "Click here"는 피하라. 어떠한 설명도 없이 클릭 이라는 것은 피할 것. 결론 짦게 쓰고 뭐에 대한 것인지 설명할 것
[Front-End]HTML에서 토큰화와 어휘분석? 브라우저에서 HTML의 맥락에서 토큰은 마크업 언어의 가장 작은 개별 단위를 의미합니다. 브라우저는 HTML 문서를 구문 분석할 때 콘텐츠를 토큰으로 분류하고, 이 토큰은 DOM(문서 객체 모델) 트리를 구성하는 데 사용됩니다. HTML 구문 분석에는 네 가지 주요 유형의 토큰이 있습니다: 시작 태그: HTML 요소의 시작을 나타냅니다. 여기에는 태그 이름과 요소와 관련된 모든 속성이 포함됩니다. 끝 태그: HTML 요소의 종료를 나타냅니다. 태그 이름 앞에 슬래시(/)가 오는 태그 이름으로 구성됩니다. 코멘트: 문서의 HTML 주석을 나타냅니다. 로 끝납니다. 문자: HTML 요소 내의 일반 텍스트 또는 콘텐츠를 나타냅니다. 브라우저는 HTML 문서를 수신하면 "토큰화(Tokenization)" 또는 ..
[Front-End] 브라우저 엔진과 렌더링 엔진의 차이는 뭘까? 웹 브라우저의 맥락에서 '브라우저 엔진'과 '렌더링 엔진'은 웹 페이지 렌더링을 담당하는 동일한 기본 구성 요소를 지칭하기 때문에 종종 같은 의미로 사용되기도 합니다. 하지만 두 용어 사이에는 미묘한 차이가 있을 수 있습니다: 브라우저 엔진: 레이아웃 엔진이라고도 하는 브라우저 엔진은 웹 콘텐츠 구문 분석 및 처리와 관련된 다양한 작업을 처리하는 웹 브라우저의 핵심 구성 요소입니다. 여기에는 렌더링 엔진이 주요 구성 요소 중 하나로 포함되어 있습니다. 브라우저 엔진은 렌더링 외에도 네트워킹(요청 및 응답 처리), HTML 및 CSS 구문 분석, JavaScript 실행 처리, 보안 프로토콜 관리, 사용자 상호 작용 처리 등의 작업도 관리합니다. 렌더링 엔진: 렌더링 엔진은 브라우저 엔진의 하위 집합입니다..
[Front-End]Compiler compiler is essentially a translater that translates one language of which the language of the programmer into a systems language. input -> lexical analysis -> token -> syntacital analysis Token 토큰화란? 주어진 텍스트에서 토큰(token)이라 불리는 단위로 나누는 작업을 토큰화(tokenization)이라고 한다. 토큰의 단위가 상황에 따라 다르지만, 보통 의미있는 단위로 토큰을 정의한다. 참조 https://www.youtube.com/watch?v=r6vNthpQtSI
[Front-end]HTML, MarkUp What is Markup Language ? 구조화된 언어를 지칭함 Markup : 마크업(문서의 활자·조판 지정 표시) from Naver. 정리하면 뭔가로 마크업이 되어있는 구조화된 언어(It's describes the text that it's marking up) --> HTML 이라는 것 마크업이란 건 아래의 것을 의미함 , , , 요런식으로 구조화 되어있는 것을 Markup Language 라고 함 HTML's Element is a node as well. Element = node Attribute = class, id etc 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할..
[Front-End]Parsing 이란 사전적 의미 parsing : 어구의 해부, 문의 분석 parse : 어구의 해부, 문의 분석 Parsing a document means translating it to a structure the code can use The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree. 문서를 파싱하는 것은 코드가 사용할 수 있는 구조로 변환하는 것을 의미합니다. https://javascript.info/dom-nodes DOM tree javascript.info 파싱은 2개가 있음 어휘 파싱(lexical)과 구분..
[Front-End] a Web rendering Engine 솔직 문서를 읽어도 헷갈렸는데 영상찾아보니까 좋은 자료가 있어서 영상으로 이해함 https://www.youtube.com/watch?v=o3_u1azhfJw https://www.youtube.com/watch?v=z1Jj7Xg-TkU A browser Architecture 브라우저 작업 진행 시나리오 1. 사용자가 주소표시줄(사용자 인터페이스)에 URL을 입력 2. 브라우저 엔진에게 URL(입력받은 주소값) 전달 3. 브라우저 엔진은 URL에 해당하는 데이터를 자료저장소(caching)에서 먼저 찾아봄 4-1. 캐싱된 자료가 있다면, 랜더링 엔진은 브라우저 엔진으로부터 자료를 받아 HTML, CSS, image 등을 파싱 4-2. 캐싱된 자료가 없다면, 서버에 요청해서 자료를 찾고 런더링 엔진은 통..
[UX]어느 정도 레벨 경각심이 앱(APP) 사용성을 높일까? 연속 수행 본글은 이미 작성된 글을 재구성하였음을 사전에 언급합니다. https://blog.woojinkim.org/differences-in-how-you-make-up-for-mistakes/ 여기서 연속 수행 장치란? 사용자가 지속적으로 관심을 가지고 행동하게 만드는 장치 핵심은 큰 패널티를 통해 연속 수행을 유지하는 것이 아니라 적당한 경각심을 가지고 연속 수행을 유지하게 하는 것입니다. 이런 관점에서 듀오링고와 디아블로 이모탈 사례는 간단하고 관대한 규칙을 통해 연속 수행을 유지할 수 있습니다. 연속 수행 장치 비교 앱 듀오링고 스픽 사용기간 2년 약 200일 추측 특징 영어 문법 영어 말하기 보상 전제. 학습을 마칠때마다 - 부엉이를 꾸밀 수 있는 아이템 - 연속 학습이 끊겼을 때 이어주는 아이템 이벤..
[TEA]베트남 홍차2 : 찻잎에 숨겨진 이야기 베트남 홍차의 여정은 중국이 원산지이지만 베트남에서 한 세기 이상 재배되어 온 동백나무에서 시작됩니다. 이 식물에는 다양한 품종이 있으며 베트남에서 홍차 생산에 사용되는 찻잎은 주로 카멜리아 시넨시스 품종인 아사미카 식물에서 나옵니다. 찻잎은 일반적으로 아직 신선할 때 아침에 수확하며, 새싹과 각 줄기의 윗부분 2~3개의 잎을 손으로 땁니다. 수확 시기는 차의 품질과 풍미에 영향을 미칠 수 있기 때문에 매우 중요합니다. 베트남의 차 수확 시기는 지역과 기상 조건에 따라 다르지만 보통 3월부터 10월까지입니다. 찻잎을 따낸 후에는 과도한 수분을 제거하기 위해 시들게 하여 더 유연하고 가공하기 쉽게 만듭니다. 시들음 과정은 몇 시간이 걸릴 수 있으며, 그 동안 잎은 통풍이 잘되는 곳에 있는 선반이나 쟁반에 ..
[TEA]베트남 홍차 : 1 베트남은 세계 최고의 차 생산국 중 하나이며 홍차는 베트남 차 산업에서 중요한 부분을 차지하고 있습니다. 베트남 홍차는 독특한 향과 맛, 품질로 유명하여 현지와 해외에서 모두 인기가 높습니다. 베트남 홍차의 역사는 프랑스가 베트남을 식민지로 삼고 차 재배를 도입한 20세기 초로 거슬러 올라갑니다. 오늘날 차는 북부 산악 지역, 중부 고원지대, 남부 지방 등 베트남의 여러 지역에서 재배됩니다. 각 지역마다 고유한 차 품종과 풍미 프로파일이 있습니다. 베트남 홍차 중 가장 인기 있는 홍차 중 하나는 베트남 남부의 푸꾸옥 섬에서 재배되는 푸꾸옥 홍차입니다. 이 홍차는 아사미카(Camellia sinensis var. Assamica) 차 식물로 만들어지며 꿀과 맥아의 힌트가 가미된 풍부하고 풀 바디한 풍미를 ..
[APP]내가 생각하는 '트리플' 비지니스 모델 그리고 야놀자의 야망 트리플이 생각보다 재미있고 알찬 앱이다. 그렇게 생각하는 이유는 상당히 많은 기능과 서비스 마지막으로 콘텐츠가 들어가 있다. 그러나 그 뒤엔 야놀자의 야망이 보인다. 야놀자의 야망 야놀자의 2006년 모델을 연결하는 플랫폼 회사였다. 그런데 지금은 숙박에서 여행 이번에 항공권 해외 여행까지 '종합 레저관광기업'으로 거듭나려고 한다. 트리플의 수익 모델과 강점 2019년 4월 발행된 티티엘뉴스를 보면, 김연정 대표와의 인터뷰에서 트리플의 수익모델은 기존 OTA*와 크게 다르지 않다고 말했다. 호텔, T&A 기타 여행상품 판매를 통한 수수료이다. 여기에 추가로 유저들에게 해외여행에 유익한 정보 및 쿠폰을 노출하는 광고 등도 수익모델로 개발 중이다. 결국, 기존의 비지니스 모델인 OTA와 노출광고가 다 일것이..
[Machine Learning]공부해보기 Notice that these terms vary among courses, textbooks, Often prediction is used for both categorical and continuous outcomesand the term regression is sometimes used for the continuous case. 예측은 범주형 결과와 연속형 결과 모두에 사용되는 경우가 많으며 회귀라는 용어는 연속적인 경우에 사용되기도 합니다. Categorical outcome Y can be any of K classes. The number of classes can vary. For example with digit readers K is 10. The classes besing the ..
[인지 / UI]기본값이 설문에 미치는 영향, 기본값 편향(default bias) 설문지 뿐만 아니라 컴퓨터에서도 기본값이 존재 한다.허나 상품을 사거나 설문조사를 할 때, 기본값은 많은 영향을 미친다. 이것을 우리는 "기본값 편향"이라고 부른다.기본값(Default)이란?컴퓨터 과학에서 기본값 또는 디폴트(default)는 응용 소프트웨어나 컴퓨터 프로그램 또는 장치에서 사용자의 개입없이 자동으로 할당되는 설정 또는 값이다. 기본값 편향설문조사의 기본값은 응답자가 다른 옵션을 고려하지 않고 기본 옵션을 선택할 가능성이 높은 경우 설문조사 결과에 영향을 미칠 수 있다. 이를 "기본값 편향"이라고 한다. 특히 기본 옵션이 강조 표시되거나 미리 선택되어 있는 경우 응답자가 다른 옵션이 있다는 사실조차 인지하지 못하는 경우도 있다.행동경제학적으로 보면 기본값 선택은 정신적(인지적) 노력(에..
[UI] 텝(tabs)으로 구성할 것인가? 페이지(pages)로 구성할 것인가? 홈페이지를 만들다 보면 종종 몇가지 질문데 부딧치게 된다. 이 페이지는 어떻게 구성해야 사용자가 훨씬 편리하게 사용할수 있을까? 이번엔 콘텐츠를 바탕으로 텝(a tab)과 페이지(a page)로 어떻게 구성할 것인가에 대해서 논의해보도록 한다. 텝이란? 인터페이스 디자인에서 탭은 여러 문서 또는 패널을 단일 창에 포함할 수 있는 그래픽 사용자 인터페이스 개체이다. 특징 탭은 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 쉽게 전환할 수 있게 해주고 인터페이스 공간을 절약하는 데 유용할 수 있다. 하지만 너무 많은 탭이 열려 있으면 복잡해지고 사용자가 원하는 정보를 찾기 어려워질 수 있다 탭을 사용하면 공간을 절약하고 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 빠르게 전환 탭은 한 페이지..
[UI]사람은 어떻게 화면을 보는가? F 초두효과(Primacy effect)는 심리학 용어로 먼저 제시된 정보가 추후 알게 된 정보보다 더 강력한 영향을 미치는 현상을 말한다. 말 그대로 뇌에 처음 입력된 정보가 나중에 입력된 정보보다 가장 기억에 잘 남는다는 것이다. 미국 다트머스대 심리학과 폴 왈렌(Paul J. Whalen) 교수는 "인간의 뇌는 0.017초라는 짧은 순간에 상대방에 대한 호감이나 신뢰 여부를 판단한다"고 말했다. 우리는 홈페이지를 어떻게 눈으로 보는가? 우리나라에서는 z 보기로 알려짐 사용자는 먼저 콘텐츠 영역의 상단을 가로질러 수평으로 이동하며 읽습니다. 이 초기 요소는 F의 상단 바를 형성합니다. 그런 다음 화면 왼쪽 아래에 흥미로운 내용을 발견하면 두 번째 수평 이동을 통해 이전 이동보다 더 짧은 영역을 가로질러 ..
[DMBS] 데이터 모델링 관점 데이터 모델링 관점에서 데이터 관점, 프로세스 관점, 데이터와 프로세스의 상관 관점이 3가지가 존재한다. 데이터 모델링 관점 내용 활동 데이터 관점 (What, Data) 업무가 어떤 데이터와 관련이 있는지 또는 데이터 간의 관계는 무엇인지에 대해서 모델링을 하는 방법 구조분석 프로세스 관점(How, Process) 업무가 실제로 하고 있는 일은 무엇인지 또는 무엇을 해야 하는지를 모델링 하는 방법 업무시나리오 분석 데이터와 프로세스의 상관 관점(Interaction) 업무가 처리하는 일의 방법에 따라 데이터으 어떻게 영향을 받고 있는지 모델링하는 방법 CRUD 매트릭스
[DBMS] 정규화 이 글은 아래의 영상을 보고 작성했다. https://www.youtube.com/watch?v=rVxcheAkMSk 정규화란 - 데이터 중복을 해소하기 위해서 Relation을 분해화는 과정이다 예시)함수적 종속 관계 FD 다이어그램 {학번, 과목번호} -> 성적 학번 -> 지도교수 학번 -> 학과 지도교수 -> 학과 제 1 정규형 : 원자값이 아닌 도메인(속성)을 분해 (중복되는 속성이 원자값을 가질 때까지 분해) - 원자값이 아닌 도메인을 분해한다 --> 1 정규형을 만족한다 - 즉 중복된 속성을 제거한다. - 어떤 Relation R에 속한 모든 모데인이 원자값으로 구성되어 있다면 1NF(제 1 정규현)를 만족한다. 제 2 정규형 : 부분함수 종속성 제거 - 기본키를 중심으로 종속이 되지 않는 경..
[DBMS]Nested Loop, Sort_Merge and Hashed Join 완전히 이해된 개념은 아니지만 이곳에 정리하고 또 채워나가보도록 하겠다. 아래 영상을 보고 이해를 했고 PGA(Program Global Area)에 대한 정보를 추가하였다. https://www.youtube.com/watch?v=SVD5ldwVYpo https://lhoris.tistory.com/129 PGA 예시 Table A = IDOL_GROUP Table B = IDOL_MEMBER Relationship(Column) : GORUP_NAME Nested Loop Join IDOL_GROUP = Outer table IDOL_Member = Inner table IDOL_GROUP에서 소녀시대라는 Row하는 선택하고 InnerTable에서 소녀시대 맴버를 찾아서 쭈루록 등록 일종의 For 문..

티스토리툴바