본문 바로가기

분류 전체보기49

[UX UI figma] 피그마 오토 레이아웃 (Auto layout) 안녕하세요 PNcoding입니다 :) 오늘은 피그마의 핵심 기능 중 하나인 오토 레이아웃에 대하여 알아보도록 하겠습니다. 피그마를 아직 사용해 본 적 없으신 분들은 이 포스팅을 참고해 보세요! https://pncoding.tistory.com/5 [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a pncoding.tistory.com 오토 레이아웃? 피그마의 오토레이아웃은 UI 디자인을 보다 더 쉽고 효.. 2023. 12. 1.
[CSS 기초] CSS 적용 우선순위 안녕하세요 PNcoding입니다 :) 스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요. 그 이유는 스타일시트의 특징 때문인데요. CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다. 따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다. 즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다. 스타일 우선순위 기본적으로 나중에 적히는 css가 우선순위가 높음 !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 .. 2023. 11. 29.
[CSS 기초] 단위 (px, %, vw, vh, em, rem) 안녕하세요 PNcoding입니다 :) CSS에서는 선택자의 크기를 지정하기 위해 사용되는 여러 가지 단위가 있습니다. 예를 들어 div { width: 300px; } 이라고 적을 때 숫자 뒤에 쓰인 px이 바로 단위입니다. 이번 포스팅에서는 이러한 단위의 종류에 대하여 알아보도록 하겠습니다. px (pixels 픽셀) CSS에서 사용되는 가장 기본적인 단위입니다. 브라우저의 크기가 변경이 되든, 축소되든 확대가 되던지 항상 그 크기값이 변하지 않기 때문에 절대적인 값이라 불러 줍니다. 또한 다른 요소들의 크기에 영향을 받지 않습니다. % (퍼센트) 부모요소의 크기값에 비례하여 적용되는 단위입니다. 부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다. 부모와 자식요소를 만들.. 2023. 11. 27.
[HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역할을 합니다. 즉, 사용자와 대화할 수 있는 인터렉티브(Interactive)한 영역이라고 볼 수 있습니다. 태그 폼 태그는 웹페이지에서 입력할 수 있는 양식을 만들 때 사용됩니다. 예를 들어 회원가입, 로그인, 게시판, 쇼핑몰 주문 등의 많은 곳에 사용되고 있습니다. 이렇게 입력받은 데이터들은 서버 혹은 다른 페이지에 전달해 줄 수 있으며, 폼 태그의 세세한 기능들은 주로 개발자(JavaScript)들이 다룬다고 보시면 되겠습니다. 속성 action : 데이터를 전달할 url을 넣어줌 method : 폼 요소를 .. 2023. 11. 24.
[UX UI figma] 피그마 프레임과 그룹 안녕하세요 PNcoding입니다 :) 오늘은 피그마에서 사용하는 프레임과 그룹이 무엇인지와 그 차이에 대하여 알아보도록 하겠습니다. 프레임 툴의 위치가 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/6 [UX UI figma] 피그마 인터페이스 (1) - 툴바 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔 pncoding.tistory.com 프레임(Frame)? 처음부터 피그마를 사용하신 분들은 프레임이라는 개념에 익숙하실 거예요. 하지만 피그마를 처음 배우시는 분이나 다른 툴(어도비.. 2023. 11. 22.
[UX UI figma] 피그마 단축키 안녕하세요 PNcoding입니다 :) 오늘은 피그마에서 사용하는 단축키에 대하여 알아보도록 하겠습니다. 피그마에 대하여 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/5 [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a pncoding.tistory.com 단축키가 없어도 프로그램을 사용하는 데에 문제는 없습니다. 하지만 단축키를 안다면 좀 .. 2023. 11. 21.
반응형

티스토리툴바