inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

uikit 질문입니다

240

Hun

작성한 질문수 12

1

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

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

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

jquery HTML/CSS 포트폴리오

답변 1

0

코딩웍스(Coding Works)

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

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

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

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

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

a {

  font-size: 15px;

  color: #000 !important;

}    

0

Hun

강사님 포트폴리오에 넣을 링크 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;
}

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

현재도 float 사용은 중요한가요?

1

212

2

웹 호스팅 후 문제

1

235

1

퍼블리셔 코딩테스트 질문입니다.

1

586

1

feather light

1

248

2

skill 섹션 질문

1

254

1

포트폴리오 홈페이지 제작가이드

2

247

1

iframe 질문입니다.

1

208

1

디자인설정

1

332

1

연봉 질문합니다.

1

892

1

폰트, 이미지? 관련 질문입니다

1

305

1

파일질라 카페24? 관련 질문입니다

1

430

1

면접 복장 질문입니다

1

744

1

도메인 연결 오류

1

358

1

개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들

1

480

1

카페24 절약형 관련 질문있습니다

1

869

2

기능정의서 html에 첨부하는 방법/header include

1

621

1

prototype 뜻

1

700

1

폴더구조 질문드립니다.<재업로드>

1

428

1

폴더구조 질문드립니다

1

357

1

개인포토폴리오 해상도문제요..!

1

389

1

구글에 검색했을 때 나오는 포트폴리오

2

408

1

wow.js live option

1

439

1

개인 포트폴리오 홈페이지 만들때 UI 포토샵 디자인

1

530

1

featherlight 연결시 링크된 html이 문제가 있어요 ㅠㅠ

1

311

1