• 카테고리

    질문 & 답변

  • 세부 분야

    취업 · 이직

  • 해결 여부

    미해결

uikit 질문입니다

21.06.06 02:57 작성 조회수 139

1

uikit를 cdn을 빌려오는 순간 제가 적용하고 싶은 부분만 적용되는게 아니라 전체 html 코딩이 uikit가 적용되는건가요?

실전퍼블리싱에 쓸 라이트박스만 uikit를 쓰고 싶어서 pratical에 쓸 때 uikit를 cdn을 등록했더니 

a태그를 폰트칼라를 검정으로 기본으로 설정해놨는데 무시하고 파란색으로 바뀌거나 크기같은게 uikit로 적용된듯한데. 이걸 어떻게 고칠수 있나요 

course-thumbnail

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

[프론트엔드 프레임웍] Front-end Framework UIKit 사용법/컴포넌트(실습)

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.06.06

uikit, bootstrap, semantic ui, material 등을 프레임웍(frameworks)이라고 부릅니다.

곧, html 전체에 영향을 줍니다. 그리고 대부분의 프레임웍은 자신의 프레임웍을 우선으로 css를 잡아 놓습니다.

그런데 uikit 같은 경우 그런 부분이 훨씬 덜합니다.

지금 질문하신 것처럼 a태그가 파란색으로 보이는 것 역시 uikit에서 미리 세팅된 css 입니다.

아래처럼 선택자를 지정하셔서 변경하시면 됩니다. uikit의 경우 !important를 쓸일이 많지는 않겠지만 혹시 선택자를 했는데 속성이 적용이 안되면 uikit에서 css를 잡고 있는 것이니 !important를 사용하시면 됩니다.

a {

  font-size: 15px;

  color: #000 !important;

}    

Hun님의 프로필

Hun

질문자

2021.06.07

강사님 포트폴리오에 넣을 링크 UIkit랑  featherlight로  어떻게 모바일 포폴 사이즈, 데스크탑 모달 줄 수 있는지 알려주실수 있을까요 밤새면서 둘다 해봤는데 하나로밖에 설정이 안되네요. 

uikit에서는 

.uk-lightbox-iframe {
  width: 80%;
  height: 80%;
  background: #fff;
}

이걸 정하면 크기값이 바뀌긴 하는데 전체 일괄적용이고

feathierlight도 

.featherlight .featherlight-content {
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  overflow: auto;
  padding: 0;
  border-bottom: 25px solid transparent;
  margin-left: 0;
  margin-right: 0;
  max-height: 100%;
  background: #fff;
  cursor: auto;
  white-space: normal;
  width: 100%;
  height: 100%;
}
.featherlight iframe {
  border: none;
  width: 100%;
  height: 100%;
}
.featherlight .featherlight-close-icon {
  position: absolute;
  z-index: 9999;
  top: 30px;
  right: 70px;
  line-height: 25px;
  width: 25px;
  cursor: pointer;
  text-align: center;
  font-family: Arial, sans-serif;
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  color: #000;
  border: none;
  padding: 0;
  font-size: 40px;
  outline: none;
}

이것도 마찬가지네요. 강의에서처럼 바로 모바일페이지로 나오게 하는 링크랑, 데스크탑 크기로 출력되는 모달창을 만들려합니다

이 글과 비슷한 Q&A