곰 2023/05/24

#메모.
[단백님 표 강좌 : 파파티 코딩방]
.로 시작하는 건 클래스라 부르고 #으로 시작하는 건 아이디 부르는데요.
클래스는 문서 안에서 여러 번 중복되어 사용될 수 있고 #은 고유값이라 그 문서에서 유일하게 달수 있는 고유 타이틀..(?) 같은 거예요.

(ex)
.파파티 {드레스코드:모코잠옷;} =해석: 이러면 우리 모두가 모코 잠옷을 입어야 해!
#부베 {드레스코드:모코유령잠옷;} =해석: 이러면 부베님은.. 혼자 모코 잠옷을 입고 계신 거죠!

.파파티 {배경:소리방가는길신호등앞}
#리지리지 {컬러:레드}
#시그시그 {컬러:옐로}
#소리소리 {컬러:그린}

*스킨의 스타일. css가 아닌 게시판 개별 공지에 간단히 명령어를 입력해 적용시킬 수 있다.
:
<style>여기서 수정할 css코드 </style> 이렇게 html모드에서 스타일 선언하시고 그 안에 css코드 넣어주시면 되는..!(원님 답변)

친구들로 생각하니 금방 이해가 되었으며, 어제는 혼자 머리에 쥐날듯한 감각으로 읽었는데 원님의 강좌를 통해 이해하니.. 즐거웠고..!
헤헷 레이아웃 구성을 조금 더 생각해서 모바일 대응을 해봐야겠어요.

+

곰 2023/05/24

와중에 피라님과 단백님이 이름 앞에 모코를 달고 있잖아 ㅋㅋㅋㅋㅠ 꺄무~!

+

곰 2023/05/24

집잉님 갓 패치 덕에 모든 기능이 라이트에서  정상 적용 되었으며..
나는... 나는...... 너무 리포트 왕왕 하고 있어서 송구스러워요......... 하지만 응원하게 되는 그런 그런..!!

+

곰 2023/05/24

^~^/// 헤헷 티키타카란 좋은거구나. 탁구치는 친구들(응?)

+

곰 2023/05/24

비타민A와 D가 상호작용하기 때문에 한쪽을 과다 섭취 시 독소가 됨으로 좋지 않다고 한다. ...처음 알았고.. 햇볕 째기 어려운 사람이라 D는 필시 결핍일 것이며, 눈에 좋다 해서 A라도 챙겨보겠다고 못 먹는 당근을 먹기 시작하였으나..! 비타민이란 어려운 것이구나. 산책 좋아해, 다시 시작하자.

+

곰 2023/05/23

이상하다... 일기장으로 사용할 공간이었는데 정신 차려보니.. 여기 일기장 맞습니다.

+

곰 2023/05/23

#메모.
CSS의 object-fit 속성으로 이미지를 왜곡 없이 보여주기

*이미지를 웹상에 올리게 되면 object-fit: fill; 처리돼서 원본 사이즈가 보이게 된다.
->이때 1개 이상의 이미지가 서로 다른 가로 세로 사이즈 때문에 웹상에서 object-fit 속성을 어떻게 주냐에 따라서 화면에서 보이는 방식이 변하고, 모바일 대응에서도 많이 영향이 가는 모양.

*object-fit: fill
다중 이미지가 같은 가로*세로 크기라면 상관없으나 다중 이미지가 서로 다른 사이즈일 때 object-fit를 주지 않아 object-fit: fill 상태 유지 시.
<img src="이미지 주소" width="200px" height="200px" />
가로세로가 200*200인 정사각형 안에 구겨져서 이미지가 들어가 왜곡 현상이 생긴다.

*object-fit: cover
:이미지의 본래 비율을 지키는 방법 1(대가: 이미지의 일부 잘림)

이미지 css에 object-fit: cover를 추가할 시
(img { object-fit: cover;} 이렇게~!)
<img src="이미지 주소" width="200px" height="200px" />
200*200사이즈의 정사각형 안에 그림들이 200보다 넘는 사이즈의 가로 또는 세로가 잘려서 그림이 들어가게 된다.
섬네일(thumbnail)이나 미리 보기 그리고 이미지를 포함하고 있는 카드(card)나 여러 이미지로 이루어진 그리드(grid)를 만들 때 많이 사용된다. 이러한 UI는 보통 클릭(click) 하거나 호버(hover) 하면 이미지 전체를 볼 수 있게 해주므로 이미지가 좀 잘려도 큰 문제가 되지 않는 경우가 많다고 한다.

*object-fit: contain
:이미지의 본래 비율을 지키는 방법 2(대가: 빈 영역 발생)

이미지 css에 object-fit: contain를 추가할 시
(img { object-fit: contain;} 이렇게~!)
<img src="이미지 주소" width="200px" height="200px" />
200*200안에 자동으로 이미지가 가로와 세로의 200기준으로 다른 영역이 줄어들어 출력된다. 그렇기 때문에 줄어든 만큼의 빈 영역이 생기게 된다.

*object-fit: none
:이미지의 본래 비율을 지키는 방법 3(대가: 이미지를 감싼 영역이 추가적으로 발생과 잘림 발생이 일어날 수 있다..)
이 녀석은 좀 까다롭군요... 잘 안 쓸듯하니... 치우며...
object-fit: contain와 비슷하나. 작성한 세로 가로 설정에서 맞혀 한쪽 면이라도 그보다 작으면 거기에 맞혀 이미지 자동 조절 후 큰 쪽이 잘리는... 그런....

*object-fit: scale-down
:이 속성 값은 이미지가 주어진 영역보다 작을 때는 none 속성 값처럼 작동하다가, 이미지가 주어진 영역보다 클 때는 contain 속성 값처럼 작동합니다.
(신기능..?이라 잘 안 쓸 듯...

+

곰 2023/05/23

#메모.
*position: static
:포지션에 위치값을 주었을 때 속성에 따른 기준점의 차이.

position: relative [원래 위치 기준으로 이동]
position: absolute [해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다.]
position: fixed [속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면으로 이동 후 고정]
position: sticky [메인에 스크롤링을 적용 후, 포지션 스티키 적용 시. 스티커가 부착된것처럼 입력과 위치에서 고정되어 움직이지 않는다나..?]
(ex)
main {
  width: px;
  height: px;
  overflow: auto;(이녀석 추가후)
  background: ;
} 그 아래 어쩌고저쩌고 포지션 어쩌고

*덤 text-align: center; (글의 나란히 두는 기준: 센터)

+

곰 2023/05/23

잊어버리기 전에 어서 기록해야만..!

+

곰 2023/05/23

test

+