ํ‹ฐ์Šคํ† ๋ฆฌ

Chan Code & DS ๐Ÿง‘‍๐Ÿ’ป๐Ÿ“Š
๊ฒ€์ƒ‰ํ•˜๊ธฐ

๋ธ”๋กœ๊ทธ ํ™ˆ

Chan Code & DS ๐Ÿง‘‍๐Ÿ’ป๐Ÿ“Š

code-studies.tistory.com/m

Python, C++, Data Science ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

๊ตฌ๋…์ž
3
๋ฐฉ๋ช…๋ก ๋ฐฉ๋ฌธํ•˜๊ธฐ

์ฃผ์š” ๊ธ€ ๋ชฉ๋ก

  • [html/css] css positioning css positioning์—๋Š” static, relative, absolute, fixed๊ฐ€ ์žˆ๋‹ค. ๋‹ค์Œ ๋งํฌ๊ฐ€ ์ดํ•ด์— ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค appbrewery.github.io/css-positioning/ style="position = positioning;"์œผ๋กœ ์ ์šฉ 1. Static html ๊ธฐ๋ณธ๊ฐ’ ์ด์ „ ์š”์†Œ์˜ ์•„๋ž˜๋กœ ๋ฐฐ์น˜๋จ 2. Relative ๊ธฐ๋ณธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ 3. Absolute ๋ถ€๋ชจ ํƒœ๊ทธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ relative ๋ฐฐ์น˜ ๋ถ€๋ชจ ํƒœ๊ทธ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์„ ์‹œ ํ™”๋ฉด ์ขŒ์ธก์ƒ๋‹จ์— ๋ฐฐ์น˜ z-index๋ฅผ ์ตœ ์ƒ๋‹จ์œผ๋กœ ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์—, z index๋ฅผ -๋กœ ๋ฐ”๊พธ์–ด์•ผ ํ•  ์ˆ˜ ์žˆ์Œ 4. Fixed ๋ธŒ๋ผ์šฐ์ € ์ฐฝ ์ขŒ์ธก์ƒ๋‹จ์„ ๊ธฐ์ค€์œผ๋กœ relative ๋ฐฐ์น˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ƒํ•˜๋กœ ์›€์ง์—ฌ๋„ ํ•ญ์ƒ ๊ฐ™์€ ์œ„์น˜์— ์กด์žฌ ๋‹ค์Œ.. ๊ณต๊ฐ์ˆ˜ 0 ๋Œ“๊ธ€์ˆ˜ 0 2023. 9. 25.
  • [html/css] css selectors(์„ ํƒ์ž) css๋ฅผ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋ฉด, ์–‘์ด ๋Š˜์–ด๋‚  ์ˆ˜๋ก internal style sheet๋กœ ์ž‘์„ฑํ•˜๊ธฐ ํž˜๋“ค์–ด์ง„๋‹ค. ๊ทธ๋Ÿด ๋•Œ id๋‚˜ class๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๋“ฑ์˜ ๋ฐฉ๋ฒ•์œผ๋กœ ํƒœ๊ทธ๋“ค์„ ๋ถ„๋ฅ˜ํ•œ ํ›„, css์—์„œ ์Šคํƒ€์ผ์„ ์ž…ํžŒ๋‹ค. ์ด ๋•Œ, ๋ถ€์—ฌํ•œ ํŠน์ • id, class, ํ˜น์€ ํŠน์ • ํƒœ๊ทธ ์ข…๋ฅ˜๋“ค์—๊ฒŒ ์Šคํƒ€์ผ์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด css selectors(์„ ํƒ์ž)์ด๋‹ค. ๊ธฐ๋ณธ css ์„ ํƒ์ž์—๋Š” 4๊ฐ€์ง€ ์ข…๋ฅ˜๊ฐ€ ์žˆ๋‹ค. ํƒœ๊ทธ ์ข…๋ฅ˜ ์„ค๋ช… ๋ฌธ๋ฒ• Universal Selector ์ „์ฒด ์„ ํƒ์ž ์ „์ฒด ์„ ํƒ *{...} Type Selector ํƒ€์ž… ์„ ํƒ์ž ํƒœ๊ทธ ์ข…๋ฅ˜๋กœ ์„ ํƒ ํƒœ๊ทธ์ด๋ฆ„{...} ex) h1{...}, p{...} Class Selector ํด๋ž˜์Šค ์„ ํƒ์ž ๋ถ€์—ฌํ•œ ํด๋ž˜์Šค๋กœ ์„ ํƒ .ํด๋ž˜์Šค์ด๋ฆ„{...} ex) .imagebox{...} ID Sele.. ๊ณต๊ฐ์ˆ˜ 0 ๋Œ“๊ธ€์ˆ˜ 0 2023. 9. 25.
  • [html/css] css cascading ์ˆœ์„œ css์—๋Š” ํŠน์„ฑ์ด ์ ์šฉ๋˜๋Š” ์ˆœ์„œ(cascading)๊ฐ€ ์žˆ๋‹ค. ๊ทธ ์ข…๋ฅ˜๋กœ๋Š” position, specificity, type, importance๊ฐ€ ์žˆ๋‹ค. - Position: css ์ƒ์—์„œ ์œ„์—์„œ ์•„๋ž˜ ์ˆœ์„œ๋กœ ์ ์šฉ - Specificity: ๊ตฌ์ฒด์ ์ธ ์š”์†Œ๊ฐ€ ์šฐ์„ ์ ์œผ๋กœ ์ ์šฉ ํƒœ๊ทธ < id < attribute < id ์ˆœ์„œ๋กœ ์ ์šฉ - Type: External Stylesheet < Internet Stylesheet < Inline Stylesheet ์ˆœ์„œ๋กœ ์ ์šฉ - Importance: !important ํ‚ค์›Œ๋“œ๋กœ ์šฐ์„  ์ ์šฉ ๊ฐ€๋Šฅ position, specificity, type ๋ชจ๋“  ๊ฒƒ๊ณผ ๋ฌด๊ด€ํ•˜๊ฒŒ ์šฐ์„  ์ ์šฉ ํ•ด๋‹น ํฌ์ŠคํŠธ๋Š” Udemy ๊ฐ•์˜ The Complete 2023 Web Development B.. ๊ณต๊ฐ์ˆ˜ 0 ๋Œ“๊ธ€์ˆ˜ 0 2023. 9. 25.
    ๋ฌธ์˜์•ˆ๋‚ด
    • ํ‹ฐ์Šคํ† ๋ฆฌ
    • ๋กœ๊ทธ์ธ
    • ๊ณ ๊ฐ์„ผํ„ฐ

    ํ‹ฐ์Šคํ† ๋ฆฌ๋Š” ์นด์นด์˜ค์—์„œ ์‚ฌ๋ž‘์„ ๋‹ด์•„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    ยฉ Kakao Corp.