inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

Festival Section 상세 퍼블리싱

justify-content :center

298

air_guri

작성한 질문수 24

1

선생님

저는 html의 통일성을 우선시해서 inner를 지우지 않고 각 섹션별로 지우지 않았습니다.

이후 각 section에 flex를 넣었는데 justify-content가 적용이 안되어서 우선은 text-align : center로 가운데 맞췄는데 왜 안되는지 알 수 있을까요?

 

        <section class="callaction">
            <div class="inner">
                <h2>The Most Simple & Powerful Way<br> to book your trip</h2>
                <a href="#">GET EARLY ACCESS</a>
            </div>
        </section> <!-- callaction -->
 
.callaction{
    background: url(../img/scenery-g46a0830e8_1920.jpg) no-repeat bottom center;
    height: 600px;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.callaction > .inner{
    position: relative;
}
.callaction h2{
    color: white;
    font-size: 48px;
    line-height: 2;
    margin-bottom: 20px;
    font-weight: 300;
}
.callaction::before{
    content: "";
    background: linear-gradient(to right bottom, transparent, skyblue);
    width: 100%;
    height: 100%;
    position: absolute;
}
.callaction a{
    font-size: 20px;
    background: white;
    color: dodgerblue;
    padding: 10px 20px;
    border-radius: 20px;
}
.callaction a:hover{
    background: dodgerblue;
    color: white;
}

 

 

* 선생님 푸터영역도 강좌를 보다가 flex를 1: 1: 2비율로 했는데 community영역이 1/4의 영역을 넘어 너무 크게 나오는데 이것도 추가적으로 코드랑 화면 올리겠습니다. 감사합니다.

 

        <footer>
            <div class="inner">
                <div class="footer_content">
                    <ul class="community">
                        <li><a href="#">Community</a></li>
                        <li><a href="#">Subscribe</a></li>
                        <li><a href="#">Give A Gift</a></li>
                        <li><a href="#">Customer Service FAQ</a></li>
                        <li><a href="#">Access Your Subscription</a></li>
                    </ul>
                    <ul class="netowrk">
                        <li><a href="#">Network</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms Of Service</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Jobs</a></li>
                    </ul>
                    <ul class="'help">
                        <li>Help Preserve This Project</li>
                        <li>We may earn a commission if you purchase an item </li>
                        <li>featured on our site.</li>
                        <li>Copyright ©  2020 CodingWorks. All rights reserved.</li>
                    </ul>
                </div> <!-- footer_content -->
            </div> <!-- inner -->
        </footer>
 
 
 
footer{
    background: black;
}
.footer_content{
    display: flex;
}
.footer_content ul{}
.footer_content ul li{
    text-align: center;
    border: 1px solid white;
}
.footer_content ul li a{
    color: #959595;
}
.community{
    flex: 1;
}
.network{
    flex: 1;
}
.help{
    flex: 2;
}
.footer_content ul li:first-child a{
    color: white;
}

flex 반응형-웹

답변 1

1

코딩웍스(Coding Works)

코드와 캡쳐화면 올려주세요~

0

air_guri

선생님 글 수정해서 올렸습니다.

뭐가 잘못되어있는지 봐주시면 감사하겠습니다.

0

air_guri

앗 선생님 제가 착각했네요.

justify content내 들어간 글씨가 left로 되어있어서 옆으로 붙어있다고 생각했네요

footer영역역시 갑자기(?) 적용되어서 잘 해결했습니다.

0

코딩웍스(Coding Works)

제가 개인적으로 좀 바빴습니다. 양해 부탁드려요.
질문 답드리려고 했는데 해결하셨군요~ 다행이네요~!!

0

air_guri

선생님 제가 조금 더 응용을 해보고 싶은데 

festival영역에 a를 눌렀을 시  festival background와 a태그의 background 제가 선택한 곳에 색깔을 주고 싶습니다. (웹디자인실기 공지사항이랑 갤러리탭처럼 클릭시 변경과 같은 형태라 생각하시면 될 것 같습니다.)

이럴 경우 festival영역과 a태그에 active를 만든 뒤jqeury로 addClass로 하면 되는건가요? 

 

* 하다보니 궁금한게 많이 생겨서 한번에 남기게 됩니다 ^^...

1. 익스플로어가 종료되는 시점에서 scroll-behavior로 간단하게 써도 되는가요? 또한 scroll-behavior는 속도제어는 따로 없는가요?

 

2. 각 섹션별로 위아래를 패딩을 주다보니 nav를 클릭시 조금 잘리는 현상이 발생하는데 이럴경우 어떻게 하면 좋을까요??

 

 

0

코딩웍스(Coding Works)

물론 addClass로 하셔도 되지만 배경색 정도 바꾸는 간단한 정도는 아래와 같이 CSS 메서드를 사용하시면 됩니다.

 

$('.btn a:first-child').click(function(){

    $('.festival').css({

  'background-color': 'red',

  'font-size': '15px'

})

})

 

scroll-behavior는 IE에서는 안되구요 속도 조절 옵션이 없어요.

속도 조절하시려면 아래 코디웍스 유튜브 영상 참고하세요.

플러그인 방식은 IE에서도 잘 됩니다.

 

a태그 앵커 만들고 2가지 방식으로 Smooth Scrolling 하기(제이쿼리 플러그인, CSS 속성)

https://youtu.be/dtDzWdBElg8

0

air_guri

늦은 시간 답변해주셔서 감사합니다!

가로스크롤

1

477

1

상위 태그 영역 무시 하는 방법

1

858

2

반응형 적응형 구분

2

819

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

369

1

슬릭 슬라이더 버튼

1

383

1

slick 모바일로 변환했을때..

1

616

1

x scroll 이 왜 생기는 걸까요?

1

880

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

258

1

모바일에서 이미지 짤림 현상

1

2757

2

질문 있습니다

1

248

1

안녕하세요

1

265

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

294

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

398

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

425

2

slick slider 하는데 패딩이 안먹혀요

1

777

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

327

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

263

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

311

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

214

1

그 반응형 질문 있습니다

1

230

1

질문드립니다 강사님

1

303

2

flex 레이아웃 배치 질문있습니다.

1

227

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

208

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

980

1