랜딩사이트 제작 강의내용 질문드립니다.
선생님 너무 좋은 강의 잘 보고 있습니다.
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가지 특징)
하드코딩으로 이미지맵(image map) 만들기
1
79
2
슬릭 슬라이더
1
148
2
position: fixed; 가 안먹혀요..뭐가 문제일까요?
1
168
1
반응형 fixed 안먹히는 문제
1
264
2
선생님
2
155
1
.news-thum .date 위치가 안맞아요
1
245
2
TypeIt - Welcome 부분이 적용이 안됩니다..
1
369
2
Scroll Reveal Animation 적용이 안되요
1
362
1
완성 후 각 섹션 display:none 주석 시 문제
1
384
3
브라우저를 줄일 때 화면 깨짐
1
632
2
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
1
341
1
제이쿼리 탭메뉴 클릭 질문
1
236
1
질문있습니다
1
549
1
질문있습니다.
2
646
2
슬릭슬라이더가 왜 안되는지 모르겠습니다
1
622
1
slick slider와 .ceo-content영역 겹침
1
720
1
span .badge 부분 참고하실분 하세요
2
333
1
플렉스를 안주고 그냥 패딩을 줘도 되지 않나요
1
331
1
창을 줄이면 위치가 이동되는 백그라운드 이미지
1
532
1
크롬창을 줄어들면 이미지가 작아짐
1
743
1
scroll behavior 오류
1
267
1
선생님 코딩좀 봐주세요..
1
402
3
왜 전 선생님과 화면이 다를까요?
1
368
3
따라했는데 이상합니ㅏㄷ..ㅠ
1
295
2





