하지의 코딩일지/STUDY MEMO[FRONTEND]

하지의 코딩일지 2일차 html css

하지마지 2023. 6. 6. 22:44
728x90

ctrl + / 주석 달기 -----

/* margin: 20px auto 0px auto; */
 
코드 정렬하기 단축키 atrl+shift+f
 

부트스트랩 (bootstrap)

예쁜 css를 미리 모아둔 것@ 

복+붙  (body 안에)

https://getbootstrap.com/docs/5.0/components/buttons/

<button type="button" class="btn btn-primary">Primary</button>

 

 
 
       
<style>

        * {
            font-family: 'Gowun Dodum', sans-serif;
        } //구글 폰트 불러오기
 
        .mytitle {
            background-color: green;
            color: white;

            height: 250px;

            display: flex;                           // 내용물을 세로로 정렬 시켜라  *row 가로로 정렬
            flex-direction: column;
            align-items: center;
            justify-content: center;
 
 
 
            background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('https://movie-  phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg'); 
//이미지 어둡게 하기, 불러오기 
        }
            background-position: center;
            background-size: cover;       
        .mytitle > button {
            width: 250px;
            height: 50px;

            background-color: transparent;

            border: 1px solid white; 테두리 지정
            color: white;

            border-radius: 50px;  테두리 둥글게

            margin-top: 20px; 안쪽 공간
        }

        .mytitle > button:hover {    // hover 마우스 올렸을 때 반짝이게 하는것 
            border: 2px solid white;
        }

    </style>
</head>
<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>
</body>
</html>

 
        .mycomment {
            color: grey;
        }
        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>

    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화제목</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다</p>
                        <p>⭐⭐⭐</p>
                        <P class="mycomment">여기에 나의 의견을 쓰면 되겠죠</P>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화제목</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다</p>
                        <p>⭐⭐⭐</p>
                        <P class="mycomment">여기에 나의 의견을 쓰면 되겠죠</P>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화제목</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다</p>
                        <p>⭐⭐⭐</p>
                        <P class="mycomment">여기에 나의 의견을 쓰면 되겠죠</P>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화제목</h5>
                        <p class="card-text">여기에 코멘트가 들어갑니다</p>
                        <p>⭐⭐⭐</p>
                        <P class="mycomment">여기에 나의 의견을 쓰면 되겠죠</P>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>

    </div>
    </div>
</body>

</html>

728x90