2023-09-26 사전캠프 17일차 TIL

2023-09-26 사전캠프 17일차 TIL

 

- 팀 프로젝트 : 팀 소개 페이지 제작

1. 팀 정보 구체화 및 노션 작성

2. 와이어 프레임 개선 (figma)

 3. 메인페이지 UI 개발

각자 맡은 기능에 따라서 메인페이지 UI를 나누어 개발하기로 하였다.

- 팀소개 부분 (민규님)

- 포스팅박스 (병택님)

- 헤더 (진현님)

- 카드리스트 (명섭님)

 

나는 카드 리스트 부분을 맡게 되었다.

카드리스트 UI 구성을 마쳤고 결과는 다음과 같다.

각 카드에는 hover 이벤트를 추가하여 카드 뒤집기 효과를 구현하였다.

카드 뒤집기 효과는 CSS으로만 구성할 수 있다.

1. 구조  
부모 div 내부에 앞면 뒷면에 해당하는 두개의 div 생성
<div class='parent'>
<div class='front'> </div>
<div class='back'> </div> 
</div>

2. 부모 div css 속성
transform-style: preserve-3d; // 자식요소를 모두 3D 공간에 배치
perspective : 1100px // 관찰자와 요소간의 거리를 지정한다.
- hover event :
transform : rotateY(180deg) //이벤트 발생시 요소 뒤집기

3. 자식 div css 속성
backface-visibility : hidden // 입체적으로 뒤집힌 요소를 hidden을 통해 안보이게 한다.
- 뒷면 (back) css 요소
transform : rotateY(180deg) //최초 뒤집힌 상태

 

• HTML 코드

<div class="flip">
	<div class="card">
		<div class="front">
			<img src="https://us.123rf.com/450wm/yupiramos/yupiramos1709/yupiramos170910394/85494169-%EC%B4%88%EC%83%81%ED%99%94-%EB%82%A8%EC%9E%90-%EB%AC%B8%EC%9E%90-%EB%82%A8%EC%9E%90-%EC%82%AC%EB%9E%8C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B2%A1%ED%84%B0-%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8-%EB%A0%88%EC%9D%B4%EC%85%98.jpg">                      
		</div>
		<div class="back">
			<div class="card-name">김명섭</div>
			<div class="card-contents">"내용"</div>                   
		</div>
	</div>
</div>

• CSS 코드

.flip{
 	width: 290px;
    height: 390px;
    perspective: 1100px;
    margin: 0 auto 0 auto;
    cursor: pointer;
}

.card{
	width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3d;
}

.front, .back {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backface-visibility: hidden;
    border-radius: 10px;
}

.front > img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.front{
	border: 1px solid #F06D6D;
}
.back{
	transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f06d6d40;
}

.back > .card-name{
	font-size: 42px;
    margin: 65px 0 80px 0;
}
.back > .card-contents{
	font-size: 32px;
}
.flip:hover .card {
    transform: rotateY(180deg);
}

---

- 알고리즘 문제풀이

1. 내배캠 일일 알고리즘 풀이 (프로그래머스)

- 대문자, 소문자

해당 문제는 입력받은 문자열의 대/소문자를 변경하는 문제이다.

이 때 사용한 파이썬 문법은 isupper(), lower(), upper()이다.

isupper() : 대문자인지 확인 후 Boolean 값 반환

upper() : 대문자로 변경

lower() : 소문자로 변경

isupper()을 통해서 문자열 내 문자의 대문자 여부를 확인하고 각 조건에 맞게 upper()과 lower()을 통해 문자를 변경하였다.

 

- 인덱스 바꾸기

해당 문제는 문자열과 인덱스 2개가 인수로 주어지고, 각 인덱스의 문자를 서로 변경하는 문제이다.

먼저 주어진 문자열을 인덱스로 접근하기 위해서 list()를 통해 리스트화 시켰다.

리스트화 된 문자열은 인덱스로 접근이 가능하기 때문에 문자를 변경하였다.

리스트화 된 문자열을 문자열로 변경하기 위해서 빈 문자열 변수를 선언하였으며, 순회를 통해 문자열에 추가하였다.

 

2. 백준 문제풀이 (단계별 문제풀이 3문제)

학습 내용

- N진법 -> 10진법 : int(변환된 수, 변환된 진법)