Today I Learned | 7μ›” 7일

juriΒ·2021λ…„ 7μ›” 7일
0

TIL

λͺ©λ‘ 보기
7/25
post-thumbnail

🍩 였늘 λ­ν–ˆμ§€

1 [python] replit 1-22
2 session <ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ ν•˜λŠ” 일>
3 [html/css] replit wrap-up


1. Python replit

파이썬 기본지식듀을 μ „λΆ€ μ •λ¦¬ν•˜κΈ΄ μ–΄λ €μšΈ 것 κ°™μ•„μ„œ 제일 ν—·κ°ˆλ¦¬κ³  μ΅μˆ™μΉ˜ μ•Šμ€ κ°œλ…μ„ μ •λ¦¬ν•΄λ³΄μ•˜λ‹€.

πŸ‘‰ 14. checkpoint : f-strings?

2. Session <ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ ν•˜λŠ” 일>

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžμ— λŒ€ν•΄ ν”νžˆ κ°–κ³  μžˆλŠ” μ˜€ν•΄, ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ ν•˜λŠ” 업무에 λŒ€ν•΄ μ•Œλ €μ£Όμ…¨λ‹€. κ²‰μœΌλ‘œ λ³΄μ΄λŠ” μ—…λ¬΄λ‚˜ μ‚¬μš©ν•˜λŠ” μ–Έμ–΄λ₯Ό 보고 ν”„λ‘ νŠΈ, 백을 κ²°μ •ν•˜κΈ° λ³΄λ‹€λŠ” μžμ‹ μ˜ μ„±ν–₯에 맞좰 μ‹ μ€‘νžˆ κ³ λ₯΄λž€ μΆ©κ³ λ₯Ό ν•΄μ£Όμ…¨λŠ”λ° 사싀 ν”„λ‘ νŠΈλ„ 백도 잘 λͺ¨λ₯΄κ² μ–΄μ„œ κ°ˆνŒ‘μ§ˆνŒ‘ν•œ μƒνƒœλ‹€. 일단 백으둜 κ°„λ‹€.

3. html/css replit wrap-up

  • block-level μš”μ†Œμ— width:100%의 값을 λΆ€μ—¬ν•˜μ§€ μ•Šμ•„λ„ κΈ°λ³Έ κ°’μ΄λ―€λ‘œ μ€‘λ³΅λœ μ½”λ“œλŠ” μ΅œλŒ€ν•œ μ§€μ–‘ν•˜κΈ°.
  • ν•œ λ¬Έμ„œλ‚΄μ—μ„œ naming-convention 은 ν†΅μΌν•œλ‹€.
  • box-sizing:border-boxλŠ” μš”μ†Œμ˜ width, height둜 μ„€μ •ν•œ 값에 border, margin, padding 값이 ν¬ν•¨λ˜κ²Œ ν•œλ‹€.
  • 초기 μ„€μ •κ°’ μ„€μ •ν•˜κΈ° ( *λŠ” μ „μ²΄μ„ νƒμž)
* {
box-sizing : border-box;
margin : 0;
padding : 0;
}
  • floatλŠ” μœ μ§€λ³΄μˆ˜κ°€ μ–΄λ €μ›Œ 많이 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€. λŒ€μ‹  flexλ₯Ό 많이 μ‚¬μš©ν•œλ‹€.
  • flex:value둜 ν˜•μ œ νƒœκ·ΈλΌλ¦¬μ˜ λΉ„μœ¨μ„ μ‘°μ •ν•  수 μžˆλ‹€. (!)

쀑앙 μ •λ ¬ ν•˜λŠ” 법 μΆ”κ°€ ~!

πŸ‘‰ top, left, transform μ‚¬μš©ν•˜κΈ°

div {
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
}

weegle 검색창 μ½”λ“œλ¦¬λ·°

  1. μ΄ˆκΈ°κ°’ μ„€μ •ν•˜κΈ°
  2. flex 값을 μ§€μ •ν•΄μ„œ λΉ„μœ¨ μ‘°μ •ν•˜κΈ°
  3. 클래슀 μ§€μ •ν•˜κΈ°

클래슀λͺ…은 띄어쓰기λ₯Ό κΈ°μ€€μœΌλ‘œ κ΅¬λΆ„ν•œλ‹€.
μœ„μ™€ 같은 htmlλ¬Έμ„œμ˜ 클래슀λͺ…μ˜ κ²½μš°μ—” .fas둜 λͺ¨λ“  iνƒœκ·Έλ₯Ό 지정할 수 μžˆλ‹€.

더 μ•Œμ•„λ³Ό κ°œλ…

  • flex
  • grid

🍩 ν•˜λ£¨ 끝

profile
Make my day !

0개의 λŒ“κΈ€