한솔 홈데코 퍼블리싱하기_3.매거진 영역1_(인프런 강좌 참고)

비주얼 쪽의 next, prev 아이콘을 쓰려고 한다.

지금 만들 것은 매거진 영역이니까 원래 있던 클래스 명은 바꾸겠다.

    <!-- 비주얼 영역 시작 -->
    <section class="visual slide"> <!-- slide 클래스 명 추가 -->
        <!--웹 접근성 지침에 의해서 디자인이 웹이 안보이더라도 마크업할 때 제목이 필요하다.-->
        <h2 class="hide">광고영역</h2>
        <a href="#a" class="prev">이전</a>
        <a href="#a" class="next">다음</a>
...
    </section> <!-- 비주얼 영역 끝 -->

/* 원래 코드 */
.visual .prev, /*공통 요소 묶기*/
.visual .next {
    display: block;
    position: absolute;
    top:50%; width: 25px;
    height: 47px;
    transform: translateY(-50%);
    background: url("../img/sp_com.png") no-repeat;
    color: transparent; /*이전,다음 글씨 없애기*/
}
.visual .prev {
    left: 82px; /*50+32 여백*/
    background-position: -128px -60px;
}
.visual .next {
    right: 82px; /*50+32 여백*/
    background-position: -158px -60px;
}
...
/* .visual .control로 시작하는 것들은 다 .slide ~ 로 수정한다. */

/* 변경 코드 */
.slide .prev, /*공통 요소 묶기*/
.slide .next {
    display: block;
    position: absolute;
    top:50%; width: 25px;
    height: 47px;
    transform: translateY(-50%);
    background: url("../img/sp_com.png") no-repeat;
    color: transparent; /*이전,다음 글씨 없애기*/
}
.slide .prev {
    left: 82px; /*50+32 여백*/
    background-position: -128px -60px;
}
.slide .next {
    right: 82px; /*50+32 여백*/
    background-position: -158px -60px;
}

/*슬라이드 밑 아이콘*/
.slide .control {
    position: absolute;
    left: 0;
    bottom: 55px;
    text-align: center; /*텍스트가 중간이 안된다. 왜냐? position이 absolute이면 블록의 가로 사이즈가 초기화되서*/
    width: 100%; /*그래서 가로사이즈를 100% 설정 필요.*/
}
.slide .control a {
    color: transparent; /*글자 투명하게*/
    /*border: 1px solid red; !*임시 선*!*/
}
.slide .control > div {
    display: inline-block; /*가운데 정렬 위해*/
    position: relative;
    padding: 0 45px 0 0;
}
.slide .control ul {
    display: inline-block; /*막대기가 한 줄로 보이게 함, 그리고 이것은 막대기 사이 여백이 있게 만드는 것이다.*/
    font-size: 0; /*이렇게 하면 막대기 여백이 없어진다. 이 상태에서 좌우 여백을 준다.*/
    position: relative; /*relative를 이용해 막대기 위로 올리기*/
    top: -7px;
}
.slide .control li {
    display: inline-block; /*막대기가 한 줄로 보이게 함, 그리고 이것은 막대기 사이 여백이 있게 만드는 것이다.*/
    padding: 0 3px; /*막대기 좌우 3px*/
}
.slide .control li a { /*선 만들기*/
    display: block;
    width: 50px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5); /*막대기 투명 (비활성화)*/
    border: none; /*선 테두리 없애기*/
}
.slide .control li.on a { /*막대기 흰색 (활성화)*/
    background: #fff;
}
.slide .control > div > div {
    position: absolute;
    right: 0;
}
.slide .control > div > div a {
    overflow: hidden; /*텍스트가 범위를 나가지 않도록 만듬*/
    display: inline-block;
    width: 8px;
    height: 9px;
    /*위 코드만 하면 사각형 박스와 막대기가 위 아래로 어긋난다.그건 div와 ul이 어긋난거다.*/
    background:url("../img/sp_com.png") no-repeat center;
    margin: 0 0 0 7px; /*오른쪽 여백 주기*/
    opacity: 0.5; /*불투명도*/
}
.slide .control > div > div a.on { /*아이콘 활성화되면*/
    opacity: 1; /*불투명도*/
}
.slide .control > div > div a.pause {
    background-position: -108px -60px;
}
.slide .control > div > div a.play {
    background-position: -108px -72px;
}
/*슬라이드 밑 아이콘 끝*/

.visual 에서 .visual .slide로 클래스 바

이제 visual 클래스를 안가지고 와도 되고 slide 클래스만 있으면 이전,다음 버튼과 control에 관한 버튼들을 응용할 수 있다.

 

이제 위 핑크 표시의 이미지 div 크기를 지정해야 한다. ( 전체 div를 감싸는 것 )

왼쪽의 div 하나 감싸고 ( 빨간 박스 ) / 오른쪽의 div 하나 감싼다. ( 초폭 박스, 리스트 영역 )

    <!-- 매거진 영역 시작 -->
    <section class="slide">
        <h2>MAGAZINE</h2>
        <p>한솔홈데코의 다양한 소식을 만나보세요.</p>
        <a href="#a" class="prev">이전</a>
        <a href="#a" class="next">다음</a>
        <div class="control">
            <div>
                <div>
                    <a href="#a" class="play on">시작</a>
                    <a href="#a" class="pause">일시정지</a>
                </div>
                <ul>
                    <li class="on"><a href="#a">한솔홈데코 비전</a></li>
                    <li><a href="#a">xxx 신상품</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                </ul>
            </div>
        </div>
        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left"></div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li><a href="#a"></a></li>
                </ul>
            </div>
        </div>
    </section> <!-- 매거진 영역 끝 -->

이 부분은 배경 이미지로 하면 안된다.

배경 이미지로 하게 되면 나중에 관리자 모드에서 슬라이드 관리를 할 때 CSS를 관리할 수 없기 때문이다.

그러므로 img 요소로 지정해야 한다.

    <!-- 매거진 영역 시작 -->
    <section class="slide">
...
        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left"></div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(21).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>가구재&gt;스토리보드 바디&gt;바디PET</strong>
                            테라코타
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(23).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>벽면재&gt;콜렉트월&gt;콜렉트월</strong>
                            우유니화이트
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(24).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>바닥재&gt;sb마루&gt;리얼텍스처</strong>
                            던내츄럴오크
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(18).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>도어재&gt;방문도어&gt;프리미엄도어</strong>
                            HMA-P01(디자인페이퍼)
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section> <!-- 매거진 영역 끝 -->

이제 제목, 내용, 링크를 넣겠다.

 

먼저 HTML에 내용 넣기.

    <!-- 매거진 영역 시작 -->
    <section class="slide">
        <h2>MAGAZINE</h2>
        <p>한솔홈데코의 다양한 소식을 만나보세요.</p>
        <a href="#a" class="prev">이전</a>
        <a href="#a" class="next">다음</a>
        <div class="control">
            <div>
                <div>
                    <a href="#a" class="play on">시작</a>
                    <a href="#a" class="pause">일시정지</a>
                </div>
                <ul>
                    <li class="on"><a href="#a">한솔홈데코 비전</a></li>
                    <li><a href="#a">xxx 신상품</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                    <li><a href="#a">설명텍스트</a></li>
                </ul>
            </div>
        </div>
        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left">
                    <h3>라솔라 APP<span>터치터치</span></h3>
                    <p>터치 한번으로 인테리어 시뮬레이션</p>
                    <a href="#a">자세히보기</a>
                </div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(21).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>가구재&gt;스토리보드 바디&gt;바디PET</strong>
                            테라코타
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(23).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>벽면재&gt;콜렉트월&gt;콜렉트월</strong>
                            우유니화이트
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(24).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>바닥재&gt;sb마루&gt;리얼텍스처</strong>
                            던내츄럴오크
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(18).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>도어재&gt;방문도어&gt;프리미엄도어</strong>
                            HMA-P01(디자인페이퍼)
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section> <!-- 매거진 영역 끝 -->

결과

디자인을 하겠다.

이렇게

 

    <!-- 매거진 영역 시작 -->
    <section class="slide">
        <h2>MAGAZINE</h2>
        <p>한솔홈데코의 다양한 소식을 만나보세요.</p>
        <a href="#a" class="prev">이전</a>
        <a href="#a" class="next">다음</a>
...
        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left">
                    <h3>라솔라 APP<span>터치터치</span></h3>
                    <img src="/img/thumbview%20(34).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                    <p>터치 한번으로 인테리어 시뮬레이션</p>
                    <a href="#a">자세히보기</a>
                </div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(21).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>가구재&gt;스토리보드 바디&gt;바디PET</strong>
                            테라코타
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(23).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>벽면재&gt;콜렉트월&gt;콜렉트월</strong>
                            우유니화이트
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(24).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>바닥재&gt;sb마루&gt;리얼텍스처</strong>
                            던내츄럴오크
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(18).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>도어재&gt;방문도어&gt;프리미엄도어</strong>
                            HMA-P01(디자인페이퍼)
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section> <!-- 매거진 영역 끝 -->

🤍 alt="" 

alt를 해놓고 빈칸으로 해놓으면 센스리더기가 읽지 않는다.

그래서 대체 텍스트를 안하더라고 꼭 alt 요소를 넣고 빈 칸을 넣어 센스리더기가 무시하도록 하는 것이다.

 

slide는 이전,다음,컨트롤 관련 부분 사용하려고 클래스를 만든 것이고
magazine 클래스를 따로 줘서 매거지 영역 부분에 디자인을 주겠다.
결구 다중 클래스를 써서 각각 영역의 디자인을 구분하는 것이다.

전체 이미지 깔아주고 배경색을 넣겠다.

 

화살표와 밑의 bar를 내리려면 position:relative; 를 사용한다.

/*매거진 영역*/
.magazine {
    background: #dfd9d1;
    position: relative;
}
/*매거진 영역 끝*/

화살표가 밑으로 내려간다. bar는 좀 더 밑에 있다.;

h2:MAGAZINE 부분 스타일주고 가운데로 정렬하기

.magazine h2 { /*h2 잡아서 스타일주고 가운데 정렬하기*/
    font-size: 30px;
    color: #000;
    text-align: center;
}

결과

h2 요소에 위 아래 여백 주기

포토샵 없어서 피그마로 함

.magazine h2 { /*h2 잡아서 스타일주고 가운데 정렬하기*/
    font-size: 30px;
    color: #000;
    text-align: center;
    padding: 44px 0 15px; /*상 좌우 하*/
}

결과

한 줄짜리에는 줄 간격이 다 존재한다.

이걸 없애야 내가 원하는 폰트 사이즈로 맞출 수 있다.

줄 간격을 초기화 시켜야한다.

/*매거진 영역*/
.magazine {
    background: #dfd9d1;
    position: relative;
}

.magazine h2 { /*h2 잡아서 스타일주고 가운데 정렬하기*/
    font-size: 30px;
    color: #000;
    text-align: center;
    padding: 44px 0 15px; /*상 좌우 하*/
    line-height: 100%; /*줄 간격 초기화*/
}
.magazine p {
    font-size: 14px;
    color: #3a3b36;
    line-height: 100%; /*줄 간격 초기화*/
}
/*매거진 영역 끝*/

깔끔

---

📌 이미지 덩어리 잡기

생각해보니 이 이미지는 텍스트들이 같이 들어가 있는 것이다. 일단 이미지만 추출하겠다.

        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left">
                    <h3>라솔라 APP<span>터치터치</span></h3>
                    <img src="/img/thumbview%20(34_dohee).png" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                    <p>터치 한번으로 인테리어 시뮬레이션</p>
                    <a href="#a">자세히보기</a>
                </div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(21).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>가구재&gt;스토리보드 바디&gt;바디PET</strong>
                            테라코타
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(23).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>벽면재&gt;콜렉트월&gt;콜렉트월</strong>
                            우유니화이트
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(24).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>바닥재&gt;sb마루&gt;리얼텍스처</strong>
                            던내츄럴오크
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(18).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>도어재&gt;방문도어&gt;프리미엄도어</strong>
                            HMA-P01(디자인페이퍼)
                        </a>
                    </li>
                </ul>
            </div>
        </div>

일단 이렇게 잘랐다.

.magazine .slide_box > div { /*슬라이드 박스의 자식을 잡아서 크기 지정*/
    width: 1180px;
    height: 430px;
}

뭔가 바꼈다.

overflow: hidden 적용 전

overflow: hidden 적용 후

list 영역의 이미지도 크기를 맞추겠다.

.magazine .slide_box .right li img {
    width: 82px;
    height: 82px;
}

여기서 하나씩 맞추겠다.

        <div class="slide_box"> <!-- 슬라이드 이미지 div 영역 잡기 / 각각의 slide가 들어갈 것이다. -->
            <div>
                <!-- 캡쳐본 상 빨간 박스 / 초록 박스 영역 나누기 -->
                <div class="left">
                    <div> <!--텍스트 영역-->
                        <h3>라솔라 APP<span>터치터치</span></h3>
                        <p>터치 한번으로 인테리어 시뮬레이션</p>
                        <a href="#a">자세히보기</a>
                    </div>
                    <img src="/img/sample.jpg" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                </div>
                <!-- 리스트 영역이니까 div로 해도 되록 ul로 해도 된다. -->
                <ul class="right">
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(21).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>가구재&gt;스토리보드 바디&gt;바디PET</strong>
                            테라코타
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(23).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>벽면재&gt;콜렉트월&gt;콜렉트월</strong>
                            우유니화이트
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(24).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>바닥재&gt;sb마루&gt;리얼텍스처</strong>
                            던내츄럴오크
                        </a>
                    </li>
                    <li>
                        <a href="#a">
                            <img src="/img/thumbview%20(18).do" alt=""> <!-- 이미지 옆에 설명글이 있으니 대체텍스트는 넣지 않는다. -->
                            <strong>도어재&gt;방문도어&gt;프리미엄도어</strong>
                            HMA-P01(디자인페이퍼)
                        </a>
                    </li>
                </ul>
            </div>
        </div>

 

/*매거진 영역*/
.magazine {
    background: #dfd9d1;
    position: relative;
}

.magazine h2 { /*h2 잡아서 스타일주고 가운데 정렬하기*/
    font-size: 30px;
    color: #000;
    text-align: center;
    padding: 44px 0 15px; /*상 좌우 하*/
    line-height: 100%; /*줄 간격 초기화*/
}
.magazine p {
    font-size: 14px;
    color: #3a3b36;
    line-height: 100%; /*줄 간격 초기화*/
}

.magazine .slide_box > div { /*슬라이드 박스의 자식을 잡아서 크기 지정*/
    width: 1180px;
    height: 430px;
}
.magazine .slide_box .left {
    float: left;
    width: 800px; /*왼쪽 영역 크기 잡기*/
    height: 430px;
    overflow: hidden; /*요소의 지정 크기 안에서 넘치지 않게 잡음*/
}
.magazine .slide_box .left img {
    /*부모 left 크기 800px에 맞춰짐,
    세로 사이즈는 이미지에 본래 사이즈에 비례해서 맞춰진다. */
    width: 100%;
}
.magazine .slide_box .left div {
    background: rgba(0,0,0,0.5); /*투명도*/
    position: absolute;
    right: 0;
    top: 0;
}
.magazine .slide_box .right {
    float: right;
}
.magazine .slide_box .right li img {
    width: 82px;
    height: 82px;
}
/*매거진 영역 끝*/

---

- (강좌)_인프런_웹퍼브리셔가 알려주는 실무 웹사이트 따라만들기 Season1

https://www.inflearn.com/

[무료] 웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1 - 인프런 | 강의