본문 바로가기

분류 전체보기

 (153)
피그마 - 오토레이아웃, 다양한 정렬 오토레이아웃 : 반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능기본으로 프레임 속성이 포함되어 있으며, 프레임 내부 구성 요소들의 배열 방향, 간격, 패딩, 정렬 등 다양한 옵션을 설정할 수 있다. 이를 통해 내부 컨텐츠의 크기에 따라 프레임 크기가 자동으로 조절되거나반대로 프레임 크기에 따라 컨텐츠의 크기를 자동으로 조정할 수 있다.  - 단축키 (3가지 방법이 있다) ▪ 오브젝트를 선택한 상태에서 shift + A ▪ 프레임을 선택한 상태에서 auto layout 패털의 + 아이콘으로 설정하기  ▪  프레임이나 오브젝트를 선택한 상태에서 마우스 우클릭 - add auto layout  오토레이아웃 해지하기 : shift + alt +a  *작은 요소부터 오토레이아웃을 하면서 큰 것까지 만..
[CSS] 초기화 작업, 웹 폰트 불러오기, 글자 속성2 - css 폴더- js 자바스크립트 폴더- img 이미지 폴더- pags or sub 폴더 ▶ 먼저 작업을 할 때 * css 폴더에 css 파일과 common.css(초기화 파일)을 만들어준다바깥 폴더에 html 파일 생성 : 원하는 디자인을 넣기 위해 브라우저 기본 스타일 시트를 초기화 해준다.  1. css 폴더 안에 common.css 파일(초기화 파일)을 만들어준다. 2. 여백 초기화는 전체 선택자(*)로 불러와서 초기화 시켜준다.-margin :  바깥쪽 여백-pandding : 안쪽 여백 3. a태그의 글자 꾸밈들을 다 없애준다text-decoration: none; 4. 목록 앞에 불릿과 들여쓰기를 없애준다.ul,li { list-style: none; } 5. 이미지는 인라인 블록 속성이니..
[CSS] 기초- 스타일시트, 선택자, 글자 속성 css란? :html구조에 디자인을 입히는 언어.Cascading Style Sheets의 약자로 위에서 아래로 흐르는 디자인 시트 언어라는 의미.  웹 문서에서 글꼴이나 색상, 정렬, 요소의 배치 등등 겉모습을 결정짓는 디자인 언어. css의 가장 큰 특징은, 위에서 아래로 속성을 하나씩 적용하는데 동일한 속성이 있으면 아래에 있는 속성을 먼저 적용한다는 것이다.  [ css 기본 문법 ] 선택자{     속성명1 : 속성값1;      속성명2 : 속성값2;      속성명3 : 속성값3; } 내가 선택한 태그 - 선택자 1. css폴더를 만들어 담아줘야한다.2. css의 확장자 : css / ex) style.css3. css의 기본 구조는 딱히 없고 첫줄엔 @charset "utf-8"; 를 적어..
Figjam 피그잼 기초 - 워크플로우 워크플로우: 사용자가 어떻게 할지 여러 방향으로  예측하는 것을 말한다.사용자의 행동 흐름으로 수행순서는 어떻게 되는지에 대해서 여러 방면으로 설명해놓는 것  워크플로우를 피그잼으로 만들어준다.   도형을 하나 그리면 뜨는 창을 통해 도형모양, 색, 테두리,글자 크기등 여러가지를 수정할 수 있다.  Transparent 로 색 투명도도  조절 가능 점을 잡아서 옆으로 이어주면 이어진다.  라인 클릭하면 안에 글씨도 쓸 수 있다. / 라인 색도 조절 가능 아래와 같은 방식으로 워크플로우를 늘려나가면 된다.  내보내기
피그마 실습 - 아이콘,버튼,텍스트필드 만들기 * 피그마는 오브젝트를 구분 짓는데 레이어에 이름을 활용한다특히 컴포넌트 단위에서 레이어 이름에 (/)가 들어가면 으로 각 요소를 단계별로 그룹화해서 관리할 수 있다.   1. 도형으로 아이콘 형태를 얼추 만들어준다.2. shift + X 으로 도형을 선으로 바꿔준다.3. 선을 center로 바꾸고 두께와 테두리 라운드를 준다. 4. 마우스 우클릭  outline stroke 을 통해 패스를 면으로 바꿔준다. 5. constraints을 scale로 바꿔준다. constraints를 둘 다 scale로 바꿔줘야만, 화면이 커지고 줄어들때 같이 커지고 줄어든다.  icon 전용 여백 레이아웃 가이드을 저장해놓고 쓰면 편하다  + 별 먼저 그린 후 - 별 한번 클릭 - 오른쪽 패널에서 꼭짓점 수랑 각도 설..
[html] a 하이퍼링크 태그, img src 이미지 태그 / 절대경로 상대경로 html 문법  *속성 여러 개 넣을때도 띄어쓰기 1칸 content="width.......  1. 하이퍼링크를 걸어주는       a태그는 앵커의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그 반드시 href 라는 속성을 이용해 연결하고자 하는 사이트에 주소나 페이지 주소를 연결해줘야 한다.  **하얀글씨 부분에 쓴 글씨가 브라우저에서 클릭할 글씨가 된다.        :       *-target="_blank"는 새 창으로 페이지를 열어준다. -title은 링크이름에 마우스를 올려놨을때 아래 미리보기 타이틀이 뜨게 해준다. (아래 사진처럼)     [href의 속성값과 기능]1. 일반적인 사이트 링크: http로 시작하는 링크 주소를 입력하면 해당 사이트로 이동함 2. 파일명.h..
코딩 실무 용어 FTP: 코딩된 작업물을 서버로 간편하게 올려주는 프로그램 서버: 프로그램을 돌릴 수 있는 땅. 홈페이지를 짓는 땅 로컬: 내 컴퓨터, 내 작업물 / "로컬로 작업해": 일단 본인 컴퓨터에서 본인만 볼 수 있게 작업해 라는 뜻 TFT:  프로젝트를 위해 잠시 모여 만들어진 팀 PL: 프로젝트의 리더. 해당 직군의 총 책임자 PM: 프로젝트 총괄 매니저 SVN: 여러명에서 작업하는 큰 프로젝트의 경우 '소스버전관리'가 필요한데 이걸 관리하는 것을 뜻한다. Update: 남이 수정, 배포한 것을 내 로컬에 씌우는 개념 Commit: 내가 작성한 코드를 배포할 때 사용하는 작업.  Commit한 작업은 로그(기록)을 반드시 남겨야함 (뭐가 개선되었는지 등) Back-up: 백업 저장. 작업물을 여러군데 복사해..
피그마 Figma 기초 왼쪽아래 버튼에서 여러가지 샘플이나 일러스트,아이콘 파일등 다운 가능하다                    프로필 클릭해서 앱 다운 가능 - 앱깔면 와이파이 없이 연동된다  **Quick actions : 기능검색/ 플러그인 검색 ctrl+/(슬래쉬)        -*frame : 디자인 요소를 담는 컨테이너프레임끼리 서로 중첩가능 -section: 프레임을 모아놓는, 프레임의 상위 그룹 / 프레임을 그룹할 때 쓴다.  -slice: 이미지를 따로 내보낼 때 사용  1. create component :선택한 오브젝트를 1개의 컴포넌트로 만든다. 2. create multiple component :클릭한 컴포넌트를 각각 만듦3. create component  set: 각각 컴포넌트로 만든 다음에 하나..
모바일 디자인 기초 내용 [해상도]:화면에 표시되는 픽셀 수. 일반적으로 넓이와 높이를 픽셀단위로 나타냄화면에 픽셀수가 많을 수록(=밀도가 높을수록) 해상도가 높아짐 [보통 해상도]pc : 1920*1080 pxteblet : 834*1194 pxmobile : 390*844 px [배수 표현]@1x - 1배수 / @2x - 2배수  [물리적 해상도 / 논리적 해상도]모바일 기기의 해상도에는 물리적 해상도(physical Resolution)와 논리적 해상도(Logical Resolution)의 두 가지 개념이 있다. -물리적 해상도: 스마트폰이나 태블릿과 같은 모바일 기기의 디스플레이가 실제로 가지고 있는 픽셀 수를 말함값이 높을수록 선명하고 높은 화질을 제공 -논리적 해상도: 디자인 작업에서 사용하는 기준 픽셀을 의미, 물리..
[html] visual studio code - h1제목태그 / 단락태그 p / 줄바꿈 태그 br / 정의태그 dl,dt,dd / 목록 태그 ul li , ol li / span / inline 속성 태그와 block 속성 태그 : 하이퍼텍스트(하이퍼링크)를 이용하여 구조를 표시하는 언어, 링크로 이루어진 구조, 클릭하면 페이지로 들어가지는 것 HTML은 TAG태그가 모여서 구성된다.  TAG의 구조: paragraph  - 열린 태그  - 닫힌 태그태그가 열렸으면 꼭 닫아주어야한다.  태그는 중첩될 수 있다/ 태그안에 태그 들어갈 수 있다.1. inline: 줄형태, 가로로 출력, 넓이 높이를 못갖는다, 사이 공백이 하나 생기는 것이 특징 2. block : 박스형태, 세로 방향으로 위에서 아래로 출력된다./ 너비와 높이를 가진다.3. inline block: inline+block 합친 것왼쪽 상단 메뉴 문서모양- 탐색기네모아이콘- 확장메뉴(익스텐션) : 에서 여러가지를 다운 받을 수 있다. 돋보기아이콘- 어떤 파일에 어떤 ..

티스토리툴바