인프런 커뮤니티 질문&답변
작성한 질문수
section 클래스
작성
·
208
0
강의에서는 section 태그안에 따로 main 클래스를 정의하셔서 section 태크에는 기본 css 적용 후 main 클래스에 배경 이미지의 css 적용을 하셨는데 main클래스에 적용한 css를 section 태그에 같이 적용해도 상관없는건가요? 차이점이 궁금해서 질문드립니다!!
그리고 지나간 부분이지만 header 태크 css 부분에서 top:0 과 left:0 은 어떠한 이유로 적용한지 알 수 있을까요?
(p.s 좋은 강의 잘 수강하고 있습니다!)
답변 1
1
안녕하세요. 잘 듣고 계시다니, 다행입니다.
말씀하신 부분은 영상에서 이유를 설명 드렸는데요.
해당 section 은 다른 section 과는 달리, section 전체 부분이 이미지로 덮어져야하고, 이를 다시 색깔이 다른 투명한 박스로 덮어씌워야 해서요. section 전체에 적용해야 하기 때문에, 부득이 section 내부에 div 태그로 main 클래스를 넣지 않고, section 자체에 main 클래스를 적용했고요. 이후에 div 로 main-container 에 색깔과 투명도를 주어, section 이미지 색상을 살짝 바꾸었습니다.
이 css 쪽은 뭐랄까? 어떤 공식적인 방법은 없다보니, 각자 사용하는 방법이 다르긴 한데요. 통상적으로 이미지를 이렇게 덮어씌워줄 때는 section 자체에 클래스로 적용하는 방식도 많이 사용되는 것으로 이해가 되고요. section 안에 따로 적용해도 크게 무리는 없지만, 작성을 어떻게 하느냐에 따라, 기대와 다른 표시가 될 수 있어서, 대표 이미지 부분은 이런식으로 적용하시는 것을 추천드립니다.
header 에서 top 과 left 를 0으로 설정한 부분은 position 을 fixed 로 하였기 때문이고, fixed 로 설정시는 top, right, bottom, left 값으로 위치를 지정하는 것이 일반적입니다. 이 부분도 영상에서 설명드린 부분입니다.
잘듣고 계시다니 ㅎㅎ 긍정적인 수강평도 부탁드리겠습니다.
감사합니다.