웹 기록용

모작사이트 https://tinyurl.com/y6ya7c4p  네이버 0단계 라이브러리생성...codepen.io  [제 0단계] 라이브러리 생성하기코드펜이동 [제 1단계] top-bar 박스정렬 및 커스텀코드펜이동

피코그램 모작 진행과정목표 - 1차메뉴와 2차메뉴 구조 구성하기 예제 )  1. 0 ~ 2단계 그리드 잡기 + 라이브러리 생성 + 그리드 안에서 박스 레이아웃 잡기 ->  코드펜 이동하기 2. 3단계 탑바 레이아웃 박스 정렬하기-> 코드팬 이동하기

데이터 종류문자숫자 [console창] console창에서는 오류를 찾거나 데이터를 눈으로 볼 수 있음 (주의)코드팬에서 이용시 렌더링 되는 코드펜 특성상 전 기록들이 쌓이기 때문에 콘솔창을  깨끗하게 사용하겠다는 console.clear(); 를 최상단에 꼭 작성해줘야 한다 vs code에서는 안 해도 됨  콘솔창에 보이게 하는 코드 console.log(); [자바스크랩트]자바스크립트 사용자와 상호작용할 수 있는 동적인 프로그래밍 언어ex)ㄴ사용자 : 닫기 누르면 팝업 닫아줘ㄴ컴퓨터  :~~~코드 작동시켜서 팝업 닫음ㄴhtml은 상호작용을 할 수 없고 형태를 강제로 보여주는 형태자바스크립트는 위에서부터 한줄 한줄씩 실행된다ex) 1+1, 2+2 작성했을 때만약 자바스크랩트가 한줄한줄씩 실행되지 않았다..

position 정의문서 상에 요소를 배치하는 방법을 정의하고 top, bottom, right, left 로 최종 위치를 결정한다top : 윗면을 기준으로 #만큼 떨어져 위치하게 됨bottom : 아랫면으로부터 #만큼 떨어져 위치하게 됨left: 왼쪽면으로부터 #만큼 떨어져 위치하게 됨right: 오른쪽면으로부터 #만큼 떨어져 위치하게 됨 position 속성값 position속성에는 아래 표에 나와 있는 속성값들을 지정할 수 있다 속성값정의staticposition을 별도로 지정하지 않을 시에 갖는 기본값relativestatic과 일반적인 흐름을 따라 배치되나, static위치에서 top,bottom,left,right와 같은 속성에 의한 상대적인 위치에서 배치본인 위치를 기준absolute일반적인..

[피그마 그리드] column열, 단 콘텐츠가 들어가는 부분Guttercolumn과 column 사이 간격margin좌,우 여백공간container콘텐츠가 담기는 디자인 영역    [프레임 안에 이미지 넣기]

[피그마 프레임] 프레임프레임 안에 속한 프레임은 프레임 이름이 안보인다->프레임 이름을 수정할 때에는 습관적으로 레이어패널에서 수정한다프레임 안에 속한 프레임을 선택하는 방법은 다양하다1.더블클릭2.ctrl + 클릭3.ctrl + 클릭 + 드래그 (다중선택)->가장 바깥쪽 프레임은 선택이 안됨오브젝트를 다중선택할때 사용하기 좋음 ✅clip content상위레이어를 기준으로 하위레이어를 전부 잘라내서 보여줌->원하지 않는 경우에는 해제해서 사용해야 함  [프레임 컬러 지정 - 스타일 만드는 법] -> 추후 새로운 프레임에서 우측 패널 fill -> +버튼에서 저장한 스타일 불러오기 [피그마 플러그인] shift+i 다양한 플러그인이 존재하지만 라인센스는 전부 다르기 때문에 상업적으로 사용 가능한 플러그인..

[피그마 이용하기 전 알아두기] /피그마 접속+구글 계정이 필요함 웹 앱 따로 설치하지 않아도 됨적용이 되는 폰트가 있고 적용이 되지 않는폰트가 있음구글 로그아웃하면 피그마도 로그아웃이 됨 따로설치가 필요함모든 폰트를 적용할 수 있음구글 로그아웃해도 피그마는 로그아웃되지 않음->앱에서 따로 로그아웃이 필요함 /피그마 일반 or 팀 일반팀파일과 페이지를 무제한으로 사용할 수 있음다른 사람과 공동작업이 불가능함파일과 페이지를 딱 3개만 사용할 수 있음->나머지는 유료다른 사람과 공동작업이 가능함 ✅피그마에서 프레임 만들기프레임 툴 - F ->클릭 -> 자그마한 프레임이 생성 프레임을 선택했을 때 생기는 박스 이름은 이다 ✅프레임에 그리드 설정하는 법(예시 - 모바일 화면) 우측 패널에 layout grid..

목표picogram 모작하기 ✅5월 1일 목표:탑바 그림판으로 레이아웃 잡기  큰 틀 잡기 (연습기록)top-section(red) -> top-bar(orange) -> logo1(green)+nav(green)+top-icon-box(green)✅5월 2일 목표: 탑바 코드팬으로 구현하기 (아직 진행중...) ->코드팬이동하기