inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기5

section 클래스

210

임성규

작성한 질문수 26

0

강의에서는 section 태그안에 따로 main 클래스를 정의하셔서 section 태크에는 기본 css 적용 후 main 클래스에 배경 이미지의 css 적용을 하셨는데 main클래스에 적용한 css를 section 태그에 같이 적용해도 상관없는건가요? 차이점이 궁금해서 질문드립니다!!

그리고 지나간 부분이지만 header 태크 css 부분에서 top:0 과 left:0 은 어떠한 이유로 적용한지 알 수 있을까요?

(p.s 좋은 강의 잘 수강하고 있습니다!)

HTML/CSS javascript es6

답변 1

1

잔재미코딩 DaveLee

안녕하세요. 잘 듣고 계시다니, 다행입니다.

말씀하신 부분은 영상에서 이유를 설명 드렸는데요.

해당 section 은 다른 section 과는 달리, section 전체 부분이 이미지로 덮어져야하고, 이를 다시 색깔이 다른 투명한 박스로 덮어씌워야 해서요. section 전체에 적용해야 하기 때문에, 부득이 section 내부에 div 태그로 main 클래스를 넣지 않고, section 자체에 main 클래스를 적용했고요. 이후에 div 로 main-container 에 색깔과 투명도를 주어, section 이미지 색상을 살짝 바꾸었습니다.

이 css 쪽은 뭐랄까? 어떤 공식적인 방법은 없다보니, 각자 사용하는 방법이 다르긴 한데요. 통상적으로 이미지를 이렇게 덮어씌워줄 때는 section 자체에 클래스로 적용하는 방식도 많이 사용되는 것으로 이해가 되고요. section 안에 따로 적용해도 크게 무리는 없지만, 작성을 어떻게 하느냐에 따라, 기대와 다른 표시가 될 수 있어서, 대표 이미지 부분은 이런식으로 적용하시는 것을 추천드립니다.

header 에서 top 과 left 를 0으로 설정한 부분은 position 을 fixed 로 하였기 때문이고, fixed 로 설정시는 toprightbottomleft 값으로 위치를 지정하는 것이 일반적입니다. 이 부분도 영상에서 설명드린 부분입니다.

잘듣고 계시다니 ㅎㅎ 긍정적인 수강평도 부탁드리겠습니다.

감사합니다.

교육기간을 연장할 수 있는지 문의드립니다.

0

36

1

메일 확인부탁드립니다

0

56

1

CodeSandbox Vanilla 질문있습니다

0

59

1

part1을 수강하지 않아도 지장이 없다 하셨는데

0

106

1

강의에 관해 문의 드립니다.

0

90

1

메일확인 부탁드립니다.

0

90

1

14강 - 72,73번 강의 영상이 동일한거 같습니다.

0

105

1

Symbol 관련 테스트 코드 실행 결과 문의

0

139

1

호환성 관련 태그

0

119

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

136

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

144

1

div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요

0

86

1

강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠

0

117

1

메일 확인 부탁드립니다.

0

146

1

메일 확인 부탁드립니다

0

150

1

특별한 형태의 javascript배열에서

0

135

1

메일 확인부탁드립니다!

0

160

1

codesandbox 업데이트..

0

144

1

pdf 파일에 있는 링크주소로 들어가지지가 않습니다.

0

266

2

강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~

0

151

1

removeEventlistener 를 왜 해주어야 하는지

0

227

1

100vw 관련 질문

0

333

2

VS CODE html:5 <tab>기능이 안됩니다

0

345

1

[모던웹페이지 만들기9](1:40)class-desc 카드부분관련

0

245

2