Developer

작업 영역 생성 Frame F 단축키로 작업 영역 생성작업 영역은 반복 생성 가능 컴포넌트 생성 컴포넌트: 재사용하기 위한 하나의 단위 프레임 내에서 생성한 도형을 선택한 후오른쪽 다이아모양 아이콘을 눌러 component를 생성 도형을 클릭했을 때 테두리 색상이파란색에서 보라색으로 변경됨 왼쪽 메뉴바 Assets > Create in this file파일 내에서 해당 컴포넌트를 사용할 수 있도록 생성 생성된 컴포넌트를 선택해파일 내에서 동일한 이미지를 생성할 수 있다 생성된 이미지에 대해한번에(동시에) 색상 변경 등의 작업이 가능 특정 도형에 대해 마우스 우클릭 > detach instance 설정으로컴포넌트에서 해제할 수 있다 그룹핑 Grouping grouping을 통..

피그마 시작 피그마 사이트 접속 또는 앱 설치https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design platform for building meaningful products. Design, prototype, and build products faster—while gathering feedback all in one place.www.figma.com 구글로 로그인 후 즉시 사용 가능일정 부분 유료로 사용 가능하며, 일부는 유로 툴로 사용 가능 피그마 기본 툴 설명 왼쪽: 메뉴 바중앙: workspace로 작업 영역draft > + 버튼으로 메뉴 선택 ..

CSS 요소의 레이아웃[위치, 정렬] display* position* flexible layout* grid layout* 미디어쿼리, 컨테이너, 트랜지션, 트랜스폼, 애니메이션... display : 해당 요소를 사용자에게 어떻게 보여줄 것인가 block 크기를 원하는대로 지정 가능 한 줄 전체 너비를 차지함 (div, p, header, footer, h1~h6, ...) inline 크기 지정 불가 안에 있는 컨텐츠만큼 지정 이웃하는 요소와 나란히 배치되는 특징 ex. a, span, img, ... inline-block inline과 block 속성 모두를 갖고 있는 것 이웃하는 요소와 나란히 배치되고, 크기 지정도 가능 ex. input, ... none 보이지 않는 상태 사용자 화면에서 자..

박스모델 : HTML 요소(태그)는 사각형의 모양을 하고 있다 구성요소에는 테두리 내용물 안쪽여백과 바깥여백 패딩, 마진 패딩: 안쪽 여백 마진: 바깥 여백 ex. padding(margin): 위오아왼 (시계방향) : 위 오왼 아래 : 위아 오왼 : 모두 ex. padding: 9px 3px 2px 5px; 만약 한 방향만 padding 이나 margin을 주어야 한다면 padding: 0 0 16px 0 padding-bottom: 16px; // padding vs padding-bottom의 우선순위는 같음 ; 나중에 나온 것이 덮어씀 top, bottom, right, left 박스사이징 태그(요소)의 크기를 어떤 것을 기준으로 계산할 것인가 box-sizing content-box(기본값) 내..

CSS 속성: 크기(단위) px 절대 크기 지정 방식 내가 정해준 크기가 무조건 적용 rem 문서 요소 최상위 태그 = html의 font-size와의 배율 1rem = 16px (html font-size default value = 16) 2rem = 32px em 상위 요소(부모) font-size의 배율 1.5em = 부모 요소 font-size 1.5배 * 아주 특별한 경우에만 사용 ; 미디어 쿼리 % 부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율] * 가장 가까운 요인이 되는 요소와의 비율 ; px, rem, em, & 중 px, rem, &을 대부분 많이 사용 vw(viewpoint width), vh(viewpoint height) 100vw ; 사용자 해상도의 100% 길이 ;..

Text CSS 속성 ** color : 텍스트 색상 letter-spacing : 자간, 문자 단위 간격 word-spacking : 단어 사이 간격 (띄어쓰기 간격) ** text-align : 텍스트 정렬(left, right, center) ** line-height : 줄간 (줄과 줄 사이의 간격) * text-indent : 첫 줄 들여쓰기 (상품목록이나 매거진 사이트에서 들여쓰기가 되어 있는 상태가 많다 ; 다른 곳에서는 잘 쓰지 않음) * text-decoration : 텍스트의 여러 효과(밑줄) 설정하거나 제거 text-transform : 영문자 대소문자 결정 font-variant : 소문자를 더 작은 크기의 대문자로 변환 * text-shadow : 텍스트의 그림자, 번짐 효과 등을..

CSS? ; Cascading Styled Sheets THML 문서에 style 속성을 추가하여 시각적으로 꾸며주는 역할 디자인 부분을 담당 CSS 적용법 (스타일링 기법) 내부스타일링 HTML 문서의 외부스타일링 HTML 문서의 인라인스타일링 요소 안에 직접적으로 style 속성을 활용하여 적용 ex) ... 내부 외부를 포함한 어떠한 CSS보다도 우선순위가 가장 높다 => 내부 스타일 : 한 html 문서 안에 작성 외부 스타일 : html 문서 외부에 작성 인라인 스타일 : 요소 안에 직접적으로 작성 선택자 : 전체 선택자, 요소 선택자, id/class 선택자, 그룹 선택자, 가족 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자 CSS 문법 ---- { ... CSS } 전체 선택..

시멘틱 웹 태그 전 세계에 만들어진 웹 사이트가 증가함에 따라 검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 요구하는 사항이 증가 따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 시멘틱 웹 태그의 장점 1. 웹 접근성 : 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록 접근성 자체를 높이는 행위 2. 검색 엔진 최적화 (SEO) : 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 3. 가독성 ex. ... ... ... ------------------------------------------------- ... ....

유용한 플러그인 중 하나인 VS Code(Visual Studio Code)입니다 무료이기 때문에 유용합니다 마이크로소프트에서 개발한 텍스트 에디터로, 2016년 4월 15일에 정식판이 발표되었습니다 범용 코드 에디터 중 하나입니다 Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and clo..

HTML 까지는 기억이 날 듯 말듯 어릴 때 나모웹에디터로 홈페이지 만들던 세대라 그런지 이건 꽤나 익숙합니다 HTML 이란? Hyper Text Markup Language 보통 퍼블리셔들이 많이 배우는 언어이고 프로그래밍 언어는 아니라고 합니다 HTML과 CSS는 프로그래밍 언어가 아니다 ; html은 마크업 언어, CSS는 스타일 언어 Hyper Text (글, 이미지...) : 현재 페이지의 글 이미지를 초월하여 다른 웹 페이지의 자료들과 연결시켜준다 Markup Language : 웹페이지 상의 컨텐츠를 어떻게 표현할지 명령하는 언어 => 웹 페이지를 이동할 수 있게 해 주고, 다른 웹페이지에 이미지 등 컨텐츠에 접근 가능하고 웹 페이지 내 컨텐츠를 제작하는 언어 => 웹 페이지 때 기초 틀을 ..