210719
CSS3 - transition(애니메이션)
transition:all 1s ease 0s;- 속성값 4개가 오는데 property_duration_timingfunction_delay 순
- property - 모든 속성 또는 일부 속성에 애니메이션 적용(all, background, color, height, width, transform)
- duration - 시작해서 끝날때 까지 시간, 초단위로 지정
- timingfunction - ease, linear 길이증가, ease-in 가속, ease-out 감속, ease-in-out, cubic-beizer 베이지어 곡선 등 중에서 선택
linear 일정한 간격으로 움직임
ease 처음에는 서서히 가속하고 마지막 부분에는 급격히 감속
ease-in 처음에는 천천히 시작하고 마지막에는 가속
ease-out 처음에는 최대속도로 시작하고 마지막 부분에는 감속
ease-in-out 처음에는 제로 속도에서 시작하고, 중간지점에서는 최고 속도로 움직이고, 마지막 부분에는 서서히 감속
cubic-bezier 직접 값을 입력해서 속도 조절 - delay - 시간만큼 지난 후 작동 -webkit-transition-delay:0.5s;
- http://matthewlein.com/ceaser
- :hover가 아닌 원본에 transition 추가로 애니매에션 적용 가능
CSS3 - transform(3D)
perspective:700px;- 3d효과를 줄 요소의 부모요소에 perspective를 부여하면 3d공간이 생성됨
div > p{width:100%;height:100%;background: blue;opacity:0.3;
transition: all 1s ease 0s;}
div:first-child:hover > p{transform:rotateX(90deg);
transform-origin:center top;- 애니메이션 효과와 변환된 모습을 지정해 준 후 transform-origin으로 회전축 설정
- transform-origin의 기본값은 center이고, 가로_세로 순으로 지정가능.
210720
CSS3 - pseudo-class :target
p:target{}선택자의 링크가 눌러졌을 때 속성과 속성값이 선택자에 해당하는 태그에 적용 됨.
기타
위에서부터 스르륵 내려오는 탑메뉴/아코디언메뉴 등 리스트+트렌지션 활용.
재구현 해보는 것으로 복습함.
210721
CSS3 - Psuedo-class
:nth-child(n)
항목 중에서 n번째 자식 선택
li:nth-child(odd){color:red;}/*홀수*/
li:nth-child(even){color:blue;}/*짝수*/
li:nth-child(3n){color:yellow;}/*3의 배수*/
li:nth-child(5){color:black;}/*5번째*/:first-child / :last-child
첫 자식 또는 마지막 자식
li:first-child{background-color:black;}/*첫자식*/
li:last-child{background-color:grey;}/*마지막자식*/:nth-last-child(n)
끝에서 n번째 자식을 선택
li:nth-last-child(1){color:orange;}/*끝에서 1번째 자식*/:empty
빈 항목 선택(텍스트, 공백 없어야 함)
li:empty{border:1px solid red;padding:50px;}/*li중 빈 것 선택*/type을 사용한 가상클래스
:nth-of-type(n) 유형이 같은 n번째 선택
:nth-last-of-type(n) 끝에서 부터 세어서 유형이 같은 n번째 선택
:first-of-type 해당 유형의 첫번째 항목 선택
:last-of-type 해당 유형의 마지막 항목 선택only를 사용한 가상클래스
:only-child 유일한 자식선택
:only-of-type 해당 유형의 유일한 항목 선택속성선택자[]
h2[title]{text-decoration: underline;}/*속성선택자(title 속성 있는 h2)*/속성값을 다 작성하지 않고 선택하기
속성$="속성값 마지막", 속성^="속성값 시작", 속성*="속성값 포함"
a[href^="http"]{color:orange;}/*http로 시작하는 속성값*/
a[href$="html"]{text-decoration: none;}/*html로 끝나는 속성값*/
a[href*="www"]{font-style: italic;}/*www를 포함하는 속성값*/CSS3 - resize
resize:both;div등과 같은 상자의 크기를 사용자가 마우스로 조절할 수 있게 됨. 주로 overflow:hidden;과 함께 사용. 속성값으로는 horizontal,vertical,both이 있음.
CSS3 - background-size
background-size: 90% 90%;
/* 박스크기의 90%로 배경이미지가 나옴. 사이즈조절하면 배경크기도 맞춰짐. */
background-size: 100px 80px, 50px 30px;
/* 다중이미지에 지정 */
background-size: cover;/*꽉채우기*/
background-size:contain;/*이미지 잘리지 않고 들어가게*/CSS3 - background-origin / background-clip
배경이미지의 시작지점을 지정하거나 / 배경이미지에 대한 글씨의 시작지점을 지정할 경우
/* background-origin : border-box/padding-box(기본값)/content-box */
background-origin:border-box;/*보더부터 이미지 시작*/
/* background-clip : border-box(기본값)/padding-box/content-box*/
background-clip:padding-box;/*패딩부터 글씨 시작*/apperance
form input,textarea,select 등 기본 모양이 있는 요소의 기본모양을 제거하는데 사용
-webkit-appearance:none;appearance:none;outline / outline-offset
보더 외곽 테두리 / 아웃라인 안쪽 여백
div{border:10px solid #aaa;outline:5px solid red;outline-offset: 5px;}white-space
white-space:normal(기본값,자동줄바꿈)/nowrap(줄바꿈없음)/pre(공백표시)/pre-wrap()/pre-line(줄바꿈만적용);
text-overflow
text-overflow: ellipsis(말줄임표)/clip(넘치는텍스트 자르기);
word-wrap
word-wrap:break-word;(절자가 긴 영문일 경우 줄바꿈 할 때-이메일주소 등)
text-align: justify;word-break:break-all;(줄바꿈 시 단어 끊기-스페이스 한칸으로 보이게)
단 나누기
article{width:500px;padding:10px 20px;
column-count: 3;/*열 갯수, column-width:150px; 열 너비*/
column-gap:20px;/*열 간격*/
column-rule:1px solid #999;/*칼럼사이 구분선*/}210722
HTML 조건주석문
<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
"></script>
<![endif] -->IE9 미만 접속시 주석이 실행됨
시멘틱 웹에서 사용되는 태그들
header, footer, nav, section, article-재배포글, aside-퀵메뉴나 광고, (main-container대신 사용하기도 함)
210723
다양한 애니메이션 만들어보기 함. 깃 저장소에 여러가지 예시 있는데 차후 사용하고 싶을 때 참고해도 괜찮을 듯!
프로젝트 기록 창피하니 간단하게만 ㅎㅎ 매일 다 보는데서 창피 당해서 기죽음.. 그래도 엄청많이 고침! figma 상에서 하니까 파일을 안남기게 됨 ㅠㅠ
