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. ์ด์ 1 2 3 4 5 6 7 8 ๋ค์