syleemomo의 IT 블로그

프론트엔드/HTML & CSS 강의

10. 이미지(image) 보여주기

syleemomo 2023. 6. 10. 17:13
728x90

웹페이지에서 이미지를 보여주려면 img 태그를 사용하면 된다. img 태그에는 아래와 같은 속성들을 설정할 수 있다. 

속성이름 (attribute name) 속성값 (attribute value)
src 이미지 파일의 경로
a 태그의 href 처럼 절대경로와 상대경로 지정 가능
alt 이미지 파일이 설정한 경로에 존재하지 않거나
이미지가 깨진 경우 보여줄 문구 
width 이미지 너비 
height 이미지 높이

 

앞서 앵커 태그에서 만든 프로젝트에서부터 설명을 시작한다. 

https://github.com/sssssqew/html-css-class 

 

GitHub - sssssqew/html-css-class: html css 수업에서 anchor tag 이후 수업부분

html css 수업에서 anchor tag 이후 수업부분. Contribute to sssssqew/html-css-class development by creating an account on GitHub.

github.com

 

전체 페이지에 걸쳐 나오는 헤더영역의 로고 이미지 경로는 로컬파일이 아니라 이미지 데이터 자체이다. 하지만 너무 길기 때문에 로컬 디렉토리에 이미지를 저장하고 img 태그의 src 에 로컬파일 경로를 설정하고자 한다. 

<header>
    <a href="/index.html">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAkFBMVEX///8AY0EAYT4AXzsAXTgAWjMAVy8AUiYAXjkAVSsAVi0AWzUAUSQAUSMAYT0AXzr4+vna49/k6+i7zMTw9PKOrJ7K19FbinWguK2swbfz9vWUsKNDfGMea0zY4t2Co5R2m4plkH1NgmorcFOku7DE08xfjHg2dVp9oJC3ycEkbU9wl4UAQQAANgAASRNRhG0JdMalAAAcV0lEQVR4nO1d54LiOrLGUcg2bqIJJnYTm7PD+7/dVQXJxglmT0+3mb31Y7cPY4xVLlV9FdXptIaGyTzdXKfLj5WlaPWxnF436TwZ9n/6wdpFw9Fkagvph2HXsW3bQlJ/ON0w9KWwp5PR8KefsRU02B9D6bkOs6iKbMf1pHfcD376WX+U+qNrGHhOPZvy5HhBeB39j+7J/uUW1TEqjusYFt3m/3v8SnaiXqTi47GGW8AvsTv89NN/J/VT22/afEGS+A3/7AR2uvjpNXwTDa9R2KDOlUK3Oh2r+Yowuv4v2MfBNOo28UGRt+909t6Di7rR9G+3joObeGz8JFwpH17miNvfzK7x7glWWe4Grj27j690xG7802v6UzQRjzYgUoTaaBg9c21XTH56VX+EDvEjNcTicqPrb8+BVc/++4DEYiob7VtGQULfSILnrrfl9C/DERf5UE6U3+y4oedb+juW74Wu48QPmewEl59c2xdTf/rItsUisE633Tndz42FG1z26eZ6O1mBqMXzTHL61/hA6+4jy2bfmu9we8Qt11l/z1r+NKW9x9rKXTbdYfkYRti99LvW8ydp+pSi7q5qEdN49RTiCKbfuao/QuPVE+ASRSOsgeODZkcyI7ee369Ba//JlSpuiaTqDol4/g7+SyuuUe/ZhQL15uU7zH/nDnZv9P1r/CqaP+WyZFT2XSbi9+5Qxe/XoFnTSiuxpixwa1KFz+wmHCFmP7PWf0tpE68+p5Yo5yqCgtoquTyOFwhr+tnErZeEEI28svxxp7/eHwM/Dwtsq3iTu4Bp1w+O+3W/M26KOb8ktxr3oOLLiS5LttIzDAlL60xD8wVPXlnuTs32Uey/c51fQZdHut03qnhv6dhNVAJKY30bzzIsmDcKFtzmxfzq5LHF9zPfdx4ico3fyzd6R23uhpmV6z/ileJWJWJrKw2fsPjuOfeFLXzBNygpNftxBKwR29ylz8Sb5QulfvpNlQvZ+89vusSLLV//xzTIHD3fisO8oIyfwW52/Dohm1N9pC/Hxe41/53FR8CiNrCU7LgWu4rn4OMuELrrVt6sQM7pe1b672kb1i7CfncUvOL1Rveb5YM8uz05g3ZEamr9cXeRzmMA4Hp7r+dWuP2Wpf5rujQorPDS6Q/mVzcAxeNuK759NDg02FX88xa/GLjX+aDfudS/FUu8hElsVu492l3rs1QLjUqaZWiFseMiOXG4Kunphbp5GJxJBgeNJle8QsDm42EdA9He9UogdP9PtHrfnTeTyWa7e19F/xT94jT0XAO4HtRDfHRaT5sH2UE321xp9Fb4clKQhnERMHWjjL+7BxjCa33+df0QjYos5jRe/WaC9JDbmKOH1RBR22OBq8cIy8tpqt/UwrnLnwDy9upr1vSnaPJEit6tsnK/Tccnshjt3oiEgpQSblxDdbD99yhpdqi6HqKKqM1uzztA93DWuTamv8phq9+nZksod50ZcMupcM3bQgfUuYpZnVmjB+dVx+fGySXdTk8rVwoh3dVpuk0vRfvIlDZu9wieAEVLtrfEhl43oqd54zaRRTTaT9JpqBwhbLFg+YMGC+XUhNM0KV6+aLSEAtAZhQ3bq+O5DpSgZtq0E+/CM511eor8MHO+oZ7GzraZE/rRKb2DAY1hmoB+n1whv63pHvbUQkqwHJsWlIVn1ptY5nLOcRgIa3m7LS0R5D62Q2lvDL8awzTuEa+Z8dO4382F52jGesTjl9lUWMU+dH+2ki5cxpe64jQzLFnPTrquEi9x5WpG+3Hb8B5sh74910/TztyY1rk+K9VDk2KJFgpobAUnK8ITZLccsS2YenUF7M6PE4mJ7eEViyZ9qFX6QYPW8Hu58ByZynWpKzyWDdlQZ5dMTT1ucAX323+vQEXDdx9cYoNFumKa7BqqCGNduzTUr8prY7LHIB+hP0maROsNG1JiZ6W4m4JTHNXsF4VCFOaH3PQKd6zjvzXcVhrAq8XvK1DdV9NIi32cRXTz0Rrbtss6LHy/uMCri2zIyBwiS17AurqXZRle3d83F5c5abn221ctYjKfVPOPNGdVE/oyWH18WFL6bp5jwbkfWt650w+sqAE9Km75/c7ZU5ZtmwcktutJaX18rALps+UMsz230VbAbqwq/AkaGKXrZyIyFsApsZwlnHMYHjaWq3eHFUw6J+dNeSRXN2x0eSehe1Uq0HFOnU2QmU5rc2AtN05mSwH8yoVHs8Yy0baulQwmytynH45vzQpV6lsHhWJn+xsIUnh95X4/AtorW7nEfQ/8pLNv70h3be+vGc8sP85HR40Q3kPgFpB5jXcJrnNYClhNQe3E1tp2p51hzwqUQjm+eQ/iWhfP2an/DSCMMHWttQX6yCsVkV68PFuuJojjFy/8WTLqPWeOFJXkf4i7MF51ll0L9BxY+nEPsFAyT9P9oeAE9g/7NJ2vwTnojQGLgPWwuksyva5Vwhr5H8yMcctU/FRDn+YNNYoQi3c7qRcNOqPAEmv04lYbqZzoMPR7t5wPuL71fPWh58vNCp2otbDkqLOO/FmfcH/UyAUTtXVaVcjcN86a1+S4pnSZGI57oEdWNpaCAMBwPT9AX9rpbfXV28jBZGrgQzAREckyhpexdaMxJ1ujpmKsuQEaok3Z/It5rCbnYkv7Qs6VYVNY4BCgZ4RecTxbD9bzG/Sd+Bx1PvpQwXycrwfJDORWLHC3BweFNJxlZ076W24bftDkYB/pxG+lnQbVTb7FkTjq3JTXCGEctXU99fFIfRyw8hlCL0UPxaDfg4oF/XnALqePWyoNlQfILXbesf4XjQf29iVh/y8ibaWbXIspP7lcdD5j2Yet2912AETlPCRgQYBqC2BS13wsOEymLFykvioUUtcBwLJRzMi4YLL+mu8mUycr6xXuVEe7UiVYwCW1dXF3gFsczhdbK5Kr3SVRn+JNUOGsNycZebsxuAIAHvBLI+BZkJgSyrCeWya3WKzs/UGaMCJtyA/s9I5wIa0Bz65gLNacoZ/kOmDebMfztI1AVvguAKquA/dHr2UoEWImAfS7apXk1W+yd7bSbnuSYtovrK/F2Jjo0gw0OugqZQRxc5TyNKSNJ8UAH4ESSb6yB7hLB0Mtf1P3u2P2wuzW1Gv1+Yn8Wu2epS+UEZ+FuKMErwBFzpPY5GN7gWdT8FBJlu1jobwdBh7LJL4XUHA7x5uZ3+UURSXtffO77SB2WZ1a7z4rgAA2LWOIDYwlY0VQK8FocVhGMlru16PVL5TPuWd/rke3SAp7RjgBnRZlQqX6930IEC2LAvZqyxqWdI3fFqWlEyl1fd2LrNIdpEbgkw8Cy0E3MtCWvc+bmCv+AnKcxnhXwAmwdztXZS0H+H5ELnSsRLL2x329/dtBR3x59dG7XImpAC6gbKjlks+tdFZYtX97eTWj1BPpLMUsYLWSS0AYWTC+vog0QazvNMCxbyUMVfq19iZXLAIWTWEC0DqKWSRQ73G1jzTLWwv1JZr3oOAv7iiBX1pmxqG+CGQCsmXb/93avpow2eIWWsKTyW0VyHh5HuVLOMCCq00bdJBZ1CSwcZsdSiQFtMj6K9YiswIEqZucyYySw3lpS381nRRk/AZXiXYMf1D7yoo/858kV6m8Ykr2efk6KuCKwlegqpXOIryv3J3HCkVxmOIs6kugs5TfA3hrno/JK3/bRrAW+qbNh+hTobWgHZVt6ontMPfe9lbtxAsQCqV1AF8prUP2fMFuTyMpNwddRkALoPGUDQXzUDuTzJGrnB5chPYT0vstNHFz7R+Lie+VsziaQCgUs9AVlNqeL+37WtnhZJIkk8ldYO+TojnIHYSyApk1qC+osD1/Yt7gULQFw+8cYwgHW8Go2sYC7aKEAVO3zNtlzCUkoPFzgtn/T+T5vhf9J/fZQmROUJxze4bFzOTdr4ZiqyOnSc9pR+DhxF7qcK9rE2JPWNPzZHI+FnpOQbKUIKJETULO8qmtdRdv6l+WUXS6Gxqp/GeKGygfCRNBSsLg/4uS9XmEX53G0qOkYVec9iShSdCOhJjS5NPtNntCV7zPtdkv9FGCllWChLgKdpTAlVy7j+K+N4cqSaAhAV/NPkRRW98zy3iA4/lSuLwbZQxPZwpGfpjUApxuV8u+K86ZtrkUFDAAeMUkgu6eDgYMREVbZp6U6025P/CuNZAH8TwU759J6PAsNK6gpxM1N/9WuqvCc8Umv32KEQUQKTBo+JYh1UjVU8u4Wf1uXK73cHUSMLbRlO4LzTt3wcfFJspHLmQbgNYw2wputL17oqJgUWofYjMgJ7CHSBQOgSmcnP1aXjeTNJ1srstfDL/6EiLvfD/ESwOO1GyKcRz/Ltg+3ubY1YqGTa03bE+cC5vpswgiMICnVkhmUAkCa5mVbbLGG+m4YRgqmyZ1lOrscoJNaUCSHWUUke/L0g/cgWNkl64fDNqQxE8ix3FcT3zMiiGjikF0kj6mxUO0QiKwBvSgX7yOqZr451DjhrXU0QP1FlDPl2uaZNGdX8w+heeqR2xF4/RgN51eJ5eCUC2Gg/GxDORxEwVc8AZJsDeKBgS5YqGrcGzbiUwZwIduCD6+cTGq2oXoX67Lb8M5jgfFcfvDy2R3m+7aIFkVNNrFIgiCCqeHUjQO1yVBaz3ZQfCmTWw42X1+7owcnHnLIW+N740GNa1oznSkDER8bVfCvpYWm8CvbShHHQWZQjSD4AeT+gJZqe49hb5Y2qLAGtqPCvpiCqh2Gobt+Dlnp7XUP0eNjTtQeAvgAUE8BHfY2oMt6FVoFRgQwTsUShfg66gLATgsGts43GjTlrh7DU3ko45JEB9lxMj6gWhQvS7uqHIH1AGCYaTUQfjIeCqAhmb18qgPVLZ5LE3qNXR4E2ldQwKFiBxZQbo6KsSXqQWIjD4kvgi7QiCadd8D8lpaBc894kBQQypqKpXtuENeCuoh0F4cHafrg1vOqo5vXPyB/wW2FTUV5AIxXVZR0UvXy0DXmFpesGmTFRwfkuSwvzoBb0BXfKTJsN+v4RYkYiGygssdBEZpMb50xEYXg2x4xDcX0ILrhCgcWA1/jGt6B2S/PzykH1ohuNK+7g/J+tCGbvzhL9/3wpIfXfRxNQWUbqB6G/QrI7ze7ClXrrZpul0Z7ceFl8Aa9O+gNgZTHjWRP04RDrZ6Sr/d9Xw/+NUGdyfvSMeZc1hKvzPhTjIBB+AAJYtzbp7dDcNutsUIZeHPCH1nXatURcYpH1+jXI9HKxzpLHlny2X29kpum2YWICVHs8CICzOr8CU7WzwyS+orQfPNa5iVq3sfLrNZ4a0I0XS4kC0OPvOF/3XNSChZPoNRrFagbYi14b7lBy5LQ+wG6j8tU5kt9IIRnHbqJeuuGOuwCvh+7Qj+nUJwpKPlXY9EKTquCaqOx3cKniIKUMILdd7ryUnIIJDiNFlTUIbDqKs7BT/GKucaZt1pp9EyAkc6bEcdzX433W3uHOnhZbar6UbClQOaxNcPRWrcetjNNd4M12u9XkD2JBPQZEjejmRsO63BWc51dsnzazzfHKe7NjaHQcOl8MK6zq2IEzukskCxUVAFJPF+oBYRGEmSFDB+FDBVSotSPHXujhN6YtVSOHpHqWwaHI2hBYhLYWQUGn54F2Ze8j1lvjbuQ4SyoOmggL6zaXAY7DBos7MDNLIbHR4KZCqPMMBNAYVE3HkKcYpehXEHxcRFHdAZS/pr77OXWArF3r8Zq82BmuEyaB5Fg5l3tVSqe8PVU0EJAM3qNCh6OSRyyFtKYjtUZvhgEKMtq5pjW0GD3aOzJrB7BBZIpWcAPGmKTx9QQK9yYUOweXQV1KVR+m9hnMsHYyud1p0pNu73x0l6MuUgtlsdfaBY6CrmwNW0ayrgYApPXYEVKCae9XNQGt3FjZj0eEtXj+sKQ9ME6ojTLIEn/NNceJImv4RpJYUkz3Kzn1UFfDEkvAt5SsUMMmGkg+eynJfJCAEWRVGhLi1AM5f6VojGc1kZvN5vqFkTnwiCIL/aURdyX/jjWVikMCw7uTQ7VPHFyAb/RZpH1G6X/D9DXRrNEFN/SVBlVTNREWv0szHEVosKcLMS666eZlKRd8E1DnockoHJ27rdDlxA0dAjPcqiz3gtaTz1V4S52jKQ14Vr+8D0Z5ZnMf4UceLAFkf9SGVm0WQjm1cI+S0tLe8NCosIFBPXYYKYOYj0ge+IKcoTj0yVX//IjnR7mgYoHGN7ViYdJWZR9/LUZaadoRWMpDD1m0roiUAxaf2m7hyia62YRHNnPopGOFcSebCxtq65Yf1bKem5obTz/sWgGPpDebpI1uNQbs2NPjhs9FGsCTxvPeIU5pBQZkNpfuysGhTxw12mfuYEoduKdDTTdjPLnmY4WQZFXhHg9DSoBM3DI+agOPbxBBQYCsR+9tBoMGiCxmbQ0rwV31+mmcFI0vP2ixb6xTQ+Vh1Pi+VVUOuHuiOH1y/BczXqkJwIyHsB1hB7T1wHOCjHg+yw1/5TNWeVB4nSyJVAd3zhykkUwTaUT2MoEzjarKUTw18I9UDNQ/XU3W7Lz2cYL6vTFMgOCORhvB1nCHj0BYwrP5GswupRbtED64c6HFPbIG5VRQ+wG5ctFq5ZnXOIseRtl9U7wHt2oDE0/FRPLjCYJ3PBAX6m9Ahjh3URZke2NKo1SF39fm3n7X5fIH5e2hxhgZgn9wmg4n5qiCHYBG6IUlzn+OrUofREoXnAzo7b9N7SNiVZiX6JQLMqFNZ0d69FMNxwijn7DHNPeBYSCFm9V5gn8BC5bQVyGxRVPTqkDu/PJLM/djcrS48H4tefWPG/IDO4x/VSUBR5LWLTqIr3OCuv4oJlSmc9NWgOLuS41tVk0uCWuJ8n+QMnUUMOU3P+UesG92hgKDmCl9MioUuGD3YfRqOAQznL9lTDFsJSRuYgtcS32OQ7kjBL0lL7fqe/Y0RR76P/FC1pOIwuSDNhB7en3yvwCOMBwywPjXrbeyL6m7MEfROFAA6awP25p9mlR2p05jT6ph29FXmCOUeunb1DZJbjia2x3lDmSIcNoWhkCPOZLlNIe3H2Z2TQPGTSsnYDGE6JIC8w3xrAkIOWzThCsr2eSWWN0olyOaR/vOQjI0tdyg0yxtgBMVdzfwUQDqwRtAtvJioPpd55senPp1L6njVJDX92Pa8lPax3NDLe2ET6ob8dJUVVAaiUAKhjG00CEP6xBgZ9x10W6Bvi4BXQk36xEHV4uGzVz5uiv2HaQsEyNF6BenGr5lJ0NdKCs9G4qHstnhCtYU6wIN1DMUZAWd2Kq7HGxPtsMXrXxEfWVo7wAQgqstgfLR6OaHIeHLoNU1Jc2uTAXEJmIFiVZZBUfBN77Wj0baCLPpy3slXGYIZBZEIufTAFDRN/Ojx/h0+tA+NAUXiwv17F1bomxW750X1jDW0sp/JwVIjNBLiEc2jGsWCUpmm4NmYVOb8D41IoUApfqwyEZYEP2eYozSlyNKtus8rY5MpIg51NFQXz1nQKCAxL57ojnHxK5i2s8yqT2U2zy4nah7E06Tndou6NrnH8EyofGPfAoXc8FaZ+I+Im5PNnIBhPMWUcc27XOMlGwlt8LAONq7Jrn5CT7aRyrq7JWVxy7ChRnpWQrSBer3nWYu1PYVqnzQd+IAaKnTpXbML1VLR7SBORW3h7U/i8pk8asDtvwkXGVD1Ws3xOt34U1275UTKd1Ouu2C2+nO/3yPBkfGsy+AC2GDNQdW3lRsRNyDydGog1y+51umfI4My3GVvddh9SpDAOa9S57/t3hXyTSJcegPdmpIO3LAYBKy0iZD8YTYFKZKkEuKELde+F6+r77Fv3ly2cBH9HrNmn8i700p+ZuhoHolGU8xzlUvhgHKsyoVBDowEuMJe8YphA6Zg2gzA3ywanCEn2zFu9CQ0tkTXa5Uu2MgsFeocs2AJSxs4dRgHLgS1MaLCkgGvJfINXER5yITO5ZaRCQciwvYihREuOLPm32Wxzk3dHtnujjSk7TnNYqdqhJDeP/l6ZrBlw1t3cZSncQN4m+/2Ug/Huq3BrcWJehd2pDN1Cwse7QFaLFDvmt6ilnJsGivcKMhauMVaKOwtQbDAoths6bihvOmninlrRffKQ5pQ9sEVaddyhn3RMFw5OkWdNhQkavwCbcHI6l1ZNQsNN1EsVrVQgpSk7p712jIB6SFAiY9kIt8pn7ygXB/tX0RKAL8yHuNN8t8I+RHHjADR0n1Oob0w9reUWOjStA5Rlb/tty/2XpJyS2Ga/r7ALIdSwNMwC4KRtHQhOXEDcGNjng1vBGhA4RWYty0l7SvR0xo5tvbWnHusR9ePYQ2aMSweGQZwAq//xQpAW3YEENe1Fzxiu1E0qbxk7enTlvpiH7pJPOvRtuzWFfo9p+AvR+6FcJQJKR9x1p2pm4N+FfOsqx0CQI5ZC2MfQS1ZSWl3yFdetaMR8mvDFjsrVnoDFE91AR3pKd+yAditGTHHmO5dC4PkdpL8AcoDan5VLHHrIrdewhHmqqIxFKYFSBcpWIFLiqWyYaCxieKy/5JgrIgVKoIG/jsUSFWcL99pX2vAEmSHBXny3Eug059AJ9sCxsUMIXyzAxoS1dvUgZsEpRtB10Co1yPrCYpYy2309sVLqlxZi+4keyk41yYCXeGwy7ELdsYM7rlT1ABzQM+6wGJLyQFggCTvZTNd9ez9w31Cv3SVsNZQCL+zu0NT14/zjvhn8Qb4MA3gclVLj7rDLiBCeu8U/WLT03Gbb7XeGWJ4p2t44V0Mzwf7JkMwWjvWGACnFZXDyg84oY/9KOVaHCUMdVDhl0R0AuxgyHVNNhY8/I63ag//aT/MelVRTNTGadQgH3wkWaykQvqqaB4StnIDHVD/bAGAcJh4pVE2b+SBexcmpotEW/pfORaHYOUBPkWksfdAlTgesOi0OE9Y6R4+AXhitRQjtiriXzkjZtjlV/xThiHEWD0BGbAp3iJs4awwYoDotDdZB49J1DpeBQfRxz1FJZP2I9Vcihluop2jsBwoQWn3NHxKsynQ7Mogr4Cl7RJptbeZnsLNefzLDC9EV10L7LVfXgG6hrslDwapJW0H7iRYt4jBdCFiju9NXKMZV9O6/Hs0iPZBgkBXDoLLWGAsFS9ZIBl6pC9JgRiIbBSq/ASnFLoLGI9ZeiNY2DxoF08YqHWFAlBOs+ia3U86bRijBl4JAEWBVMMv5GzYh0bEH6hdXSsFQFBeu0CLBKgZJM8JwqdZaOM6TRAsjpYjoJ71WHWD4b2lumkao+gw1lm5DwUhWQzGjnQvkIIxnreVqwDp6YXRVRwCTyKPJ7ybylpuanZDJGr3m9i+g2haWIn8N/TJxBQy96In5FHtoqKTCUnCzZz0D4zHH0bbuia+iVHQ5nIw5fI7NLHpWk3oHImmiy7EKnpP4wurWFoa8PC12PVwliooGpNSR0mj4cR/q7gCM5RBAs16gAfNf0ABVFkZIdSwBF998Kg7uNx3WwvgERUxbNVXzTxEd9MgaGwF+1Hg9HSbMsXjk3DPNr38JbaVtQusYe3/Ucog6Tn8B4g2Nh/z+XbSYWYHDBWoILR/VwWOqlkVxIZ3ATv9mXVWiZPcPrRehgPPACcboIUON8T+7Fg1p+Cbqk2Qhsx4dFoY5Q2bW4oWSzV9Nh57znGQ5vRaXaX8TLWZHT8pHvTtSetPZKyYEv56GlwdIIB29VPHC/5Oi/wP5gpsRymn2QwAAAABJRU5ErkJggg==" alt="sample logo">
        SunriseBucks
    </a>

    <nav>
        <ul>
            <li><a href="/html/home.html">Home</a></li>
            <li><a href="/html/about.html">About</a></li>
            <li><a href="/html/service.html">Service</a></li>
            <li><a href="/html/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

 

우선 프로젝트가 진행중인 루트 디렉토리에 imgs 폴더를 생성하고 폴더 안에 로고 이미지를 다운로드 받아 저장해둔다. 또한, 인덱스 페이지에 있는 코끼리 사진도 다운로드 받아 imgs 폴더에 저장해둔다. 

<header>
    <a href="/index.html">
        <img src="/imgs/brand-logo.jpg" alt="sample logo" width="50" height="40">
        SunriseBucks
    </a>

    <nav>
        <ul>
            <li><a href="/html/home.html">Home</a></li>
            <li><a href="/html/about.html">About</a></li>
            <li><a href="/html/service.html">Service</a></li>
            <li><a href="/html/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

앞선 수업에서 헤더영역은 모든 페이지에 걸쳐 재사용될 수 있도록 모든 페이지에서 동일한 HTML 코드로 작성되어야 한다. 그렇게 하기 위해서 로고 이미지의 경로는 상대경로가 아니라 절대경로로 작성해주어야 한다. 모든 html 파일의 header 부분을 위와 같이 동일하게 수정해주거나 header 부분을 복사붙여넣기해준다.

width 와 height 속성도 지정하여 로고 이미지의 크기를 조절해주었지만 사용하지 않는 편이 좋다. 이미지 크기는 CSS 스타일로 설정해주는 것이 좋다. 

 

alt 속성은 아래와 같은 몇가지 이유로 반드시 설정해주는 것이 좋다. 

  • img 태그의 src 속성값으로 설정한 이미지 경로에서 이미지를 찾지 못하거나 이미지가 깨진 경우 보여줄 문구이기 때문이다.
  • 검색엔진에서 검색되는 키워드이기 때문이다. 
  • 웹 접근성 차원에서 시각장애인을 위해 스크린리더 프로그램이 읽어주는 문구이기 때문이다. 

 

<header>
    <a href="/index.html">
        <img src="/imgs/brand-logo-1.jpg" alt="sample logo" width="50" height="40">
        SunriseBucks
    </a>

    <nav>
        <ul>
            <li><a href="/html/home.html">Home</a></li>
            <li><a href="/html/about.html">About</a></li>
            <li><a href="/html/service.html">Service</a></li>
            <li><a href="/html/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

index.html 에서 로고 이미지 경로를 일부러 틀리게 설정하면 아래와 같이 alt 속성값에 설정된 텍스트를 보여준다. 

 

index.html 파일의 figure 태그 안의 코끼리 이미지는 코드가 재사용되지 않으므로 상대경로로 설정해준다. 

<figure>
    <img src="imgs/elephants.jpeg" alt="Elephants">
    <figcaption>Elephants</figcaption>
</figure>

상대경로 설정시 ./ 는 사용해도 되고 생략해도 된다. 

<figure>
    <img src="./imgs/elephants.jpeg" alt="Elephants">
    <figcaption>Elephants</figcaption>
</figure>

 

index.htm 파일의 전체코드 

<!DOCTYPE html>
<html lang="ko">

    <head>
        <meta charset="UTF-8">
        <title>앵커 태그</title>
    </head>
    
    <body>
        <header>
            <a href="/index.html">
                <img src="/imgs/brand-logo.jpg" alt="sample logo" width="50" height="40">
                SunriseBucks
            </a>
            
            <nav>
                <ul>
                    <li><a href="/html/home.html">Home</a></li>
                    <li><a href="/html/about.html">About</a></li>
                    <li><a href="/html/service.html">Service</a></li>
                    <li><a href="/html/contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <h2>main content</h2>
            <p>주요 내용입니다.</p>
            <section>
                <h2>section title</h2>
                <p>
                    section description
                </p>
            </section>

            <article>
                <h1>List title</h1>
                <article class="item">
                    <h2>item title</h2>
                    <p>item description</p>
                </article>
                <article class="item">
                    <h2>item title</h2>
                    <p>item description</p>
                </article>
                <article class="item">
                    <h2>item title</h2>
                    <p>item description</p>
                </article>
            </article>

            <figure>
                <img src="imgs/elephants.jpeg" alt="Elephants">
                <figcaption>Elephants</figcaption>
            </figure>
        </main>

        <footer>
            <h3>Posted by: sunrise</h3>
            <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a></p>

            <address>
                <p>주소: 서울시 양천구 목1동 123-123</p>
                <p>전화번호: 02-1234-1234</p>
                <p>이메일: <a href="mailto:example@example.com">example@example.com</a></p>
            </address>
        </footer>

        <aside>
            <h3>사이드 메뉴</h3>
            <nav>
                <ul>
                    <li><a href="">메뉴 1</a></li>
                    <li><a href="">메뉴 2</a></li>
                    <li><a href="">메뉴 3</a></li>
                </ul>
            </nav>
        </aside>
    </body>
    
</html>

 

https://sapjil.net/placeholder-images/

 

샘플이미지를 간단하게 삽입하기 - Placeholder images | Sapjil

이전에는 데모사이트를 만들때 분위기를 맞추기 위하여 무의미한 이미지를 다운받아 사용하곤 했습니다. 요새는 경우에 따라 다르기도 하고 자주 사용하는것은 아니지만, 필요한 경우 Placeholder

sapjil.net

https://geekflare.com/placeholder-image-generator/

 

9 Placeholder Image Generator to Insert Picture During Mockup

Want to instantly generate a high-quality image placeholder for your project? Check out this list of placeholder image generators today!

geekflare.com

 

더미 이미지 사용하기 

상황에 따라 실제 이미지 대신에 레이아웃 배치만 확인하기 위하여 더미 이미지를 사용할 수도 있다. 예를 들어 Service 페이지에서 회사가 제공하고 있는 다양한 서비스에 대한 이미지를 보여주려고 한다. 하지만 현재 적절한 서비스 이미지를 찾지 못한 상태이다. 그렇지만 웹사이트에서 해당 이미지들이 어디에 어떤 모습으로 배치되는지 확인하고 싶을수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service 페이지</title>
</head>
<body>
  <header>
    <a href="/index.html">
        <img src="/imgs/brand-logo.jpg" alt="sample logo" width="50" height="40">
        SunriseBucks
    </a>
    
    <nav>
        <ul>
            <li><a href="/html/home.html">Home</a></li>
            <li><a href="/html/about.html">About</a></li>
            <li><a href="/html/service.html">Service</a></li>
            <li><a href="/html/contact.html">Contact</a></li>
        </ul>
    </nav>
  </header>

  <h1>Service 페이지</h1>
  <p>SunriseBucks 의 다양한 서비스를 소개합니다.</p>

  <section>
    <article>
      <h3>주문예약 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-1">
        <figcaption>저희 SunriseBucks 에서는 고객이 까페에 도착하시기 전에 미리 주문예약을 할 수 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>배달 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-2">
        <figcaption>저희 SunriseBucks 에서는 고객에게 배달 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>커뮤니티 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-3">
        <figcaption>저희 SunriseBucks 에서는 고객들끼리 사회적인 유대관계를 조성할 수 있는 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
  </section>

  <h3>다운로드</h3>
  <ul>
    <li><a href="../docs/downloaded-img.jpg" download>서비스 이미지 다운로드</a></li>
    <li><a href="../docs/downloaded-pdf.pdf" download>서비스 PDF 다운로드</a></li>
  </ul>
</body>
</html>

이러한 경우 다양한 온라인 서비스가 제공되는데 여기서는 특정 사이트에서 제공하는 더미 이미지를 사용해보도록 한다. 다양한 서비스는 section 태그로 그룹화한다. 각각의 서비스는 하나의 컨텐츠에 해당하므로 article 태그로 작성한다. 각 article 태그 안에는 heading 태그로 제공하는 서비스 이름을 작성한다. 서비스를 대표하는 이미지는 현재 선택하지 못한 상태이므로 더미 이미지를 사용한다. 

<section>
    <article>
      <h3>주문예약 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-1">
        <figcaption>저희 SunriseBucks 에서는 고객이 까페에 도착하시기 전에 미리 주문예약을 할 수 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>배달 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-2">
        <figcaption>저희 SunriseBucks 에서는 고객에게 배달 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>커뮤니티 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-3">
        <figcaption>저희 SunriseBucks 에서는 고객들끼리 사회적인 유대관계를 조성할 수 있는 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
  </section>

Service 페이지 결과는 아래와 같다. 

 

service.html 전체코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service 페이지</title>
</head>
<body>
  <header>
    <a href="/index.html">
        <img src="/imgs/brand-logo.jpg" alt="sample logo" width="50" height="40">
        SunriseBucks
    </a>
    
    <nav>
        <ul>
            <li><a href="/html/home.html">Home</a></li>
            <li><a href="/html/about.html">About</a></li>
            <li><a href="/html/service.html">Service</a></li>
            <li><a href="/html/contact.html">Contact</a></li>
        </ul>
    </nav>
  </header>

  <h1>Service 페이지</h1>
  <p>SunriseBucks 의 다양한 서비스를 소개합니다.</p>

  <section>
    <article>
      <h3>주문예약 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-1">
        <figcaption>저희 SunriseBucks 에서는 고객이 까페에 도착하시기 전에 미리 주문예약을 할 수 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>배달 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-2">
        <figcaption>저희 SunriseBucks 에서는 고객에게 배달 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
    <article>
      <h3>커뮤니티 서비스</h3>
      <figure>
        <img src="http://place-hold.it/300x300" alt="service-3">
        <figcaption>저희 SunriseBucks 에서는 고객들끼리 사회적인 유대관계를 조성할 수 있는 서비스를 제공하고 있습니다.</figcaption>
    </figure>
    </article>
  </section>

  <h3>다운로드</h3>
  <ul>
    <li><a href="../docs/downloaded-img.jpg" download>서비스 이미지 다운로드</a></li>
    <li><a href="../docs/downloaded-pdf.pdf" download>서비스 PDF 다운로드</a></li>
  </ul>
</body>
</html>
728x90
저작자표시 비영리 변경금지

'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글

1. CSS 문법  (0) 2023.06.12
11. 폼 요소의 종류  (0) 2023.06.10
9. 앵커(Anchor)의 표현  (0) 2023.06.09
8. 표를 만드는 테이블 요소  (0) 2023.06.09
7. 목록을 표현하는 요소  (0) 2023.06.08

'프론트엔드/HTML & CSS 강의'의 다른글

  • 현재글10. 이미지(image) 보여주기

관련글

티스토리툴바