본문 바로가기

전체 글127

[html] a 태그, 절대경로와 상대경로, 이미지 태그 하이퍼 링크를 걸어주는 태그 태그는 앵커(anchor)의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그이다.반드시 href( Hypertext Reference )속성을 이용해 연결하고자 하는 사이트의 주소나 페이지의 주소를 연결해야한다.1. 일반적인 사이트 링크: http 로 시작하는 일반 사이트 링크 주소를 입력하면 해당 사이트로 이동한다.2. /파일명.html: 해당 html 파일로 연결해준다. 이때 절대경로나 상대경로를 이용해야 한다.3. mailto:이메일주소: 해당 메일 주소로 이메일을 보낼 수 있게 outlook이 연결된다.4. tel:전화번호: 링크를 클릭하면 컴퓨터에 연결된 인터넷 전화 또는 모바일에서 전화를 걸 수 있다.5. sms:전화번호: 링크를 클릭하면 모바일에.. 2024. 5. 28.
[Figma] 피그마 사용법(2) 피그마 오브젝트 사용법 - 01. Edit object원하는 도형을 하나 만들어주고 클릭된 상태로 화면 상단 중앙에 있는 edit object를 클릭하면 자유변형을 할 수 있다. - 02. Select matching layers변형을 완료한 도형의 점선값을 없애고 이미지와 같은 도형으로 만들 수 있다. - 03. Create component (ctrl + alt + k)그룹처럼 만들어서 관리할 수 있다.- 04. Create multiple components- 05. Create component set- 06. boolean group   https://wdnote.tistory.com/189 2024. 5. 27.
[Figma] 피그마 사용법 (1) https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.www.figma.com  피그마 로그인 후 홈페이지 간단 설명 - 01. Draft : 내 작업물들- 02. Get desktop app : 닉네임 클릭 후 클릭하면 모바일로도 작업 가능- 03. Explore Community : 다른 사람들의 창작물을 다운로드 가능- 04. Design fil.. 2024. 5. 27.
Visual Studio Code 확장프로그램 설치 방법, html 속성과 태그 01. 확장 프로그램 설치- 가. Korea Language Pack for Visual (한국어 패치)- 나. Live Server (웹에서 미리보기)- 나. Prettier - Code formatter (닫힌태그 등 자동생성)02. 바탕화면 폴더 만들기- 사용할 폴더 만들기. ex web01HTML 에서 폴더만들 때 규칙1. 이름 사이에 공백이 들어가면 안됨 컴퓨터가 폴더를 두개로 인식web 01공백이 필요한 경우 -(하이픈) 이나 _(언더바)만 사용 가능web_01, web-012. 숫자로만 이루어진 제목 안됨 013. 한글x, 영어 소문자로만 쓰기컴퓨터가 못알아들음웹대문자로 쓴다고 오류는 안나지만 그렇게 쓰기로 정해놓음4. 영문보다 숫자가 앞으로 나오면 안됨  01web5. 파일과 연관된 단어를.. 2024. 5. 27.
[Visual Studio Code] 다운로드 방법 Visual Studio Code 다운로드https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.comhttps://code.visualstudio.com/#alt-downloads Visual Studio Co.. 2024. 5. 27.
모바일 디자인 기초, 해상도와 배수의 개념 해상도란?화면에 표시되는 픽셀 수.일반적으로 너비와 높이를 픽셀단위로 지정.화면의 픽셀 수가 많을 수록 해상도가 높아지고 이미지가 더 섬세하고 선명하게 나타난다. 가로 * 세로PC : 1920 px * 1080 pxTeblet : 834 px * 1194 pxMobile : 390 px * 844 px배수(Scale Factor)디스플레이 기술의 발전으로 인해 같은 면적 안에 더 많은 픽셀을 담을 수 있게됨. (고밀도 디스플레이)이러한 디스플레이에서는 픽셀밀도가 증가하면서 배율도 2x, 3x 와 같이 증가한다.그렇기 때문에, UI 디자인을 할때 여러 기기에 올바른 디자인이 표시되기 위해 다양한 배율로 에셋을 내보내는 것이 중요하다. 예를 들어, 아이콘 이미지가 jpg, png 일 때 1배수로 디자인 된 .. 2024. 5. 27.

티스토리툴바