• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

랜딩사이트 제작 강의내용 질문드립니다.

22.06.14 20:27 작성 조회수 157

1

선생님 너무 좋은 강의 잘 보고 있습니다.

1.강의 내용이 편집이 된건지, 갑자기 클래스명이 바뀌는 부분이 있어서요.

-----------------------------------------------------------------------

반응형 앱 오피셜 랜딩사이트 제작 Header & Welcome 섹션

welcome 섹션 제작(슬라이더)

0분 45초에는

<section class="welcome">

<div class="slideshow-area">

                <img src="images/slide-welcome-01.png">

                <img src="images/slide-welcome-02.png">

                <img src="images/slide-welcome-03.png">

였다가, 

16분 24초에는 

<div class="slideshow">

<img src="images/slide-welcome-01.png">

                <img src="images/slide-welcome-02.png">

                <img src="images/slide-welcome-03.png">

클래스명이 slideshow-area 에서 slideshow로 단순히 바뀐 걸로 이해하면 될까요?

이번 강의에서는 css부분 내용이 전혀 없었는데요. welcome-heading 부분에 보더가 되어서 강의에서는 보여지는데요.

css는 다음편 강의에서 해주시는 거겠죠?

-------------------------------------------------------------------------------------------------

2. header 부분에서요. 보통 실무에서 웹사이트 제작할 때에 header section ..등등 각 부분마다 미리 높이값은 정하지 않고 하는 편인가요? 그런데 예를 들어, 웹디자인기능사 실기시험 같은 경우는 각각 높이가 정해져서 지침에 나와서 거기에 맞춰서 만들어줘야 하더라고요. 만약에 header높이값이 미리 고정해서 만든다고 하면, padding-top: 30px; padding-bottom: 15px;등등으로 높이값이 늘어날 텐데요. 이렇게 header 높이값이 정해져 있을 때는 어떤 식으로 조절해주는 팁 같은 게 있을까요? line-height같은 방법일까요..?

-------------------------------------------------------------------------------------------------

3. 그리고 position: fixed; 이 부분은 제가 공부가 부족해서 이해를 못하는 것 같은데요.

헤더에 position: fixed;를 주는 이유가 하단에 내용이 많아서 스크롤바를 내리면 상단의 메뉴바가 안 보여서 고정해주기 위해서 주는 걸로 알고 있었는데요.

이번 같은 경우에는, 헤더 부분에도 슬라이더를 적용하기 위해서 fixed를 해주는 건가요?

header에 position: fixed;를 주면 너비가 인라인블록으로 줄어들어서 width:100%;를 주고

z-index값을 주니깐 헤더부분에도 슬라이드가 적용된다고 알려주셨는데요.

width:100%를 주지 않으니깐 헤더부분이 .header-inner {margin: auto;}가운데 정렬도 안 되는 것 같더라고요.

왜 너비값 100%주지 않으면 가운데정렬 적용이 안 되는지 잘 모르겠고,

fixed를 주면 너비가 인라인블록으로 줄어든다.. 이 부분도 이해가 잘 안되고요..

position부분을 공부한다고 하긴 했는데 많이 부족한가 봅니다..ㅜㅜ

선생님 어느 강의를 다시 들으면 이 부분이 이해할 수 있을까요?

너무 어렵고 어렵지만은, 그래도 하나씩 배워가는 기쁨이 큰 것 같습니다.

질문이 너무 길어서 죄송합니다.

선생님께서 언제나 티칭해주시니 너무 든든합니다. 감사합니다.

답변 1

답변을 작성해보세요.

1

1. 순차적으로 진행하시면 다 정상적으로 완성됩니다.

 

2. header의 경우 높이값이 필요한 경우 정하면 됩니다. 하지만 높이가 정확해야 하는 경우가 아니면 그냥 패딩 상하로 조절하셔도 됩니다.

 

3. 헤더에 position: fixed; 주는 이유는 스크롤을 했을 때도 헤더에 있는 네비게이션이 따라오도록 하기 위해서 입니다. 그리고 헤더에 width:100% 줘야 하는 부분은 diplay 속성에 관한 내용을 보시면 아실 수 있어요. 간략하게 말씀드리면 모든 html 엘리먼트는 position: fixed 또는 absolute를 주면 인라인 블록으로 디스플레이 속성이 변경됩니다. 곧 너비가 컨텐츠에 양에 맞게 줄어듭니다. 그래서 너비를 100%로 주어야 합니다. 

 

3번의 디스플레이 속성은 너무나도 중요한 부분이니까 아래 블로그와 영상을 꼭 숙지하세요.

 

퍼블리싱의 모든 것! HTML 인라인요소, 블록요소, 인라인블록

https://www.inflearn.com/blogs/376

 

display 속성(inline, inline-block, block 4가지 특징)

https://youtu.be/qTgqyNRcos0

선생님 봐주셔서 정말 감사합니다. display속성 다시 공부하고 와야겠어요!!