๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

CSS๐Ÿ”ง95

css ์ดˆ๊ธฐํ™” appearance: none appearance ๋ž€? ๋„ค์ดํ‹ฐ๋ธŒ (=os/๋ธŒ๋ผ์šฐ์ € ์ž์ฒด ํ…Œ๋งˆ)์š”์†Œ ๋””์ž์ธ ํ•ด์ œ/๋ณ€๊ฒฝ *ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง•(=๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ € ๋™์ผํ™”๋ฉด ๊ตฌํ˜„)์— ์œ ์šฉ ์ฃผ์š” ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ € ์ง€์› (IE ๋ฏธ์ง€์› ,Safari ๋ถ€๋ถ„์ง€์›) ์š”์†Œ์ž์ฒด๊ตฌ์„ฑ์š”์†Œ์ˆจ๊ธฐ๊ธฐ (= ์š”์†Œ๋‚ด์žฅ๊ตฌ์„ฑ์š”์†Œ์ œ๊ฑฐ = appearance์†์„ฑ = ์–ดํ”ผ์–ด๋Ÿฐ์Šค์†์„ฑ) (์‹ค๋ ‰ํŠธํ™”์‚ดํ‘œ์ œ๊ฑฐ, select, arrow) -webkit- : ๊ตฌ๊ธ€, ์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €์— ์ ์šฉ. -moz- : ํŒŒ์ด์–ดํญ์Šค ๋ธŒ๋ผ์šฐ์ €์— ์ ์šฉ. -ms- : ์ต์Šคํ”Œ๋กœ๋Ÿฌ์— ์ ์šฉ. (์ƒ๋žต ๊ฐ€๋Šฅ) -o- : ์˜คํŽ˜๋ผ ๋ธŒ๋ผ์šฐ์ €์— ์ ์šฉ. /* -webkit-appearance: none -> iOS์—์„œ ํผ์š”์†Œ์— ๋‚ด๋ถ€๊ทธ๋ฆผ์ž๊ฐ€ ๋‚˜์˜ค๋ฏ€๋กœ ๋นผ์คŒ */ input, select, textarea, button { vertical-ali.. 2022. 10. 7.
html textarea / placeholder / ์ค„๋ฐ”๊ฟˆ .inquiry_page .inquiry_area .th_top { vertical-align: top; padding-top: 24px; } .inquiry_page .inquiry_area textarea:focus { outline: none; } placeholder๋„ ์ด๋ ‡๊ฒŒ ์ค„ ๋ฐ”๊ฟˆ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ณธ textarea ๋‚ด์—์„œ placeholder์„ ์ค„ ๋ณ€๊ฒฝ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” or ์ด ํ•„์š” ๋‚ด์šฉ textarea ํ•œ์ค„์ž‘์„ฑ ์—”ํ„ฐ๊ธˆ์ง€ ๋ฆฌ์‚ฌ์ด์ฆˆ ๊นจ์งˆ๋•Œ ๋ฆฌ์‚ฌ์ด์ฆˆ ๋˜์ง€ ์•Š๋„๋ก ์ดˆ๊ธฐํ™” ์ฝ”๋“œ ๋„ฃ์–ด์ฃผ๊ธฐ /* textarea ๋ฆฌ์‚ฌ์ด์ฆˆ๊ธฐ๋Šฅ ๋นผ๊ธฐ */ textarea {resize: none} https://stackoverflow.com/questions/7312623/insert-line-break-inside-pla.. 2022. 10. 7.
css table thead ๋ฏธ์ ์šฉ ํ‘œ๋งŒ๋“ค๊ธฐ ์ด์Šˆ table-layout: auto; ๊ธฐ์กด thead ๊ฐ€ ์ ์šฉ๋˜์–ด์žˆ๋Š” ํ‘œ๋ฅผ ๋งŒ๋“ค๋•Œ , ๊ฐ์‹ค๋ช… ๋„“์ด๋ฅผ .tbl_fee_wrap .col01 { width: 20%; } width: 20%; ์ง€์ •ํ•ด์ฃผ์—ˆ์„ ๊ฒฝ์šฐ ์ œ๋Œ€๋กœ ์ ์šฉ์ด ๋˜์—ˆ์—ˆ๋‹ค. .tbl_fee_wrap .col01 { width: 20%; } thead๊ฐ€ ์—†์œผ๋ฉด table-layout ์ดˆ๊ธฐํ™” ํ•ด์•ผํ•จ .inquiry_page .inquiry_area table { table-layout: auto; } 2022. 10. 6.
html ํŒŒ๋น„์ฝ˜ ๋ธŒ๋ผ์šฐ์ € ํƒญ ์•„์ด์ฝ˜ ์ ์šฉ (Favicon) ํ™ˆํŽ˜์ด์ง€ ์ƒ๋‹จurl์˜ ํŒŒ๋น„์ฝ˜ ์•„์ด์ฝ˜ ์ ์šฉ 1. ์ด๋ฏธ์ง€ ๋ณ€๊ฒฝ png ์ด๋ฏธ์ง€๋ฅผ ico ์ด๋ฏธ์ง€๋กœ 128px 128px ํฌ๊ธฐ ๋ณ€๊ฒฝํ•˜์—ฌ ๋‹ค์šด ์ด๋ฏธ์ง€ ๋ณ€ํ™˜์‹œ ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ค์ˆ˜ ์žˆ์Œ ์ฃผ์˜ 2. ๋งํฌ์ฃผ์†Œ ๋ณ€๊ฒฝ ์ด๋ฏธ์ง€ ๋ณ€ํ™˜ํ›„ ์ด๋ฆ„ ๋ณ€๊ฒฝํ•œ ๊ฒฝ๋กœ ์ง€์ • 3. ์ ์šฉํ™•์ธ ๊ตฌ๊ธ€๊ฒ€์ƒ‰ png to ico ์‚ฌ์ดํŠธ ์ด์šฉ https://www.freeconvert.com/png-to-ico 2022. 10. 6.
css inline-block ์œผ๋กœ ์—ฌ๋Ÿฌ์ปจํ…์ธ  ์ค‘์•™์ •๋ ฌ ์ด๋ ‡๊ฒŒ ๊ฐ๊ฐ์˜ li 2์ค„ ์ปจํ…์ธ ๋ฅผ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌํ•ด๋ณด์ž. float ์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด? ๊ธฐ์กด์ฒ˜๋Ÿผ li ์— float:left ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ์ค‘์•™์ •๋ ฌ์ด ์•„๋‹Œ ์™ผ์ชฝ์ •๋ ฌ์ด ๋˜๊ณ  ๋ฐ‘์— 3๊ฐœ๋„ ์˜†์œผ๋กœ ๋ถ™์–ด๋ฒ„๋ฆฐ๋‹ค ์ด๋Ÿด๊ฒฝ์šฐ html ์—์„œ ๊ฐ๊ฐ ๊ฐ์•„์„œ class๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•๋„์žˆ์œผ๋‚˜ ๋„ˆ๋ฌด ๋ณต์Ÿ™.. display : inline-blok ์š”์†Œ๋Š” inline ์š”์†Œ๋Š”? ๋‚ด๋ถ€๋Š” block ์ฒ˜๋Ÿผ ํ‘œ์‹œ >๋ฐ•์Šค ๋ชจ์–‘์ด inline ์ฒ˜๋Ÿผ ์˜†์œผ๋กœ - width, height ์‚ฌ์šฉ๋ถˆ๊ฐ€. line-height (๋†’์ด ์กฐ์ ˆ) & text-aling (ํ…์ŠคํŠธ ์ •๋ ฌ) ๋กœ ์‚ฌ์šฉ li ์— display : inline-blok ์„ ์„ค์ • ํ•ด์ค€ ํ›„ ul ์— text-align : center์„ ์ง€์ •ํ•ด์ฃผ๋ฉด li ์ปจํ…์ธ ๊ฐ€ ๊ธ€์ž๋กœ ์ธ์‹๋˜์–ด ์ž๋™ ์ •๋ ฌ์ด ๋œ๋‹ค.. 2022. 10. 5.
css table ํ‘œ๋งŒ๋“ค๊ธฐ ํˆด ์ด์šฉํ•˜๊ธฐ tablesgenerator tablesgenerator ์‚ฌ์šฉํ•˜๊ธฐ do not css ์ฒดํฌ (html๋งŒ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ) ์นธ ์—ด ์ถ”๊ฐ€ ํ•œ๊ฐœ์”ฉ ํด๋ฆญ ์ง€์šฐ๋Š”๊ฑด ์„ ํƒํ•˜๊ณ  ๋ฆฌ๋ฌด๋ธŒ ๋ณ‘ํ•ฉํ•  ์นธ ์žก๊ณ  ๋จธ์ง€ Generate ๋ˆŒ๋Ÿฌ์„œ ์นดํ”ผ > html ์ ์šฉ https://www.tablesgenerator.com/html_tables 2022. 10. 5.
css XEIcon ์ถ”๊ฐ€ css์— xeicon ๋„ฃ์–ด์ฃผ๊ธฐ 1. xeicon์˜ get started ์—์„œ ๋งํฌ ๊ฒŸ๊ฒŸ html head์— ํฐํŠธ์•„๋ž˜ ์ฝ”๋“œ ๋ถ™์—ฌ๋„ฃ๊ธฐ ์ฃผ์˜ http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css XEICON ๋งํฌ ์•ž์— http: ๋„ฃ๊ธฐ 2. ์•„์ด์ฝ˜์ฐพ๊ธฐ 3. i ํƒœ๊ทธ์— ์•„์ด์ฝ˜ ์ด๋ฆ„ html clss ๋กœ ์ง€์ • html ์ ์šฉ ์ƒ๊ธฐ ์š”๊ธˆ์€ ๋ถ€๊ฐ€์„ธ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š” ๊ฐ€๊ฒฉ์ž…๋‹ˆ๋‹ค. css ์ ์šฉ .fee_area .fee_wrap .warning i { margin-right: 5px; font-size: 18px; } 4.vertical-align ์ ์šฉ inline ์š”์†Œ๋ผ ๊ฐ„๊ฒฉ์ด ๋ฒŒ์–ด์ง€๋ฏ€๋กœ vertical-align: -3px; ํ•˜๋‹จ๋งํฌ์ฐธ์กฐ http://xpressengine.g.. 2022. 10. 5.
css table๋งŒ๋“ค๊ธฐ (์นธ๋ณ‘ํ•ฉ) ํ‘œ ์นธ ๋ณ‘ํ•ฉ ๋ณ‘ํ•ฉํ•  html th ํƒœ๊ทธ์— scope rowspan"3" ์—ด row๋ฅผ 3์นธ ๋ณ‘ํ•ฉํ•˜๋ผ Executive Suite Room ๊ทธ๋ฆฌ๊ณ  ์นธ์— ํก์ˆ˜๋˜๋Š” th Executive Suite Room ๋ฅผ ์ง€์›Œ์คŒ heigth ์ค„๊ฒฝ์šฐ ๊ธ€์ž๊ฐ€ ๋งŽ์€ ์นธ์€ ์œ„์•„๋ž˜๋กœ ๋ถ™์–ด๋ฒ„๋ฆผ padding ๊ถŒ์žฅ ์•Œ์•„์„œ ๋–จ์–ด์ง ๊ธˆ์•ก ๋ถ€๋ถ„ ์ •๋ ฌ์€ ํด๋ž˜์Šค๋ฅผ ๋”ฐ๋กœ์คŒ 4, 800, 000 ์ค‘๊ฐ„์— ์นธ๋ณ‘ํ•ฉ์ด ์žˆ๋Š” ๋ณต์žกํ•œ ํ‘œ๋Š” ์ด๋ ‡๊ฒŒ ๋งŒ๋“ค๊ธฐ ๋„˜ ์–ด๋ ต ํˆด์„ ์‚ฌ์šฉํ•˜์ž https://www.tablesgenerator.com/html_tables 2022. 10. 5.
css- calc ๋กœ ๊ฐ€์šด๋ฐ์„œ ์Œ์ˆ˜๋งˆ์ง„์œผ๋กœ ์ด๋™ํ•˜๊ธฐ ์˜ˆ์‹œ position: absolute; left: calc(50% - 220px); right: 0; bottom: 0; 2022. 10. 5.
css ๋ฐฐ๊ฒฝ์•„์ด์ฝ˜ sprite ์ด๋ฏธ์ง€๋กœ ์ ์šฉํ•˜๊ธฐ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋ณ€ ์ปจํ…์ธ ์— ๋“ค์–ด๊ฐˆ ์•„์ด์ฝ˜์ด๋ฏธ์ง€๋ฅผ ๋ฐฐ๊ฒฝ์œผ๋กœ ๋„ฃ์–ด์ฃผ์ž! ๋นจ๊ฐ„ ๋ฐ•์Šค ๋ถ€๋ถ„์— ๊ณตํ†ตํด๋ž˜์Šค๋กœ ์‚ฝ์ž… 1. sprite ์ด๋ฏธ์ง€ ์ค€๋น„ 2. ์‚ฝ์ž…๋  ์ž๋ฆฌ์— background๋กœ ์ด๋ฏธ์ง€ ์ง€์ • .board_pagination_wrap .btn_paging:before{ content: ''; width: 14px; height: 14px; border: 1px solid red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(../images/sprite_pc.png) no-repeat; } ๊ณตํ†ตํด๋ž˜์Šค๋กœ ์ค€๋น„๋œ ์ž๋ฆฌ (๋นจ๊ฐ„๋ฐ•์Šค) ์— ๋งˆ์ง€๋ง‰์œผ๋กœ background: url ๋กœ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•ด์ค€๋‹ค.. 2022. 10. 5.
css- text-overflow: ellipsis / ํ•œ์ค„ ๋ง์ค„์ž„ .board_list_wrap .link { /* ๊ธ€์ž์•ˆ๋‚ด๋ ค๊ฐ€๊ฒŒ */ white-space: nowrap; /* ์ž์‹ ์ด ๊ฐ€์งˆ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€ํฌ๊ธฐ ์ง€์ • */ max-width: 90%; /* ์ธ๋ผ์ธ๋ธ”๋Ÿญ์œผ๋กœ ์ง€์ •ํ•ด์•ผ 100% ๊ฝ‰ ์ฐจ์ง€์•Š๊ฒŒ */ display: inline-block; /* ํ•œ์ค„ ๋ง์ค„์ž„ (์ต์Šค๊ฐ€๋Šฅ) */ text-overflow: ellipsis; /* ๋„˜์–ด๊ฐ€๋Š” ์š”์†Œ ๊ฐ€๋ฆฌ๊ธฐ */ overflow: hidden; } 2022. 10. 4.
css- pagination ๊ฐ€๋ณ€์š”์†Œ ํŽ˜์ด์ง€๋„ค๋น„๊ฒŒ์ด์…˜ (active) ๊ฐœ์ˆ˜๋งˆ๋‹ค ์ปจํ…์ธ ๊ฐ€ ๋ณ€ํ•˜๋Š” ๊ฐ€๋ณ€์š”์†Œ๋Š” ๋ฌด์—‡์œผ๋กœ ๋งŒ๋“ค์–ด์•ผํ• ๊นŒ? ๊ฒน์น˜๋Š” ์š”์†Œ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— position ์•„๋‹˜ ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ถ™์ด๋Š” ์š”์†Œ๋„ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— float:left ์•„๋‹˜ inline:block์œผ๋กœ ๊ฐ€์šด๋ฐ ์ •๋ ฌ์„ ํ•ด์ค€๋‹ค. 1. html ํŽ˜์ด์ง€๋„ค์ด์…˜ ์ด๋ฆ„ ์ง€์ •ํ•ด์ฃผ๊ธฐ ์ฒซํŽ˜์ด์ง€ ์ด์ „ 1 2 ๋‹ค์Œ ๋งˆ์ง€๋ง‰ํŽ˜์ด์ง€ ๋ฒ„ํŠผ์€ ํด๋ฆญํ•˜๋ฉด ๋„˜์–ด๊ฐ€๊ธฐ ๋•Œ๋ฌธ์— a ํƒœ๊ทธ๋กœ ์„ค์ • ๊ณตํ†ต class ์ด๋ฆ„ ์ง€์ •ํ•˜๊ธฐ btn_paging lasg ๋งˆ์ง€๋ง‰ํŽ˜์ด์ง€ ๊ฒŒ์‹œํŒ ํŽ˜์ด์ง€์— ๊ณตํ†ต์œผ๋กœ ๋“ค์–ด๊ฐ€๋Š” ๋„ค์ด๊ฒŒ์ด์…˜ ๋ฐ” ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ณตํ†ตํด๋ž˜์Šค๋กœ ์ฒ˜๋ฆฌํ•ด ์ค„๊ฒƒ. > ํด๋ž˜์Šค๋ฅผ ์ •ํ™•ํžˆ ๊ฑธ์ˆ˜ ์žˆ๋„๋ก ๊ฐ๊ฐ ์ด๋ฆ„ ์ง€์ • 2. css๋กœ ๊ณตํ†ต๋ถ€๋ถ„์— ์ž‘์„ฑ 2-1 ์ž๋ฆฌ์žก๊ธฐ ์ „์ฒด div_wrap ๋ถ€๋ถ„์— ์˜์—ญ ์„ค์ • margin-top: 20px; ํ…์ŠคํŠธ๊ฐ€ ๊ฐ€์šด๋ฐ ์˜ฌ ์ˆ˜ .. 2022. 10. 4.