HOHO - 240312 blog css

chan_hari·2024년 7월 29일

CSS HOHO-DAIRY

HOHO-DIARY

목록 보기

28/56

브랜치는 연결이 되어있는데 깃랩에 커밋이 안됨…ㄸㄹㄹ

어떻게 해결,,, 원인이 나도 알고 싶다… 제발…

css 시작!!

우선 전체적인 구조 부터 잡는다

css는 진짜 감도 안잡혀서 그냥 우선 웹사이트에 있는거 따라 치기만 하였다.

<전체적>

text-transform: uppercase;

⇒text- transform은 대문자로 또는 소문자로 바꾸는 속성이다.

none : 입력된 그대로 출력합니다.
capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다.
uppercase : 모든 글자를 대문자로 바꿉니다.
lowercase : 모든 글자를 소문자로 바꿉니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

링크 텍스트의 상태

사용자가 링크를 방문하기 전의 상태
사용자가 링크를 방문했을 때의 상태
사용자가 마우스를 링크 텍스트 위에 올려 났을 때의 상태
사용자가 마우스로 링킁 텍스트를 클리한 순간의 상태


이때 사용되는 선택자는 아래와 같다.

● a:link : 방문하기전의 링크
● a:visited : 방문한 링크
● a:hover : 링크에 마우스 포인터를 올려 놓았을 때
● a:active : 링크를 마우스로 클릭한 순간

a :hover 링크에 마우스 포인터를 올려 놓았을 때

헤더에는 로고랑 카테고리인 nav 가 있다.

로고랑 nav를 class ex로 묶어서 flex를 주고

총 가로 가 940 px 이어서 너비 계산 하여서

로고 - 640 nav -300 주었음

🚨

nav ul li 를 flex 해서 수직 정렬 하려고 하는데 안됨

난 우선 각 각 li에 클래스를 부여해줌 nav로

ul 에만 클래스를 부여해줘보기 >> 안됨

nav li 수직정렬

….

머리 안 돌아감 ㅎㅎ

다시 저장하고 새로고침 했더니 되었음

#logo {
    margin-top: 32px;
    color: #02b8dd;
    width: 400px;
}

.nav li {
    display: flex;

    list-style: none;
    width: 60px;
    margin: 30px;
    margin-bottom: 0;

}

.nav {
display: flex;
    width: 540px;
    padding: 0;
    justify-content: space-around;

    margin-bottom: 0;
}

----------------------------------------------------------------------------------------
<css>
#logo {
    margin-top: 32px;
    color: #02b8dd;
    width: 400px;
}

.nav li {
    display: flex;

    list-style: none;
    width: 60px;
    margin: 30px;
    margin-bottom: 0;

}

.nav {
display: flex;
    width: 540px;
    padding: 0;
    justify-content: space-around;

    margin-bottom: 0;
}

💥justify- content

justify- content ⇒ 콘텐츠 항목 사이와 주위에 공간을 분해하는 방법을 정의한다.

flex-start(기본값)

아이템들을 시작점으로 정렬한다.

flex-derection이 row(가로 배치)일때는 왼쪽에서, column(세로배치)일때는 위에서 정렬된다.

justify-content: start;

center

아이템들을 가운데로 정렬한다.

justify-content: center;

space-between

아이템들의 "사이(between)"에 균일한 간격을 만들어준다.

justify-content: space-between;

space-around

아이템들의 "둘레(around)"에 균일한 간격을 만들어준다.

justify-content: space-around;

space-evenly

아이템들의 사이와 양 끝에 일정한 간격을 만들어준다.

justify-content: space-evenly;

결론 >> space- around 써서 균일하게 간격을 가지고 할 수 있었다.

웹에 있는 기본 css는 따라치고 글자의 색이 어두워서 잘 안보여서 흰색으로 바꿈

이 이미지 영역은 엄청 넓은데 버튼이랑 글자는 위에 있어서

위치조정하고 싶어…

수직정렬을 검색하면서 찾고 있다가 도와주셨다… 감사합니다

🚨🚨🚨🚨🚨🚨🚨

class는 여러개 사용 가능!!

<div class="wrapper heroImage">

        <h2 class="hero">
            <p class="firstLine">A MINIMAL, CLEAN</p>
            <br>
            <p class="secondLine">LOYOUT FOR WEB DESIGN.</p>
            <button type="button" class="getStart"><a href="#"> Get started </a></button>
        </h2>

    </div>

.heroImage {
    height: 580px;
    padding-top: 1px;
    background: #e8eced url("https://picsum.photos/940/580") no-repeat center;
    display: flex;
    justify-content: center;
     align-items: center;
}