[본캠프] d+47.

박예지·2025년 3월 28일

TIL 내일배움캠프 본캠프

[UIUX] TIL 📑

목록 보기

64/100

메인 이미지를 좀 변경해보았다.
이미지를 편집하지 않고 내 이름을 absolute로 옮기려고 하다보니 화면 사이즈가 달라지면 위치가 달라진다...ㅠㅠ
방법은 있겠지만 수정은 하고 싶지않아

📌
1. CSS
2. 과제

1. CSS

CSS (Cascading Style Sheets)
차곡차곡 적용되는 스타일 시트
HTML로 만든 뼈대에 색깔, 글꼴, 간격, 위치를 입혀서 예쁘게 만들어준다.

가상 클래스

특별한 상태일 때만 작동하는 CSS 스타일
평소에는 보이지 않다가, 마우스르 올리거나 특정 조건을 만족할 때 스타일이 적용된다.

:hover

button:hover {
	background-color: darkblue;
	color:white;
}

버튼에 마우스를 올렸을 때 변경된다.

:focus

input:focus {
	border-color: green;
}

클릭하거나 입력창에 포커스가 맞춰질 때 변경된다.

:active

button:active {
	background-color: darkgreen;
}

버튼을 누르는 순간 스타일이 변경된다.

box-shadow

box-shadow : x값 y값 흐림정도 번짐정도(생략가능) 그림자색상;
box-shadow: 0px 0px 6px 0px #b1b1b1;

2. 과제

1️⃣ selector로 테이블 칸마다 다른 색깔 입히기

2️⃣ 추억사진 flex로 가로 정렬하기

  .box {
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        margin: 20px;
      }

3️⃣ 포트폴리오 grid로 정렬하기

 .portfolio {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
      }
      .box2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 20px;
      }
      .item2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 8px;
        box-shadow: 0px 0px 6px 0px #b1b1b1;
        padding: 20px;
      }
      .item2 > img {
        border-radius: 8px;
      }

4️⃣ 카드 컴포넌트 만들기

   .post-card {
        margin: 30px;
        width: 600px;
        box-shadow: 0px 0px 5px 0px;
        border-radius: 3%;
      }
      .post-image {
        width: 100%;
        border-radius: 3% 3% 0 0;
      }
      .post-bottom {
        padding: 20px;
        display: flex;
        flex-direction: column;
      }
      .post-bottom > * {
        margin: 0;
      }
      .post-title {
        font-size: 30px;
      }
      .post-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 4px;
      }
      .post-date {
        color: #333;
        font-size: 12px;
      }
      .post-category {
        background-color: #c9c9c9;
        color: #333;
        padding: 5px 15px;
        border-radius: 30px;
        font-size: 12px;
      }
      .post-body {
        line-height: 150%;
        word-break: keep-all;
      }