css / boxshadow, 공부하다 단 주석문들

*padding / translate / position / float  

패딩으로 길이 잡으면 되는데 가로세로 길이 값 줄 필요없고 

어떤 곳에 어떤 속성이 맞는지 여러가지 생각 해보고 기입 

 

*박스섀도우 효과

li에 보더선이 방사형 처럼 퍼지는 효과는 보더선이 아니라 box-shadow로 주는데 
before after 주고 position주고 퍼지는 느낌은 width 100% height 100%를 호버시로 하는거 - before after에는 0으로 기입 여기에 트랜지션까지 줌  

 

해당 태그-

#link .quick_link li:before{content: ''; boxshadow: inset 8px 8px 0 #000; position: absolute; left: 0; top: 0; width: 0; height: 0; transition: width 0.5s, height 0.5s;}
#link .quick_link li:after{content: ''; boxshadow: inset -8px -8px 0 #f00; position: absolute; right: 0; bottom: 0; width: 0; height: 0; transition: width 0.5s, height 0.5s;}

#link .quick_link li:hover:before,#link .quick_link li:hover:after{width: 100%; height: 100%;}

 

*transform: translate 하고 괄호로 값 

 

*background위치는 left top 이 기본이고 바꿀려면 숫자만 넣고 

position에서 위치값은 left: ; top: ; 이렇게 넣는 차이 

 

*2차메뉴안에 before요소 넣어서 만든거 
#header .gnb .depth2 li a:before{

content: ''; width: 12px; height: 3px;  position: absolute; left: -10px; top: 14px; opacity: 0; background: linear-gradient(to right,#99ca3c, #5bb8d1); transition: opacity 0.5s;

} (#header .gnb .depth2 li a에 postion relative주는거 잊지 않기 !!)

#header .gnb .depth2 li:hover a:before{opacity: 1;}

 

*주석문 정리 

 

1. html에있는 table 태그 border="1" - 나중에 에러떠서 삭제해야함 css에서 border처리 

2. 테이블은 복합요소라 했으니 길이가 내용만큼만 나옴 그래서 width: 100% 값을 초기화요소에 넣어줌
3. float의 높이값 - 부모요소에 속성을 넣어서 어떤 값을 더 넣어도 높이값을 잡아주도록 하는 속성= overflow: auto; (이게 정석은 아니고 다른 배치요소 배우기 전에 공부한 거 ) 
4. 그냥 opacity를 넣으면 전부 불투명해지기때문에 rgba로 넣어주기
5. absolute들어가면 크기가 없어지기때문에 크기 100% 넣었음
6. #business ul li{float: left; width: calc((100% - 15px)/ 4); padding: 175px 0 0; margin-right: 5px; }
= margin-right 5px씩 준거 3개 값을 먼저 width 백퍼센트에서 뺀 크기에서 4등분 하는 계산공식
7. display none주면 원래 transition이 안먹힘 그래서 opacity로 조절하고 hover 하기 전 태그에 transition opacity
8. background-size는 background속성 뒤에 나와줘야함 - 먼저 기입x
9. 유튜브 동영상은 비율 16:9가 좋음 - 포토샵에서 작업 파일 16 9로 만들고 image size 에서 볼수있음
이때 퍼왔던 iframe링크에 있던 가로세로값이랑 frameborder값은 삭제시킴 - 유효성검사에서 오류로 뜸 / css에서 가로 세로 값 입력하고 border값도 0으로 주면 됨 

10. h3에 span넣고 일자로 썻다가  span을 display block주면 밑으로 줄내려감 (자기자리 찾기때문)

11. p태그는 블록이지만 다른 블록요소를 포함 할 수 없는 특성을 가지고 있음
12.linear-gradient(#99ca3c, #5bb8d1); 괄호사이 띄우는거 안됨