0424 uiux 18일차

0424 수 uiux 18일차

강사님 수업페이지 ( https://codepen.io/hjyee/full/OJGrVYJ )
 
웹코딩 참고 사이트
( https://kimyws.tistory.com/29 )
( https://webstoryboy.co.kr/ )

플렉스 개구리
( https://flexboxfroggy.com/#ko )
 
 
새로운 걸 만드는 것
어떤 레이아웃으로 할지, 
 
 
하파크리스틴
레이아웃 1
코드 1
아이콘이나 일러스트 같은 거 작업하는 사람 2
 
레이아웃, 코드 역할 같이
일러스트 같이
 
메인 사진 칸
 
(https://pin.it/SrTj9g2Rr)
ㄴ 여기에서 캐릭터 추가해서 브랜드 느낌 살리기
 
 

하파크리스틴 상단 메인(브랜드 캐릭터가 보여서 메인인걸로) 이미지

하파크리스틴 페이지 상단이미지, 하단 캐릭터 일러스트 여름 컨셉 
파랑, 초록, 
흰색도 살짝 들어가면 좋을지도,,?
 

브랜드 느낌

(https://hapakristin.co.kr/pages/about-us)
 
 

( https://pin.it/15jw0Vicx )

 
왼쪽 하단 테이프 같은 거는 여름 컨셉에 맞게 색을 좀 다르게 해서 문구를 넣기,  전체적인 레이아웃은 오른쪽으로
 
 
 
상단 이미지랑 메뉴, 상단 우측 로고 1명 사람 이미지 3장 정도 더 찾기
하단 캐릭터 일러스트랑 sns로고 1명
 
렌즈누끼 서로 다른 것 네 개 누끼(홈페이지에서 가져오기)
 
로고 만들기, 폰트찾기(소요단풍체)
 
 
시원한 느낌(https://pin.it/2ABC9cWvA)
 

---

 
 
z-index (https://codepen.io/YoungHeom/pen/eYoxzBE)
overflow (https://codepen.io/YoungHeom/pen/JjVxKOa)
before, after (https://codepen.io/YoungHeom/pen/LYvqZmq)
transition (https://codepen.io/YoungHeom/pen/eYoxzQM)
 
- z-index -
 
lorem치고 Tab키 누르면 자동으로 글이 나옴
영어는 단어 단위로 줄바꿈이 된다(1어절)
white-space: nowrap; 줄바꿈하지마라
white-space: wrap; 기본 상태, 줄바꿈해라
 
- overflow -
 
기본값 overflow: none; 
overflow-x 가로
overflow-y 세로
overflow-x: hidden; overflow: hidden;
ㄴ 박스 바깥으로 삐져나온 내용을 가려줌
overflow-x: scroll; 
ㄴ 숨겨주지만 스크롤바가 생김
글이 짧아서 박스 밖으로 삐져나가지 않아도 스크롤바가 존재
overflow-x: auto;
ㄴ 글이 짧으면 스크롤바 없음, 글이 길어서 박스보다 길어지면 스크롤바가 생김

text-overflow: ellipsis; 잘린 부분 ...처리
text-overflow: none;이 기본값
 
사용 예시↓
overflow: hidden; (잘린 부분 숨겨라)
text-over overflow: hidden; flow: ellipsis; (끝에 ... 표시를 해라.)
 
 
- before, after -
 
ul > li::after {
content: "님";
} <li>연예인</li> 뒤에 "님"을 붙이겠다.

li::after li 요소 뒤
::before, ::after의 display: inline이다.(inline-block과 비슷하니까 그냥 인라인 블럭으로 알아도 괜찮)
 
 
- transition -
 
div:hover {
width: 100%;
transition: width 2s;
}
너비를 바꾸는 데 2초가 걸린다.

div {}
height: 100px;
width: 50%;
transition: width 2s;
}
ㄴ 너비를 바꾸고 되돌리는 데 각 2초씩 걸린다.
0.1 단위의 소수점은 .1로 작성 가능

div {
background-color: indianred;
height: 100px;
width: 50%;
opacity: .1;
transition: width 1s, opacity 2s;
}
ㄴ 투명도 원래대로 되돌아오는 시간 각 2초씩

div {
background-color: indianred;
width: 100%;
transition: width 1s, opacity 2s;
}
바꾸고 되돌리는 데에 각 1초씩, 되돌아올 때 점점 투명해짐

transition: width .5s 1s,opacity 3s;- 1s는 딜레이(커서를 1초 동안 대고 있으면 동작)

가끔 트랜지션 안될 때 body에
min-height: 100vh; 라고 값을 주면 됨

div:hover가 더 아래에 있고 더 자세히 적혀있기 때문에 동작할 땐
div:hover에 적힌 css가 적용됨