TIL : 웹퍼블리싱 CSS 4회 (4-5)

1. 콘텐츠 목록 스타일 (49)

이제 남은걸 해보자

(1) 메뉴 목록 스타일

1)

목록이 눈에 보이는 보이는 전부가 아니다.

nav 태그와 ul태그를 구분해서 보자 이런형태로 태그가 갖추어져있는지 확인하자

 

이미지를 클릭해서 이동하는게 아니라, 링크를 클릭해서 이동하게 해야한다

이 구조를 반영하는 모양을 만들자

<nav>
    <h1">인기메뉴</h1>

        <li>
            <img height="100" src="./images/17.jpg" alt="딸기청">
            <a target="_blank" href="./menu/detail.html">딸기청</a>
        </li>

        <li>
            <img height="100", src="./images/8.jpg" alt="아메리카노">
            <a href="./menu/detail.html">아메리카노</a>

        </li>

        <li>
            <img height="100", src="./images/28.jpg" alt="버터쿠키"> 
            <a href="./menu/detail.html">버터쿠키</a> 
        </li>

</nav>

a태그안에 이미지를 밖으로 보내고

이미지를 먼저 제시하고, 태그를 넣어주자 

2)

<nav class="top-menu">
    <h1" class="d-none">인기메뉴</h1>

    <ui class="top-menu-list">
        <li>
            <img height="100" src="./images/17.jpg" alt="딸기청">
            <a target="_blank" href="./menu/detail.html">딸기청</a>
        </li>

        <li>
            <img height="100", src="./images/8.jpg" alt="아메리카노">
            <a href="./menu/detail.html">아메리카노</a>

        </li>

        <li>
            <img height="100", src="./images/28.jpg" alt="버터쿠키"> 
            <a href="./menu/detail.html">버터쿠키</a> 
        </li>
    </ui>    
</nav>

 

여기다가 ul로서 아래에있는거를 중첩되는 모양이 구조로 달라진경우에 염두해두면

top-menu-list 로 이름을 부여하고 아니라면 필요가 없다

 

3)

d-none 는 무엇일까?

스타일링을 할때 그런것이 있다.

style.css 는 표준안을 마련한것이 마음에 들지않을 경우 하는것이다 이건 reset으로 하자

 

실제로 스타일하다보면 방의 제목들이 나타나는게 많을까 가려지는게 많을까? 가려지는게 많다 

많은경우 제목은 있으나 안보이게 할 수있다. 

 

<index.css>

.top-menu > h1{
    display: none;
}

/* //==== <btn content> ========================= */

반복적인걸 이렇게 매번 하는게 좋을까?

display을 none으로 하는것을 줄여서 d-none로 할 수있다

 

그리고 d-inline으로도 할 수있다.

 

그리고 이런거는 <style.css> 에다가 저장해준다

/* ==== reset =================== */
body{
    margin: 0px;
}

a{
    text-decoration: none;
}

/* ==== utils =================== */

.d-none{

    display: none;

}

/* ==== display =================== */

.d-inline{
    display: inline;
}

이렇게 설정해주고 html에다가 클래스명으로 넣어주면된다

 

<nav class="top-menu">
<h1 class="d-none">인기메뉴</h1>

우리는 앞으로 d-none처럼 자주사용되는것은 만들것이다

 

 

(2) 과거 방식으로 만들어보는 목록 스타일 : 메뉴 항목을 수평으로 배치하기

1) 

기본적으로 li 가 가지는 디스플레이는 말단블럭이다 아래로 내려가있다 CSS3.0 에 레이아웃이 등장했는데 그전에는 없었다

레이아웃은 어플리케이션 개발이위한것이고, 기존에는 신문 문서에 해당하는 박스가 등장했다 테이블이나 목록이냐 등으로 나온다 (CSS2.0)

그러나 이게 된다고 곧바로 쓰이는게 아니다 그중에서 flex는 빨리반영됐는데 grid는 최근에 반영됨

이전에는 박스모델이 아니라 텍스트기반으로 하는 'CSS1.0'에 있었다 

CSS3.0부터 일반 어플리케이션에 있는게 대거 출시가 되었다.

 

박스를 오른쪽으로 나열할수없어서 꼼수로 이용했다. 위처럼 

 

2)

이렇게 했음

그런데 문제가 발생했다. 얘가 회색 밖으로 나왔다

원래는 상단을 기준으로 내려갔는데, 방향성을 왼쪽으로 턴해서 인라인처럼 오른쪽으로 가게되었다 더이상 아래쪽으로 가는게 없어졌다

 즉 부모박스는 자식이없어진것이다.

 

3)

그럼에도 불구하고 걸쳐있는건 margin때문이다

 

 

4)

ul에다가 마진 패딩 둘다 0으로해준다 / li 스타일을 none 해서 없애준다.

과거에 한정해야하지만 요새도 이렇게 쓰는 사람들이 있다

 

5) 

그런데 부모가 자식과 떨어져 버리는 결과가 발생했다 (float 결과)

자식을 감싸는 방식은 inline방식인데 여기를 d-inline 을 하면 감쌀수있게되었다.

 

한편 d-inline-blick 도 많아서 미리 만들어놨음

 

6)

<실습>

.top-menu > ul{
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}

.top-menu li{
    float: left;
    list-style-type: none;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

.top-menu li > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

이렇게 

<nav class="cafe">
    <!-- 나누어진 부분에 우두머리는 2번으로 하자  -->
        <h1> 
            부안에 오면 꼭! 들리는 카페
        </h1>

        <div>
            <a href="" class="btn-cafe-menu-all">
            전체메뉴
            </a>
        </div>     

    <nav class="top-menu d-inline-block">
        <h1 class="d-none">인기메뉴</h1>

        <ul class="d-inline-block">
            <li>
                <img height="100" src="./images/17.jpg" alt="딸기청">
                <a target="_blank" href="./menu/detail.html">딸기청</a>
            </li>

            <li>
                <img height="100", src="./images/8.jpg" alt="아메리카노">
                <a href="./menu/detail.html">아메리카노</a>

            </li>

            <li>
                <img height="100", src="./images/28.jpg" alt="버터쿠키"> 
                <a href="./menu/detail.html">버터쿠키</a> 
            </li>
        </ul>    
    </nav>

여기다가 잘 적용을 시켜준다

 

부모자식관계 고려해서 바꾸어준다

 

7)

그런데 이미지도 있지만 a태그로 텍스트들도 있다.

 

.top-menu li > a{
    display: inline-block;
    width: 100%;
    height: 100%;

    border: 1px solid green;
}

초록색 선으로 블럭이 잡혀있다 

 

 

하지만 카페아메리카노의 경우 두줄로 나와버린다 

이경우 line-height를 넣어서 가운데로 옮겨버린다.

.top-menu li > a{
    display: inline-block;
    width: 100%;
    height: 100%;

    border: 1px solid green;
    text-align: center;
    line-height: 100px;
}

'노' 가 생력되었다.  왜냐하면 아래쪽에 있다

한줄인경우에는 수직가운데 정렬 을 하는데 문제가 있다.

 

 

8)

이런거 때문에 등장한게 flex gird이다. (다음시간에 자세히 설명)

.top-menu li > a{
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
    /* line-height: 100px; */

    display: flex;
    align-items: center;
    justify-content: center;
}

align-items 로 수직 가운데로 나두고 / justify-content 를 수평 가운데로 나둔다 

이 경우에 text-align 필요없지안은가? 얘는 텍스트의 가운데 정렬이다 위는 전체의 가운데정렬이라면!

 

즉 쓰임새가 다르다 

컨텐트의 정렬 뿐만아니라 박스의 정렬 박스 배치를 도와줄수있는 새로운 디스플레이방식이 등장한다

 

9)

그러나 이러한 태그는 실제로 화면에서 안보이게 해야한다.

.top-menu li > a{
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
    /* line-height: 100px; */

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #0006;
    color: #fff;

}

이렇게 검은바탕에 흰 글씨를 넣어준다.

그리고 이렇게 본래영역을 나온 overflow를 가려준다

.top-menu > ul{
    margin: 0;
    padding: 0;
    border: 1px solid blue;

    overflow: hidden;
}

원래 가지고 있을 모양이 이런 모양이 아니다 

 

10)

위에서부터 메뉴 선택은 간격이 벌어져있다 

이 경우 경계선과 컨텐트의 간격을 패딩이라고 한다 / 박스와 박스사이 간격은 마진이다.

이런 박스만 밀면되기때문에 마진이다.

 

.top-menu li{
    float: left;
    list-style-type: none;
    width: 100px;
    height: 100px;
    border: 1px solid red;

    margin-left: 20px;
}

하지만 이런경우 예외도 고려해야한다 즉 시작할때나 끝은 다른값 (위 24px)를 준다

 이런경우는 먼저 보편적인걸 하고, 따로 잡아주어서 스타일 오버라이드를 한다 

 

.top-menu li{
    float: left;
    list-style-type: none;
    width: 100px;
    height: 100px;
    border: 1px solid red;

    margin-left: 20px;
}

.top-menu li.first{
    margin-left: 24px;
}

li.firtst 방식으로 해서 오버라이드 한다 

이경우 순서는 중요하다 전체를 먼저하고 특정한것을 따로해주게끔 한다

 

이런경우는 워낙많이 사용되어 명시적으로 클래스 명을 선언하지않아도 사용하는방법이 있다

바로 pseudo-classes 라고한다  (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

 

내가 가졌던 자식중에 첫번째 자식이지만 헷갈리는것을 유의하자 

first-child는 li에다가 그냥 첫번째 이다

 

.top-menu li{
    float: left;
    list-style-type: none;
    width: 100px;
    height: 100px;
    border: 1px solid red;

    margin-left: 20px;
}

.top-menu li:first-child{

    margin-left: 24px;

}

이렇게 수월하게 가능하다 

 

11) 세로 간격 31 px 만들기

부모박스와의 간격은 패딩이다 (위에있는 nav박스에다가 패딩을 주변된다)

이 경우 부모태그의 nav의 크기를 키울지 아니면 컨텐트 박스의 크기를 줄이는것 중에 선택해야한다

 

nav입장에서 컨텐트 박스는 ul이다.

ul이 커지는거에 저절로 같이 커지게 하고싶다. => 패딩을 하기

안에 컨텐트 사이즈가 상관없다 나는 내크기 가지겠다 => nav 별도 크기 지정

 

'전자'로 한다

.top-menu{
    padding: 31px 0;
    background-color: #fff6;
}

.top-menu > ul{
    margin: 0;
    padding: 0;
    /* border: 1px solid blue; */

    overflow: hidden;
}

 

12) 이제 리스트를 6개로 제대로 추가해보자

이것을 내려가게 하기보다 오른쪽으로 가게 하고싶다. 이전에는 안됐는데 이제는 flex로 가능하다

일단은 1000px로 설정하자

.top-menu > ul{

    width: 1000px;

    margin: 0;
    padding: 0;
    /* border: 1px solid blue; */

    overflow: hidden;
}

 

 

(2) 상태에 따른 스타일

1)

 

마우스 올렸을 때 텍스트가 나오는게 있다 이와같이 CSS에서는 두가지상태를 모두 만들어두어야한다

JS 활용해서 트리거를 마련해야한다

 

JS나 슈도 방식 두가지가 있다.

 

a가있는데 이경우 아래에 숨어있는 것을 끌어올리게 해야한다

margin-top 조정 / position 기능 / transrate 기능

어떤 것을 써도 되지만 장단점이있다.

 

2) margin-top 

margin-top 은 + 값으로 하면 벌어지고 - 하면 좁혀진다 

그런데 좀 이상하다 위로올라가지만 덮어진 색이 없어진다

 

마진의 문제점 중하나가 형동생이 겹쳐진경우 누가 위에? 동급인경우인데....

동생이 올라간다 (무조건 나중에 태어난 녀석이 올라감)

컨텐트와 달리 배경은 형을 이기지못하고 배경은 아래로 깔린다. 

이렇게 검은색 배경은 올라가지 못한다

 

결국 margin은 적합한 솔루션이 아님

 

3) position

 

top 을 0px 로 두면 그대로 50을 두면 위로부터 내려간다 

-50 하면 그림까지 같이올라간다

 

 

마진은 원래 겹치기 위한것이 아니지만 얘는 겹치기 위한것이기도 하다. 그래서 이게 좋다

<현재가장 바람직한 옵션>

.top-menu li > a{
    width: 100%;
    height: 100%;
    /* border: 1px solid green; */
    text-align: center;
    /* line-height: 100px; */

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #0006;
    color: #fff;

    position: relative;
    top: -100%;


}

-50% 하면 절반만 올라가니까 -100%하면 전체가 올라간다

 

4) translate

추후에!!

 

5)

.top-menu li > a{
    width: 100%;
    height: 100%;
    /* border: 1px solid green; */
    text-align: center;
    /* line-height: 100px; */

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #0006;
    color: #fff;


}

.top-menu li > a.hover{

    position: relative;
    top: -100%;
}

hover 를 만드어준다.

원래같으면 바꿔주는것을 JS 의능력이 필요했지만

hover가 슈도클래스로 존재한다

 

이렇게 하면 마우스가 올라가면 바뀐다 그런데 a에 올라간다는게 말이안된다

a는 대상이지 hover의 대상이 아니다 

 

.top-menu li :hover > a {

    position: relative;
    top: -100%;
}

이렇게  부모에다가 준다.

 

 

6)

지금 중요한것은 스타일은 여러상태를 만든다 . CSS로!

결국 JS는 상태가 바뀌게 클래스만바꾸는 것임

이러면 JS 이용 필요가없다 

 

목록 배치하는데 포지션관련이야기를 했다