-
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
랜딩사이트 제작 강의내용 질문드립니다.
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
코딩웍스(Coding Works)
지식공유자2022.06.15
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가지 특징)
답변 1