다시 lessc를 실행하면 잘 된다. 잘 되는 것은 확인을 했고, 이제는 bootstrap.css를 이용하여 새로운 css 파일을 컴파일해야 한다. 그러기 위해서는 다음과 같이 하나의 less 파일을 생성해야 하는데, prefix (bootstrap-iso) 작업을 수행하니까 prefix.less라고 이름을 지어보자. 그리고 새로 만들(컴파일할) 파일은 isolation을 위한 bootstrap.iso.css 파일이다. Show .bootstrap-iso { @import (less) 'bootstrap.css'; } 이제 lessc를 통해 bootstrap-iso.css를 만들어낸다. $ ./lessc prefix.less bootstrap.iso.css 참고로 bootstrap.min.css 파일을 이용하여 새로운 파일을 컴파일하려고 하면 문법 오류가 난다. min.css가 아닌 일반 css 파일을 이용하여 컴파일해야 한다. 여기까지 하면 less 작업은 모두 끝난 것이다. 다만 생성된 bootstrap.iso.css 파일에서 일부 문자열 수정이 필요하다.
그리고 bootstrap.iso.css 파일을 적용하고, bootstrap(bootbox)를 적용하려고 하는 곳에 로 wrap하면 된다.부트스트랩은 이미 정의되어 있는 여러가지 CSS 및 스크립트를 가져다쓰는 Front-end Framework입니다. 부트스트랩으로는 생각보다 많은 것들을 할 수 있습니다. 부트스트랩 사이트를 보시면 크게 CSS/Component/Javascript로 나뉘어집니다. CSS에서는 모바일, 반응성 웹으로 만들기 좋게끔 width의 변경에 따라 div를 조절 할 수 있는 아이템들을 소개하고 있습니다. 또한 우리가 직접 구현하기 귀찮은 다양한 모양들을 class에 이름을 선언하는 것만으로도 바로 효과를 나타낼 수 있습니다. Component에서는 주로 버튼과 input들의 모양과 색상들을 바꾸는 css들이 소개됩니다. 마지막으로 Javascript에서는 JQueryUI와 같은 플러그인들이 다수 들어있습니다. (model의 경우 JQueryUI의 dialog보다 훨씬 깔끔하고 튜닝이 쉽습니다.) 물론 부트스트랩이 만능은 아닙니다. 하지만 아래와 같은 사항에 해당되면 한번 써보시는 것도 좋다고 생각합니다. 1. 처음부터 새로운 프로젝트를 시작하시려는 분 2. 디자인에 자신이 없고, 디자이너의 협력을 바랄 수 없는 상황에 있으신분 3. 반응형 웹이나 모바일 호환성을 염두에 두고 계신분 4. ie와의 호환성 맞추기가 짜증나시는 분 반대로 이런 분들에게는 굳이 추천드리지 않습니다. 1. 프로젝트가 어느정도 진행되신 분 (css의 격렬한 충돌이 일어날 수 있습니다.) 2. 다수의 인원이 참가하는 프로젝트 (부트스트랩을 쓰지 않는 사람과 css를 선언하다보면 굉장한 충돌이 일어납니다.) 3. 디자이너가 존재하고, 기업적인 분위기의 페이지를 제작하시는 분 (이럴 경우 부트스트랩을 튜닝하는거보다 그냥 새로 만드는게 좋을 수도 있습니다.) 여기에서는 단순한 소개만 하고 넘어가도록 하겠습니다. 사이트에 가시면 예제를 비롯한 다양한 api들이 잘 정리되어 있습니다. 사이트는 아래 주소와 같습니다. http://getbootstrap.com/ 아래의 부분을 header에 추가 하시거나 getStarted에서 파일을 다운받아서 추가 하시는걸로 시작 하실 수 있습니다. 최근 작업에서 가장 머리아픈게 항상 CSS였다. 코딩이나 그런 문제보다 훨씬 머리가 아팠다. 짜증도 많이 나면서 해결도 잘 되지 않고 그렇다고 CSS만 붙잡고 공부할 수도 없는 노릇이다. 그나마 처음 페이지를 만들면서 같이 CSS를 붙일때는 그나마 좀 나은 상황이지만 이미 CSS까지 붙어있는 페이지에 먼가 새로운 것을 같다 붙힐때는 항상 CSS충돌문제가 많이 생기고 쉽게 잘 해결되지도 않는다. 물론 이런 부분은 물론 CSS에 대해서 잘 모르기 때문이다. 그럼 우선 CSS의 적용 우선 순위를 1. Style : style="coloer:red;" 1번이 가장 높은 우선 순위를 가지고 있다. 즉 엘리먼트에 직접 스타일을 써놓은것이 우선적으로 적용된다. CSS가 상위의 다른 CSS와 충돌이 나서 문제가 생길때는 div등을 넣어서 #id .class {} 와 같은 식의 조건을 주어 해당 엘리먼트의 적용우선순위가 높아지게 하면 어느정도 해결 될 수 있다. 또한, 우선순위의 차이가 난다고 하더라도 하위에서 재정의한것이 아니면 상위의 있는 스타일이 적용된다. 상위에서 text-align을 정의하고 하위에서 color를 적용하더라도 여전히 text-align은 적용이 된다. 스타일에 따라 다르지만 auto로 넣던지 아니면 다른 원하는 값을 주어서 재정의 해 주어야 한다. 계속적으로 문제가 생기는 경우도 있기는 하지만 CSS에 대해서아직도 많이 배우고 있는 중이므로.. ㅎㅎ 그리고 { color : red !important } 처럼 !important라고 적어주면 우선순위와 상관없이 적용하게 할 수 있다. css가 충돌이 됬을때 정보CSS css가 충돌이 됬을때
본문오늘 작업하면서 이것저것 css가 많이 사용되고 오픈코드들 css를 호출하면서 충돌이 너무 많아서
그냥 !important 이걸 사용했습니다.
!important : 다른것 css순서 무시. 무조건 적용
css코딩할때 위에서 아래로 하나씩 코딩을 하시는데
아래에 있는 css클래스가 먼저 적용이 됩니다. .test {border:1px solid #ddd; width:20px;} .test {border:1px solid #ddd; width:120px;} 이렇게 되면 test 클래스에 넓이는 width:120px이 적용되어집니다.
하지만 여기서 .test {border:1px solid #ddd; width:20px !important;} .test {border:1px solid #ddd; width:120px;}
이와같이 했을때에는 넓이가 20px로 사용이 되니 참고하시면서
분명 작업을 했는데도 틀이 깨지거나 안맞는다하면 해당 css속성코드에 !important를 사용해보시기 바랍니다
추천 댓글 4개달오벌 자기소개 아이디로 검색 전체게시물 회원게시물자기소개 아이디로 검색 전체게시물 회원게시물15.06.11 14:41:18 열심히 댓글 달았는데 감쪽같이 사라져버렸네요ㅜ 댓글 설정
돼지코구뇽 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물15.06.11 16:52:33 네 맞습니다. 저의경우 부트스트랩을 기반으로 작업을 하는데 댓글 설정
어렵렵 자기소개 아이디로 검색 전체게시물 회원게시물자기소개 아이디로 검색 전체게시물 회원게시물16.01.13 10:26:32 와우 소스보기하면 important가 있길래 뭔가했는데 이럴떄사용하는거였군여 댓글 설정
kiplayer 자기소개 아이디로 검색 전체게시물 회원게시물자기소개 아이디로 검색 전체게시물 회원게시물16.03.14 14:19:18 고수가 된다면 솔직히 별로 사용하지 말아야 하는 소스 중에 하나 입니다. 댓글 설정
달오벌 자기소개 아이디로 검색 전체게시물 회원게시물자기소개 아이디로 검색 전체게시물 회원게시물15.06.11 14:41:18 열심히 댓글 달았는데 감쪽같이 사라져버렸네요ㅜ 댓글 설정
|
부트스트랩 css 충돌 - buteuseuteulaeb css chungdol
관련 게시물
저작권 © 2024 toptenid.com Inc.
