css7 bootstrap grid 📖 시작하기 - 세팅 나는 수정도 해보고 할거라 다운받아서 작업했다. https://getbootstrap.com/docs/5.3/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 📖 작성하기 https://getbootstrap.com/ 화면에서 기본 12컬럼을 나누는 것을 토대로 클래스를 조합해서 반응형이 가능한 레이아웃을 만들어낸다 클래스를 넣어 각 중단점 별로 컨테이너의 크기와 패딩(거터.. 2023. 12. 27. css !important 의 사용을 자제하자 important는 그냥 임시방편 이라고 생각합시다 왜 자제해야하는걸까? 1. 우선순위 css에는 적용 우선순위라는 것이 있어서 특정원칙에 따라 css를 처리한다 우선순위 점수가 높은 속성들 html (inline style) / #id / class, :추상클래스 / 태그 / 상위객체로부터 상속된 속성 같은 우선순위를 가진 속성이 있을 시 점수가 더 높고, 나중에 선언된 것이 반영됨 이 important 는 모든 우선순위 규칙을 무시 2. 충돌 여러곳에서 important 사용시 충돌 가능성이 있어서 3. 가독성과 유지보수 결국에는 어떤 스타일이 우선 적용 되고 있는지 파악하기가 어렵기 때문에 가독성과 유지보수에 좋지 못하다. 이런 이유들 때문에 important 는 사용을 자제하며 스타일을 구조화하고.. 2023. 12. 27. LHVA : link 스타일 지정 순서 a{} a:link{} 방문하지 않은 링크 a:visited{} 방문기록이 있는 링크 a:hover {} 링크위에 마우스 포인터올렸을 때 a:active {} 링크를 클릭한 상태. 클릭하고있으면 계속 보임 * 링크속성 지정시 속성지정순서를 지키지 않으면 제대로 적용되지 않으니 반드시 기입 순서를 지켜야 한다! * 크롬 기본 a 태그 스타일은 color:#000 에 hover는 pointer:text (앵커같은곳에 href없이 사용한다함) 여기에 링크가 붙으면(a href="http://~...") color:blue; text-decoration:underline; hover는 cursor:pointer가 됨 href가 없는 애들은 :link 가 적용되지 않는다 :hover 는 pc (1025px~) 에.. 2023. 12. 25. Sass Scss Saas ? sass, less,.. 같은 전처리기 언어는 직접 웹에서 동작시키는것이 X 웹은 only css💕 만 읽을 줄 안다. 그래서 전처리기 언어문법으로 작성(코딩)후 css 언어로 변경 해주는 작업 (컴파일) 이 필수 live sass compiler scss lint 📖 setting.json 관련 c:\users\..\Roaming\Code\User\settings.json "format" : "expanded" css와 비슷 "compact" 클래스마다, 한줄로 "compressed" 압축된 "nested" 중첩된 (scss와 비슷) "extensionName": scss를 저장하면 어떤 파일을 생성할 것인지 지정 ".css" "savePath" : css 저장 위치 지정. scss가 위치.. 2023. 12. 21. 이전 1 2 다음
