[사전캠프]3일차

 

• 오늘 배운 것

 

앨범 만들기

 

 * : all 

* {
        font-family: "Yeon Sung", system-ui;
        font-weight: 400;
        font-style: normal;
   }

전체 {글자폰트와 크기 등 부트스트랩에서 가져온 코드 넣기}

---

-  mytitle안에 button 설정하기

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

            margin-top: 20px;
        }

---

- 기본

	/* margin:위, 오른쪽, 아래, 왼쪽 */
            margin: 30px auto 0px auto;
            
            /* 여백만들기 */
            padding: 20px;
            
            /* 그림자넣기:오른쪽, 아래, 전체 그라데이션, 전체쨍한색, 색 */
            box-shadow: 0px 0px 3px 0px blue;
            
            /* 모서리 */
            border-radius: 5PX;

---

-  'mytitle'로 지정하여 안에 '앨범이미지', '제목', '내용', '날짜' 추가하기 , '기록하기', '닫기' 버튼 추가

- mttitile을 style에서 설정하고 이미지 url추가하기 

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

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

            background-image: url('https://images.어쩌고');
            background-position: center;
            background-size: cover;
        }

---

 

 스파르타 플릭스

- 거의 모든 코드를 부트스트랩에서 가져와서 알맞은 위치에 맞게 넣었다.

- 수정이 필요할땐 검사기능을 사용하자.

예시)

마우스 우 딸깍 > 검사> 필요한 코드에 마우스 클릭하고 우 딸깍> elemetnt style에서 수정

마우스 우 딸깍> edit as HTML 딸깍> 필요한 코드 복붙해서 수정가능

/* 페이지에서 검사기능으로 구역에서 수정 가능한지 먼저 체크! */
        .form-floating >input{
            background-color: transparent;
            color:white;
        }
        .form-floating >label{
            color:white;
        }
        .input-group >label{
            background-color: transparent;
            color:white;
        }

---

오늘 공부한 난이도!

부트스트랩에서 원하는 코드를 가져와서 활용할 줄 알게되었고

자꾸 따라치다보니까 전체적인 구조와 어떤 식으로 생성하고 입력값을 넣어야하는지에 대해 이해할 수 있었다.

컴퓨터가 이해하는 html문법에 대해 선언하는 키워드들간의 이해가 필요하다.

margin: 외부여백

padding: 내부 여백

border: 박스 경계선 

border-radius: 박스의 모서리 

box-shadow: 박스 그림자