[레이아웃 연습]01.삼성전자

공부에 끝은 없는법.
레이아웃 잡는 연습좀 하려고한다.
디테일하게는 정리 안하고 부분부분만 따로 정리해보려고 한다.

오늘의 사이트 / 원본

오늘의 사이트는 바로 삼성전자

레이아웃 퍼블리싱 완성본

퍼블리싱 과정

section1. 특별기획전

원본 사이트 코드를보면 html+css로 레이아웃 잡은게 아니라 이미지로 넣었더라.
나는 일단 레이아웃 연습을 위해 하는거라 이 부분도 html+css로 작성했다.
평소에는 flex를 많이 쓰는데, 이런 배치는 grid가 편하기 때문에 grid를 사용했다.

<!--html 마크업-->
<section class="special">
        <div class="wrap">
            <h2 class="hide">특별기획전</h2>
            <ul>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
            </ul>
            <div class="item-wrap">
                <div class="item-box left">
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                </div>
                <div class="item-box right">
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                </div>
            </div>
        </div>
    </section>

/* css 코드 */
.item {
    min-height: 100px; /* 최소 높이값 */
}

/* special */
.special ul {
    display: flex;
    justify-content: center;
}

.special ul li {
    padding: 0 5px;
    margin-bottom: 50px;
}

.special .item-wrap {
    display: flex;
    justify-content: space-between;
}

/* ==== 유심히 볼 부분! ==== */
.special .item-box {
    position: relative;
    display: grid;  
    grid-template-columns: 1fr 1fr;
    gap: 10px;  
    width: 48%;
}

.special .item-box.left .item:nth-child(1) {
    grid-row: 1 /  3;
}

.special .item-box.left .item:last-child {
    grid-column: 1 /  3;
}
/* ===================== */
.special .item {
    background-color: #c4c4c4;
}

여기서 유심히 볼 부분은 따로 체크해놨다!
gird를 이용해서 아래 그림(그림판주의)과 같이 배치한다음에 빨간색 영역과 파란색 영역을 합치면된다.

.special .item-box.left .item:nth-child(1) {
    grid-row: 1 /  3;
}

.special .item-box.left .item:last-child {
    grid-column: 1 /  3;
}

grid설명은 1분코딩님이 잘 정리해놨으니 참고해도 좋을듯하다 https://studiomeal.com/archives/533

---

section2. 스토리 영역 li에 counter 넣기

원본 사이트에 보면 li앞에 숫자로 넘버링이 되어있는데 물론 span같은걸로 직접 입력해줄수도 있겠지만 나는 css counter함수(?)를 이용해서 작성해보았다.

html마크업은 아래와 같고..

<section class="story">
        <div class="wrap">
            <div class="left">
                <h2>스토리<br>#DoWhatYouCant</h2>
            </div>
            <div class="content">
                이미지
            </div>
            <div class="right">
                <ul>
                    <li>
                        리스트
                        <a href="#none">더 알아보기</a>
                    </li>
                    <li>리스트</li>
                    <li>리스트</li>
                    <li>리스트</li>
                </ul>
            </div>
        </div>
    </section>

css는 counter부분만 가져왔다!

.story .right ul {
    width: 100%;
    counter-reset: numbering;
}

.story .right li {
    position: relative;
    padding: 22px 0 22px 45px;
    border-top: 1px solid #c4c4c4;
}

.story .right li::before {
    position: absolute;
    top: 22px;
    left: 20px;
    counter-increment : numbering; 
    content : '0' counter(numbering);
}

Css counter사용법

일단 counter란.. 말그대로 카운팅을 해주는 속성이다. 자동으로 넘버링이 된다! 애초에 순서가 있는 목록을 작성하려면 ol을 쓰면 되지 않을까? 싶기도 한데.. counter을 사용해서 순서를 주는게 좀더 자유롭게 작성할 수 있는것같다.
counter 사용법은 부모요소에 counter-reset을 주어 초기화 시켜주고, 자식요소에 counter-increment을 주어 값을 증가시켜주면 된다.

.parenet {
    counter-reset: numbering 0;
    /* counter의 이름 : numbering, 초기값 0*/
}

.child::before {
	counter-increment : numbering;
    /* numbering의 카운터를 1씩 증가,
      counter-increment : numbering -1;으로 쓰면 -1씩 감소,
      counter-increment : numbering 2;면 2씩 증가
    */
    content : counter(numbering); /* counter의 값을 표시*/
}

이런식으로 사용할 수 있고, 나는 01 02 03 이렇게 0 + 카운트 값으로 나타내고 싶어서 counter(numberig)앞에 0을 붙여줬다.

.story .right li::before {
    counter-increment : numbering; 
    content : '0' counter(numbering);
}

---

나머지는 특별한게 없어서.. 정리안할거지롱!
레이아웃 잡은김에 그냥 마저 퍼블리싱해야겠다.
그럼 20000