카테고리 없음

5. 웹개발 정리 (2)

jaeoun0238 2024. 10. 24. 17:03

폰트가져오기

고운돋음 폰트

 

 

 

나만의 추억앨범 화면 만들기

  • sparta폴더 안에 album 폴더를 만들기
  • album안에 index.html을 만든 후 템플릿 넣기

부트스트랩을 잘 이용하기

 

부트스트랩 : 예쁜 CSS를 미리 모아둔 것 !

  • CSS를 다룰 줄 아는 것과 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다..!

박스안에있는 내용을 정리할때 자주쓰는 코드

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

 

와 버튼 하나하나 안하고 이렇게 하면 mytitle속에 있는 버튼 모두가 해당된답니다! 개꿀이잖아!

 .mytitle {
            height: 250px;
            color: white;

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

            background-position: center;
            background-size: cover;
        }
        .mytitle > button{
            width: 150px;
            height: 50px;
            background-color: transparent;
            color: white;
            border: 1px solid white;
            border-radius: 5px;

            margin: 20px;
        }

이게 왠만한 모든 css의 전부.. 반복학습 ㅜㅜ

 

지금까지 배운대로 만든 추억앨범화면

가운데로 정렬하고 다듬는 과정이 쉽지가 않구만

 

 

카드부분 코드

<div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">앨범 날짜</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

 

이쁘게 정리됨!

 

 

 

완성본..

하면서 생각보다 뭘 못따라갔는지 하는대로 해도 결과물이 선생님이 강의해주신것 처럼 나오질 않아서 계속 반복수정함.. 결국 붙여넣기의 힘을 사용했는데 왜 내가 처음에 만든거랑 차이나는지 모르겠다.. ㅜㅜㅜㅜㅜㅜㅜㅜㅜ

뭘 잘못했을까.. ㅜㅜㅜㅜㅜㅜㅜㅜ

 

 

오늘의 요약

alt + shift+ f  : 줄 정렬  

⭐ 박스안에 있는 내용을 정리할때 쓰는 코드 :

display: flex;

 flex-direction: column; 

align-items: center;

justify-content: center;

 

'카테고리 없음'의 다른글

  • 현재글5. 웹개발 정리 (2)

티스토리툴바