240808 TIL - 동료가 되는 길은 멀고도 험하다

LIHA·2024년 8월 8일

내일배움캠프

목록 보기

14/108

동료가 되어줘!!

SQL

아니 왜안돼?! -> IF절의 조건은 원래 하나밖에 못 넣는것 같다

select animal_id, name, if(sex_upon_intake like 'Neutured%' OR 'Spayed%', 'O', 'X') as 중성화
from animal_ins
order by animal_id

위와 같이 썼더니 틀렸다!

select animal_id, name, if(sex_upon_intake like 'Intact%', 'X', 'O') as 중성화
from animal_ins
order by animal_id

이렇게 썼더니 맞았다. 의미는 같은데 문법적 표현이 바뀌니 틀린게 되었다.

트러블슈팅

깃헙 잔디 가져오는 법

<img src="https://ghchart.rshah.org/깃허브아이디" />

참고 블로그

CSS도 쉽지않다 - 나는 이미지를 정렬하고 싶었을 뿐인데

.profilebox {
    margin-top : 100px;
    width: 100%;
    object-fit: cover;
    flex-direction: row;
    justify-content: center;
    display: flex;
}

.profile {
    margin-left : 50px;
    filter: drop-shadow(3px 3px 3px #c3c3c3)
}

.profile > a > img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
}

일단 완성본 코드!

내가 하고 싶던 것은 다음과 같다

팀원 네명의 깃헙 프로필 이미지를 불러와서

가로로 나란히 배열 후 이미지 사이의 간격을 동일하게 띄우고

테두리에 border-radius를 적당히 넣고

이미지 사이즈를 200~300px 정방형으로 조절하고

그림자를 조금 넣는 것

해결방법은 이렇다.

1) 깃헙 프로필을 불러와 div class = "profile" 로 각각 묶고, 이 넷을 또한번 div class = "profilebox"로 묶었다.
2) display: flex; 로 나란히 배열하고 justify-item : center; 로 중앙정렬했다.
-> 이때 주의점은 바깥 div에 css를 적용해야 한다. display: flex나 justify-item은 자식속성에게 적용되는 것이기 때문.
나는 이미 자식속성인 내부의 profile 값에 css를 적용하니 통 되질 않아서 한참을 헤맸다.
3, 4) profile > a > img 경로로 (이미지 밖에 앵커태그 걸었음) width, height를 200으로 주고 border-radius를 20% 걸었다.
5) profile 클래스에 filter:drop-shadow(3px 3px 3px c3c3c3)으로 주었다.

참고1
참고2 - justify는 내부의 자식요소에 쓰는 것
참고3 - 그림자 주는 법

justify는 축이 있다 - 꼬챙이에 꿴다고 생각하자

축을 정할땐 flex-direction : row / column 으로 지정해주면 된다. (기본 축은 row)
이 축을 main axis 라고 하고 항상 cross axis가 존재한다. 이 축이 대체 뭔 소용이냐면, 자식 요소들을 main axis / cross axis 기준으로 정렬하거나 회전시킬 수 있다.
참고