210712
리스트 가로배치하기 : li{float:left;} || display:inline-block;
a태그에 width, height 지정해서 박스 눌러도 링크가능하게
XD파일 링크만들어서 공유하는법
1.Zeplin가입 및 설치 후 실행(https://app.zeplin.io/)
2.Zeplin 우측 Create Project 버튼 > web 체크 > create
3.XD로 와서 자신의 프로젝트 open > 모든 아트보드 선택
4.상단메뉴 > 파일 > 내보내기 > Zeplin(안뜰경우 XD와 Zeplin반복해서 재실행)
5.Zeplin으로 오면 export 창 떠있음 > Export > Done
6.2번에서 create했던 파일에 프로젝트 넘어옴
7.다시 XD로 와서 프로젝트의 모든아트보드 선택된 상태로
8.상단메뉴 > 파일 > 내보내기 > 일괄처리
9.웹선택 > 내보내기
10.상단메뉴 밑에꺼에서 공유 선택(디자인/프로토타입/공유 중)
11.파일 > 내보내기 > Zeplin
12.Zeplin와서 export받기
13.XD우측메뉴에서 링크업데이트 버튼 클릭
14.링크업데이트 버튼 위에 프로젝트의 링크 생성됨
15.링크를 공유해서 프로젝트를 열람 할 수 있고 코멘트 등 가능
-
주의할 점 : XD 링크 만들기와, Zeplin 워크스페이스 만들기는 한 개의 파일만 무료로 가능. XD 공유기능 사용이 막혀있어 안되는 경우 있음. 일단 여러번 재실행 하면 사용 가능해질 때가 있는 듯. 이미 링크를 한 개 소모한 경우 사용 못할 수 있음. 이 때는 사용하던 링크의 프로젝트를 삭제하고 재활용.
-
Zeplin 활용 : 디자이너와 개발자 간 협업 시 프로젝트 링크를 받아 열람 가능. 프로젝트의 화면으로 들어간 후, 한번 더 클릭하면 디자인한 화면이 HTML, CSS코드로 파싱된 걸 볼 수 있음. 이를 바탕으로 프로젝트 진행 가능.
210713
가로메뉴, 세로메뉴, 탭매뉴 만들기
1.하위메뉴를 position:absolute;로 분리하기
2.보여야하지 않아야 할 메뉴 display:none;으로 off
3.초기 화면에서 보여야할 하위메뉴가 있다면 display:block;으로 on
4.js파일 연동해서 호버하거나 클릭했을 때 상위메뉴의 이미지와 하위메뉴의 내용이 바뀌도록(js 함수 내부는 차후 공부)
5.필요에 따라 body에서 함수를 호출해야 할 수 있음(주메뉴는 웹페이지에서 하나만 있기 때문에 윈도우를 다 띄운 후 실행되도 상관없음(예제1). 탭메뉴는 여러개 있을 수도 있기 때문에 어떤 메뉴를 움직일지 결정하는 함수의 매개변수가 필요함.)
210714
-
CSS 가운데정렬
인라인요소 : text-align:center;
블록레벨요소 : margin 0 auto;
백그라운드이미지 : url() 50% 0; -
세로정렬
line-height:100%; -
떠다니는 퀵메뉴 만들기
position:absolute; 후 자바스크립트 적용
border-radius(CSS3)
- 4방향 모두 모서리 둥글게
border-radius:100px;- top-left top-right bottom-right bottom-left 순(좌상단부터 시계방향), border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius와 같이 따로 지정할 수도 있음.
border-radius:10px 20px 30px 40px;- 원그리기 : height와 width의 1/2값을 border-radius로 지정
broder-img(CSS3)
- 일반적으로 테두리는
border: "border-width" "border-style" "border-color";과 같이 사용하지만 이미지도 사용가능.
border-image: url(images/border.png) 28 28 stretch round;stretch:늘리기 round:반복시 안짤리게
border-image-source:url(); (border-color 대신 넣는것)
brder-image-slice:(이미지를 3x3조각으로 나눠서 지정)
border-image-repeat:(stretch이미지를 늘림, repeat이미지를 반복함,
round이미지의 마지막을 작게해서 잘리지 않게 함,space이미지의 마지막이 잘릴 수 있음)
모서리고정 중간만반복
css3.com html5test.com 브라우저 지원확인
아직까지는 브라우저들이 css의 속성property를 부분적으로만 구현할 수 있기 때문에
css 속성은 속성앞에 브라우저를 식별할 수 있는 접두사 벤더 프리픽스(CSS3 Vendor Prefix)
를 붙여서 사용한다.
-webkit- 웹킷방식브라우저용. 사파리, 크롬
-moz- 게코방식브라우저용. 모질라사 파이어폭스
-o- 오페라
-ms- 마이크로소프트사 익스플로러
http://border-image.com 로 이미지 변경해서 보더로 사용
웹브라우저 업데이트가 안돼있던 시절 벤더 프리픽스가 포함된 코드 보고 당황하지 말기
프로젝트는 피그마 사용법 배움
210715
CSS3 - text-shadow
text-shadow:3px 3px 5px #000;속성값 가로오프셋 세로오프셋 블러라디우스 그림자색 순
오프셋은 화면중앙이 +, 블러는 작을수록 진함
블러값만 주면 outerglow 효과
속성값들 사이에 ,를 넣어 다중 그림자 사용가능
CSS3 - box-shadow
;box-shadow:5px 5px 10px #000;속성값 가로오프셋 세로오프셋 블러라디우스 그림자색 순(text-shadow와 동일)
넷째 옵션 px값으로 스프레드(확장)를 줄 수 있음
button에 커서 올렸을 때 손가락 모양으로
cursor:pointer;십진법 rgb(a)값 사용
background: rgb(255,0,0);
color:rgba(0,0,0,0.2);r,g,b값을 십진수로 사용할 수 있음. a값은 알파값으로, 불투명도를 나타냄(0~1).
CSS3 - opacity(불투명도)
opacity: 0.5;rgba를 두 번 사용해야하는 경우 한 번의 코드로 해결할 수 있음(박스와 폰트 모두 같은 불투명도가 적용되는 경우)
CSS3 - HSL/A(색상-채도-명도/알파)
background: hsl(360,100%,75%);
background: hsla(165,35%,50%,0.2);hsl값으로 색상을 정의할 경우. 알파값도 사용 가능.
CSS3 - gradient(그라데이션)
linear-gradient(to bottom,#f00,#00f);
linear-gradient(45deg,#f00 0%,#0f0 50%, #00f 100%);- 방향, 시작색, 끝색의 속성값.
- 방향 종류 : top, left, bottom, right, top left, to bottom, to right, to bottom right, 45deg(각도)
- 각도의 0도가 6시 방향, + 하면 시계방향으로 커짐
- 방향 결정 후 "색상_위치"추가로 여러 색을 추가할 수 있음
background:radial-gradient(circle,#f00 0%, #0f0 50%, #00f 100%);
background: radial-gradient(closest-side at 30% 30%, red, yellow, green);- 중심부로부터 밖으로 나오면서 색상 지정
circle은 원형 옵션으로 ,ellipse(타원형)이 기본값.closest-side,contain그라데이션이 가장 가까운 면과 만남closest-corner가장가까운 꼭지점까지 채움farthest-side가장 멀리있는 면과 만남farthest-corner,cover가장 멀리있는 꼭지점까지 채움
background: repeating-linear-gradient(yellow 0px,yellow 20px,red 20px,red 40px);}
background: repeating-radial-gradient(yellow 0px,yellow 20px,red 20px,red 40px);}- 반복 줄무늬 만드는 코드
그라디언트 자동생성사이트(http://www.colorzilla.com/gradient-editor)
210716
inset
box-shadow:0 1px 1px #d7f9c3,inset 0 5px 10px #ffc;box-shadow 내에서 사용하면 inner-shadow 역할을 함.
속성값은 가로-세로-블러 순. 다중도 가능.
세로값양수 - 위에서 밑으로 이너셰도.
세로값음수 - 밑에서 위로 이너셰도.
CSS3 - first-line/first-letter 선택자
p:first-line{}
p:first-letter{}요소의 첫째줄/첫글자만 석택해서 스타일 지정
CSS3 - first-child/last-child 선택자
div > p:first-child{color:green;}
div > p:last-child{color:blue;}요소의 첫번째/마지막 자식요소만 선택
CSS3 - 형제선택자(~)
h2 ~ div{text-decoration: underline;}h2의 형제인 div 선택
CSS3 - 인접형제선택자(+)
h1 + h2{color:blue;}h1 바로 다음에 오는 형제 h2 선택
CSS3 - 웹폰트
HTML로 링크된 웹폰트 사용하기
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
CSS로 링크된 웹폰트 사용하기
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);CSS로 다운받은 웹폰트 사용하기
@font-face {font-family: roboto;
src: url(font/roboto/Roboto-Regular.ttf);}
.text1{font-family: roboto;}- 폰트 포멧 - true type(ttf), open type(otf), The Web Open Font Format(WOFF)
- 무료폰트 링크 -
구글폰트 (http://www.google.com/fonts)
구글폰트 나눔고딕(http://www.google.com/fonts/earlyaccess)
다폰트(http://www.dafont.com) - html로 링크할지 css로 임포트 할지는 사용할 폰트의 링크방법과 용법에 맞게 활용. 다운받지 않고 링크로 사용할 경우 오류가 발생하거나 페이지를 띄우는데 시간이 많이 걸릴 수 있음.
CSS3 - transform
- 회전(rotate)
{transform:rotate(15deg);} /*15도회전,양수가 시계방향*/- 크기(scale)
{transform: scale(0.5);} /*가로+세로방향 모두 1/2크기로*/scale(양쪽);
scale(가로,세로);
scaleX(가로);
scaleY(세로);
- 기울이기(skew)
{transform:skew(15deg,15deg);} /*가로 세로 15도 기울이기*/skew(x,y)
값이 하나만 있으면 y는0, skewX(각도), skewY(각도)
- 이동(translate)
{transform: translate(100px,100px);} /*가로 세로 100px씩 이동*/translate(x,y)
값이 하나만 있으면 y는0, translateX(), translateY()
translateZ()는 앞뒤 움직임(음수가 뒤로), perspective와 함께 사용
