[React] React 프로젝트에서 스타일 적용하기 (ft. bulma)

https://bulma.io/

Bulma: Free, open source, and modern CSS framework based on Flexbox

태그 하나하나 다 쓰기 귀찮으니

디자인이 되어있는 벌마라는 css 라이브러리를 사용할거임!

 

https://bulma.io/documentation/components/card/

프로필 카드 같은거 만들건데 예시를보니 이게 좀 괜찮아보임

여기서 class는 className으로 변경하고 필요없는거 지우고 목적에 맞게 잘 수정하면 됨

 

 

1. 라이브러리 설치하기

코드 복붙하고 써도 되고 파일 다운로드도 되고 cdn을 사용해도 되지만 npm을 사용해서 벌마 라이브러리를 설치해보게습니다

터미널에서 npm install bulma 하면 됨;

 

1초만에 설치 끝

 

그럼 편집기로 ㄱㄱ

저번에 패키지는 어디에 저장된다고 했었다????

넹 node_modules입니다

이걸 펼쳐서 쭉쭉 내려보면

 

bulma에서는 두가지 버전의 라이브러리를 제공합니당

css와 sass져

sass는 이건 발전한 버전의 css라고 하네여?

그냥 plain css를 쓰고싶으니까 bulma.css를 사용하도록 할게여 ㅇㅋ

그럼 쟤를 import 하면 되겟습니다

 

 

2. 내 프로젝트에서 bulma 적용하기

1) App.js - 상단에 import해준다

    import Bulma from "bulma/css/bulma.css" <- 이거 추가함
    import ProfileCard from "./ProfileCard";
    import AlexaImage from "./images/alexa.png";
    import CortanaImage from "./images/cortana.png";
    import SiriImage from "./images/siri.png";

    console.log(AlexaImage);
    console.log(SiriImage);
    function App(){
        return(
            <div>
                <div>Personal Digital Assistance</div>
                <ProfileCard title = "Alexa" handle="@alexa123" image={AlexaImage}/>
                <ProfileCard title = "Cortana" handle="@cortana32" image={CortanaImage}/>
                <ProfileCard title = "Siri" handle="@siri01" image={SiriImage}/>
            </div>
        );
    }

    export default App;

 

2) ProfileCard.js에서 jsx형식에 맞게 변경해준다.

    function ProfileCard({title, handle, image}){
        return (
            <div className="card">
                <div className="card-image">
                    <figure class="image is-1by1">
                        <img src={image} alt="pda logo" />
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media-content">
                        <p className="title is-4">{title}</p>
                        <p className="subtitie is-6">{title}</p>
                    </div>
                </div>
            </div>
        );
    }
    export default ProfileCard;

 

3) 브라우저 확인한다

ㅋ

이렇게 개판으로 나오는데 이제 카드 3개가 나란히 정렬되도록 수정해보겠습니당

하.. css 넘 싫다

 

벌마홈페이지가면

css lib에 column이란게 있는데 이걸 사용해볼게여

 

App.js.로 돌아와서

    import Bulma from "bulma/css/bulma.css"
    import ProfileCard from "./ProfileCard";
    import AlexaImage from "./images/alexa.png";
    import CortanaImage from "./images/cortana.png";
    import SiriImage from "./images/siri.png";

    console.log(AlexaImage);
    console.log(SiriImage);
    function App(){
        return(
            <div>
                <div>Personal Digital Assistance</div>
                <div className="container">
                    <section className="section">
                        <div className="columns">
                            <div className="column is-4">
                                <ProfileCard title = "Alexa" handle="@alexa123" image={AlexaImage}/>
                            </div>
                            <div className="column is-4">
                                <ProfileCard title = "Cortana" handle="@cortana32" image={CortanaImage}/>
                            </div>
                            <div className="column is-4">
                             <ProfileCard title = "Siri" handle="@siri01" image={SiriImage}/>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        );
    }

    export default App;

bulma를  import하고 라이브러리에 맞게 구조를 변경하고 class를 넣어줬음

 

그랬더니 쩜 예쁘게 나옴

 

그럼 discription랑 header도 업데이트 해보겠습니다

1) App.js

    import Bulma from "bulma/css/bulma.css"
    import ProfileCard from "./ProfileCard";
    import AlexaImage from "./images/alexa.png";
    import CortanaImage from "./images/cortana.png";
    import SiriImage from "./images/siri.png";

    console.log(AlexaImage);
    console.log(SiriImage);
    function App(){
        return(
            <div>
                <section className="hero is-primary">
                    <div className="hero-body">
                        <p className="title">Personal Digital Assistance</p>
                    </div>
                </section>
                <div className="container">
                    <section className="section">
                        <div className="columns">
                            <div className="column is-4">
                                <ProfileCard 
                                    title = "Alexa" 
                                    handle="@alexa123" 
                                    image={AlexaImage}
                                    discription="alexa was create by amazon. amazon annual fee is very expensive."
                                />
                            </div>
                            <div className="column is-4">
                                <ProfileCard 
                                title = "Cortana" 
                                handle="@cortana32" 
                                image={CortanaImage}
                                discription="cort"
                                />
                            </div>
                            <div className="column is-4">
                                <ProfileCard title = "Siri" 
                                handle="@siri01" 
                                image={SiriImage}
                                discription="siri made by apple. siri doesn't understand what i say."
                             />
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        );
    }

    export default App;

 

2) ProfileCard.js

    function ProfileCard({title, handle, image, discription}){
        return (
            <div className="card">
                <div className="card-image">
                    <figure class="image is-1by1">
                        <img src={image} alt="pda logo" />
                    </figure>
                </div>

                <div class="card-content">
                    <div class="media-content">
                        <p className="title is-4">{title}</p>
                        <p className="subtitle is-6">{handle}</p>
                    </div>                
                    <div className="content">{discription}</div>
                </div>        
            </div>
        );
    }
    export default ProfileCard;

 

3) 결과

짠! 잘 나온다

 

끝