기타 _ 관련 정보등 (6) 썸네일형 리스트형 스프라이트 이미지 만들어주는 사이트 https://www.toptal.com/developers/css/sprite-generator CSS Sprites Generator Tool | Toptal®CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)www.toptal.comsprite generator이미지들을 끌어다놓고 위쪽에 padding으로 간격도 조절할 수 있다. 스프라이트 이미지가 생성되면 각 이미지마다 width랑 height랑 position값도 나와서 복사붙여넣기 하면 된다. 스프라이트 이미지를 사용하면 용량을 줄여서 쓸 수 있다. ★ 브라우저 랜더링 과정 브라우저 랜더링 과정은 도메인 주소(http://www.~~~.com)를 브라우저에 요청할 때 해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻한다. 1. HTML 파일을 파싱: 웹 브라우저에서 HTML 파일을 읽어오고 구조를 해석하는 과정을 말한다. 브라어작 HTML 문서를 파싱하면 DOM(Document Object Model)트리를 만든다. DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현됨. 2. CSS 파일을 파싱: HTML 파싱 후에 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됨. 3. DOM과 CSSOM을 결합: 브.. 반응형을 만들 때 많이 사용되는 상대 단위 반응형을 만들 때 많이 사용되는 상대단위 1. %: 어떤 영역에서 어떤 %만큼의 영역을 차지함. (부모박스의 반 채우고 싶으면 50% 또 그 안에 반 채우고 싶으면 50%)2. vw, vh: view port width / view port height의 약자로 보이는 화면을 기준으로 백분율(%)하여 적용한다. (영역이 기준이 아니라 보이는 화면이 기준)3. vmin, vmax: view port의 최대, 최소 넓이를 의미한다. vw와 vh를 합친 단위로 vmin은 vw와 vh중 작은 값을 기준으로 하며 vmax는 vw와 vh중 큰 값을 기준으로 한다. 핸드폰에서 많이 사용. min은 작다, max는 크다. Figjam 피그잼 기초 - 워크플로우 워크플로우: 사용자가 어떻게 할지 여러 방향으로 예측하는 것을 말한다.사용자의 행동 흐름으로 수행순서는 어떻게 되는지에 대해서 여러 방면으로 설명해놓는 것 워크플로우를 피그잼으로 만들어준다. 도형을 하나 그리면 뜨는 창을 통해 도형모양, 색, 테두리,글자 크기등 여러가지를 수정할 수 있다. Transparent 로 색 투명도도 조절 가능 점을 잡아서 옆으로 이어주면 이어진다. 라인 클릭하면 안에 글씨도 쓸 수 있다. / 라인 색도 조절 가능 아래와 같은 방식으로 워크플로우를 늘려나가면 된다. 내보내기 코딩 실무 용어 FTP: 코딩된 작업물을 서버로 간편하게 올려주는 프로그램 서버: 프로그램을 돌릴 수 있는 땅. 홈페이지를 짓는 땅 로컬: 내 컴퓨터, 내 작업물 / "로컬로 작업해": 일단 본인 컴퓨터에서 본인만 볼 수 있게 작업해 라는 뜻 TFT: 프로젝트를 위해 잠시 모여 만들어진 팀 PL: 프로젝트의 리더. 해당 직군의 총 책임자 PM: 프로젝트 총괄 매니저 SVN: 여러명에서 작업하는 큰 프로젝트의 경우 '소스버전관리'가 필요한데 이걸 관리하는 것을 뜻한다. Update: 남이 수정, 배포한 것을 내 로컬에 씌우는 개념 Commit: 내가 작성한 코드를 배포할 때 사용하는 작업. Commit한 작업은 로그(기록)을 반드시 남겨야함 (뭐가 개선되었는지 등) Back-up: 백업 저장. 작업물을 여러군데 복사해.. 모바일 디자인 기초 내용 [해상도]:화면에 표시되는 픽셀 수. 일반적으로 넓이와 높이를 픽셀단위로 나타냄화면에 픽셀수가 많을 수록(=밀도가 높을수록) 해상도가 높아짐 [보통 해상도]pc : 1920*1080 pxteblet : 834*1194 pxmobile : 390*844 px [배수 표현]@1x - 1배수 / @2x - 2배수 [물리적 해상도 / 논리적 해상도]모바일 기기의 해상도에는 물리적 해상도(physical Resolution)와 논리적 해상도(Logical Resolution)의 두 가지 개념이 있다. -물리적 해상도: 스마트폰이나 태블릿과 같은 모바일 기기의 디스플레이가 실제로 가지고 있는 픽셀 수를 말함값이 높을수록 선명하고 높은 화질을 제공 -논리적 해상도: 디자인 작업에서 사용하는 기준 픽셀을 의미, 물리.. 이전 1 다음
