안녕하세요!오늘, 나는 너에게 몇 가지 간단한 힌트를 줄 것이다. 네가 여러 장의 '카드' 를 포함하는 계기판 페이지를 설계하도록 할 것이다.나는 Rails 백엔드 (상관없음) 와 React 백엔드를 사용합니다.
Google 글꼴도 응용 프로그램 파일로 가져옵니다!
나는 지금 가장 작은'스타일링'을 가지고 있지만, 심지어는 스타일링이라고 부르지도 않는다.이 페이지는 식물의 집합을 표시하는 데 사용되는 사용자의 대시보드 페이지입니다.
우리는 가지런한 용기와 카드를 만들어서 그것들을 함께 놓아야 한다.(만약 개발 설정이 조명 모드에 있다면 아래 화면 캡처의 가장자리를 똑똑히 볼 수 없습니다.)

계기판부

우선, 가장 큰 용기를 만들어 봅시다. 페이지 자체!이것은 기본 구조이기 때문에 너는 모든 반응을 소홀히 할 수 있다.PlantContainer 어셈블리는 "dashboard"div의 레이어입니다.

render() {
        return (
            <div className="dashboard">
                <div>
                    <h2 className="user-name-icon"><img className="user-dashboard-icon" src={user.icon} />
                    {this.props.user.username}</h2>
                </div>
                <div className="dashboard-btn-div-top">
                    <button className="dash-add-plant-btn" >Add Plant</button>
                    <button className="greenhouse-btn" >Greenhouse</button>
                </div>
                <PlantContainer 

                />
                <br></br>
                <div className="dashboard-btn-div-bottom">
                    <button className="dash-edit->Edit User</button>
                    <button className="dash-logout-btn"  >Logout</button>
                </div>
            </div>
        );
    }
}

가장 바깥쪽의 포장기는'dashboard'류를 가지고 있다.우선, 나는 단지 내용을 페이지의 왼쪽 가장자리에서 제거하고 싶다...나는 이것이 너무 감동적인 것이 싫다.CSS 파일:

.dashboard {
     padding: 40px;
}

채우기는 요소의 경계에서 컨텐트를 밀어 넣습니다.(테두리는 테두리에서 바깥쪽으로 뻗고 테두리는 원소의 실제 테두리이다)

공장 컨테이너 그룹

이제 다음 용기인 식물 용기 부품을 살펴보자.이 함수는 'plant container' 클래스의div를 되돌려줍니다.나는 그 상자에 내가 소장하고 있는 모든 식물을 담고 싶다!
CSS:

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
}

그래서 나는 용기의 윤곽을 그리기 위해 테두리를 만들었다. 나는 20px의 테두리로 용기에서 내놓고 그 안에 충전물을 삽입했다. 이렇게 하면 내용이 용기의 테두리에 있지 않을 것이다.

쿨, 지금 우리는 한 상자가 다른 상자 안에 있어.나는 나의 상자의 가장자리가 부드럽기를 바란다. 그래서 나는 border-radius: 10px; 를 첨가해서 .plant-container 중의 가장자리를 연화시킬 것이다.

식물증조

좋아.이제 카드 자체를 상자에 담기 위해 한 층 더 깊이 들어가자.내 식물 카드는 Plant Container 구성 요소에 나타나기 때문에 위의 코드 세션에서 볼 수 없습니다.

.plant-card-dashboard {
         border: 1px solid rgb(0, 0, 0);
         border-radius: 10px;
         padding: 15px;
         margin: 10px;
         width: 200px;
         background-color: rgb(255, 255, 255);
}

그래서 나는 카드를 10px의 간격으로 서로 밖으로 밀고 15px의 충전물로 안으로 밀고 싶다. 나는 단단한 폭을 설정했다. 이렇게 하면 모두 똑같다. 검은색 테두리로 윤곽을 그리고 테두리 반경으로 테두리 원각을 그린다.

동그란 보이즈.

카운터

플랜트 컨테이너 div에서는 모든 카드를 클라스card-container로 다른 박스로 포장했다.내가 이렇게 한 이유는 제목인'너의 식물 소장'을 놓기 위해서다.식물 용기.

이 카드들은 모두 한데 겹쳐서 나는 그것들이 나란히 전시되기를 바란다.
그래서 우리는 계기판 > 공장 용기 > 카드 용기를 얻었다.

.card-container {
    display: inline-flex;
    flex-wrap: wrap;
}

내연 flex는 그것을 나란히 보여 줍니다. flex wrap은 다음 카드를 용기의 다음 줄로 이동할 수 있도록 합니다.나는 식물을 추가해서 시범을 보였다.
지금 나는 더 많은 즙이 많은 스타일을 첨가하고 싶다...배경 그림 어때요?우리 .dashboard 스타일로 돌아가서 그림을 추가합시다.내 스타일 디렉터리에 로컬 이미지가 있습니다.그림 크기를 'contain' 으로 설정하면 전체 그림을 표시하고 아래에서 자동으로 반복합니다. (비록 화면 캡처가 비슷하지 않지만.)
다음은 대시보드 스타일입니다.

.dashboard {
    padding: 40px; 
    background: url(./images/zz2.jpg);    
    background-size: contain;
} 

지금 그녀는 이렇게 보인다.

우리가 과거를 돌이켜보면plant container CSS 그룹에서 다음을 추가합니다.

.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
     background-color: rgba(255, 255, 255, 0.521);
     backdrop-filter: blur(5px);
}

배경색은 흰색이고 불투명도는 절반 정도이며 배경 이미지가 흐려집니다(.dashboard div에 있음).마지막으로 PlantContainer도 배경을 모호하게 할 수 있기를 바랍니다. 이것이 바로'배경 필터'의 역할입니다...그러나 이것은 비싼 효과이기 때문에 가능한 한 한 한 한 페이지에서 여러 번 사용하지 마세요.

식물 형상 조형

이제 식물 사진을 만들자...좀 사각형이지 않아요?내 식물 카드에 이미지 종류는 plant-image-dashboard이고 다음은 그의 양식이다.

.plant-image-dashboard {
    width: 200px;
    height: 200px;
    object-fit: fill;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

그래서 나는 높이와 너비를 정사각형으로 설정하고 그림을 '채우기' 로 설정했다.방주: 정사각형 그림을 올렸습니다. 만약에 직사각형 그림이 있다면 높이와 너비를 정사각형으로 설정하고 object-fit: fill를 선택하면 그림을 납작하게 눌러서 비뚤어질 수 있습니다.그리고 우리는 15px로 동그랗게 만들고 작은 네모난 테두리의 음영을 넣어서 그림을 약간 팝업합니다.지금 보면 이렇다.

구글 폰트 시대

아이고!다 왔어.구글 글꼴을 가져오겠습니다.React 애플리케이션에서는 좀 더 복잡합니다.저는'나넘 명조'를 좋아해요. 한국어처럼 들려요.Download Family를 클릭하면 다운로드에서 작은 zip 파일을 볼 수 있습니다.

작은 폴더를 엽니다.너는 약간의 글씨체를 볼 수 있을 것이다.ttf 파일나는 단지 평범한 것만 원한다.style 디렉터리에 fonts라는 폴더를 만들고 파일을 글꼴 디렉터리로 드래그합니다.스타일 폴더는 src 디렉터리에 있습니다.

응용 프로그램을 불러오는 자바스크립트 파일을 찾습니다.js.내 React 프로그램은 bootstrap.js (Bootstrap을 사용하지 않았음에도 불구하고) 첨부되어 있습니다. 이것이 바로 내 프로그램을 불러오는 것입니다.js (그리고 모든 다른 구성 요소를 불러옵니다.)
응용 프로그램을 로드하는 파일로 글꼴을 가져옵니다.js는 이렇게 하는 것을 좋아합니다. 저bootstrap.js가 사는 곳에서 경로를 선택하십시오.

그리고 당신은 font-family: 'Nanum Myeongjo', serif;을 응용 프로그램 스타일에 넣고 전체 사이트의 글꼴 설정에 사용할 수 있습니다!
현재, 우리는 당신이 좋아하는 식물 시리즈를 표시할 수 있는 풍격이 아름다운 계기판 페이지를 가지고 있습니다.번영하다.

나는 이것이 CSS를 막 배운 사람에게 도움이 되기를 바란다.나는 이 프로젝트에서 순수한 바닐라 CSS를 사용하는데Bootstrap이나Bulma가 없기 때문에 그것을 배우는 것은 도전이다!
저는feed페이지에서 비슷한 일을 했습니다. 이 페이지에는 다른 사용자의 새로운 식물이 표시됩니다!

(당신은 식물 애호가입니까? 저와 합작하여 나의 가정 식물 소셜 미디어 응용 프로그램인 Face Plant를 개발하는 것에 흥미가 있습니까? 저는 합작에 흥미가 있습니다. 왜냐하면 이 프로젝트가 약간의 흡인력이 있을 수 있다고 생각하기 때문입니다. 이 앱을 보고 당신의 생각을 알려주세요!)