inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

순서 체크 가상클래스 활용한 실전 퍼블리싱 01(애니메이션 스킬 프로그래스)

style="width:@"값 넣는것 질문

해결된 질문

589

a토링

작성한 질문수 9

2

안녕하세요 선생님.

수업에서 스킬 게이지가 올라가는 곳에 style="width:90%" 이런식으로 html에 작성을 하는것을 보았습니다.

협업 과정에서 백엔드 개발자가 설정하기 쉽게 바꾸기 위해서 스타일 width 값을 보기 쉽게 html에 작성한것 인가요? 

기본적으로 html에 css를 넣는것이 좋지 않다고 알고 있었는데, 개인 포트폴리오 같이 개발이 필요없는 일회성 코딩을 할때는 width값을 css에 작성하는것이 일반적인건가요? 

jquery HTML/CSS

답변 1

2

코딩웍스(Coding Works)

말씀하신데로 일관성을 위해서 인라인 스타일은 사용하지 않는 것이 맞습니다.

하지만 이번 예제에서는 2가지 이유로 인라인 스타일을 사용했습니다.

첫째, 인라인 스타일로 style="width:90%" 이렇게 간단하게 넣을 수 있는데 css에 코딩하면

.item:nth-of-type(1) .progress-level { ... }
.item:nth-of-type(2) .progress-level { ... }
.item:nth-of-type(3) .progress-level { ... }
.item:nth-of-type(4) .progress-level { ... }

이렇게 코드가 많아지는 것 때문입니다.

두번째, 만약 프로그레스 레벨이 유동적인 것이라면 개발자가 코드를 심어야 하는데 css 코드에는 심을 수가 없습니다.
그래서 html 태그의 속성으로 넣으면 개발 코드를 심어서 90%라는 텍스트와 
style="width:90%" 를 연동시킬 수 있어서 그렇습니다.

class 값 한 번에 부여하는법

2

80

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

69

1

div#css-checker-widget의 해결방

1

60

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

79

2

강의듣는법

1

74

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

68

2

input checked 질문합니다.

0

76

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

140

2

Part 1 영상 안나옵니다

1

89

1

제이쿼리 작동이 안됩니다

1

199

3

강의 내용 질문있습니다.

1

120

2

일정 부분만 주석하는 방법

1

211

2

폰트어썸

1

134

2

인접선택자에 대한 질문드립니다!

1

129

2

delay 적용 안됨

1

134

1

rotateY(360deg)가 적용이 안됩니다!

1

186

2

세로이동할때 height값

1

138

2

폰트어썸이 안되요..

1

486

2

화면 정중앙에 오게끔 할수있나요?

1

169

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

229

2

넷플릭스 어코디언 예제 질문

1

105

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

157

1

active 관련 질문

1

147

2