CSS
1.쇼핑몰을 리뉴얼 하며 배운 css 스킬 몇가지
목차 position : static, relative, absolute, fixed ,sticky 1\. static : 디폴트 세팅2\. relative : 기본 구조에서 상,하,좌,우 변경을 주고싶을때 사용 3\. absolute : position:static이
2.이미지 배너 반응형 대응하기
img 태그안에 src 넣지말고 css 속성으로 backgroud-src 로 넣어주고 background-position : center center 와 같은식으로 보여주고 싶은 위치를 지정해준다.
3.CSS 해결하지 못한 문제들 (아시는분 알려주세요....)
어떤 텍스트는 font-weight 를 줘도 먹지를 않는다. 예상원인: 웹폰트가져올때 제한된 font-weight만 가져온걸까? !important처리가 되어있나..?
4.유지보수할때 position으로 레이아웃 잡기
유지보수할때 maring, padding 으로 기존에 적용된 css위에 덮어쓰기전에 position:relative; left:0%; 과 같은걸 먼저해보는게 좋다. 기존에 적용된 margin,padding들을 0으로 주면서 position 속성을 사용하는건 덮어쓴다는느
5.조금 더 아름다운 사이트를 효율적으로 만들기위한 노력들
모든게 margin, padding 으로 해결됬으면 좋겠지만서로 다른 박스모델로 구성된 태그들이(ex 로고와 타이포) flex로 묶여있을때는 박스모델을 생각하게된다. 1,2px를 올리기위해 태그를 만들고 span태그에 class를 부여해서 margin,padding으로
6.슬라이더 아래 스크롤바 레이아웃 잡기
이런 스크롤바의 width 값 조절할때는 전체 width:80%로 크기를 줄이고 left로 가운데 정렬을 시켜버리는 방법이 좋아보인다. 왜냐하면 스크롤바의 크기를 조절해야하므로 width값을 %로 조절해야하기 때문이다. .swiper-container-horizonta
7.CSS 가상선택자에 대한 배움
버튼의 뒷배경에 gradient 로 스르륵 사라지는 slider 를 만들때는 ::before 과 같은 가상선택자를 쓰는게 좋다. https://green-webdesigner.tistory.com/20
8.ios / android height 안맞는 문제
버튼이 안드는 1px 내려가고, 아이폰은 1px 올라가고, web에서는 잘 보인다. 이게 무슨일..! height 값 고정으로 주니까 잘 먹더라.
9.css font 이슈
https://stackoverflow.com/questions/53074655/after-changing-all-font-family-font-awesome-icons-show-up-as-squares
10.반응형에 따라 이미지 떨어지는 부분 다르게
https://naradesign.github.io/flex-direction-order.html
11.css 적용시 classname을 잘쓰자
급하게하려고 저렇게 ul태그에 넣었더니 나중에 ul태그를 사용하는 전부에서 문제가 생겼다. li태그도 마찬가지급하게 할때면 자꾸 부실공사를 하는것같다. 기초가 탄탄하지 않아서 유지보수할때 더 힘든 느낌. 쎄게 배운다. 내 CSS는 왜 이렇게 구릴까 ㅠ.ㅠ