day43_Styling websites with CSS_240828.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6ce93471-e01b-4850-abef-7694fe8f6665",
   "metadata": {},
   "outputs": [],
   "source": [
    "# day43_Styling websites with CSS_240828\n",
    "CSS: Cascading Style Sheets\n",
    "making table in html is really wordy\n",
    "\n",
    "Q. Isn't it burdensome to change all of <hr> style to \n",
    "A. internal CSS: \n",
    "- used to save and select particular part in the file\n",
    "\n",
    "It is hard to copy the style of one site to other sites.\n",
    "Q. how can we manage the style of all of sites?\n",
    "A. external CSS\n",
    "\n",
    "* Debugging code\n",
    "개발자 도구 ctrl+shift+I > console\n",
    "\n",
    "It is usually suggested that you implement all of your styles inside your external css file\n",
    "\n",
    "* CSS Syntax: The Grammar of the CSS Language\n",
    "all programming languages have their own particular syntax\n",
    "selector{property:value;}\n",
    "selector _Who? / property _What? / value _How?\n",
    "; semicolone is important in CSS\n",
    "It is normal to save property in alphabetic order\n",
    "\n",
    "Q. How can we know whick propery key word is possible to use in the selector?\n",
    "A. We can see that at the key index\n",
    "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference\n",
    "\n",
    "https://emojipedia.org/\n",
    "\n",
    "* Any contents in /* ~ */ are ignored in the css code.\n",
    "\n",
    "* Using class selector for specific design\n",
    "We can set 'class' property for a specific selector\n",
    "By using class, you can better differentiate and make specific styling choices for your website elements\n",
    "form: .(class_name) {}\n",
    "\n",
    "* ID selector vs class selector\n",
    "form: #(id_name)\n",
    "ID selector has a priority than the TAG selector\n",
    "Q. Then when should we use Class selector or ID selector?\n",
    "A. One difference is that you can only have one single instance for one ID inside a single page.\n",
    "i.e. class can be used repeatably\n",
    "Class can be applied together but ID can't.\n",
    "\n",
    "* pseudo-classes\n",
    "html elements starts with ':'\n",
    "ex) hover"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "780a32ac-a49c-4f55-9eab-3047cfcf84e9",
   "metadata": {},
   "outputs": [],
   "source": [
    "# cv _index.html\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "    <title>🌕Moon Chan Yeong's Personal Site</title>\n",
    "    <link rel=\"stylesheet\" href=\"css/style.css\">\n",
    "\n",
    "</head>\n",
    "\n",
    "<body>\n",
    "    <table cellspacing=\"20\">\n",
    "        <tr>\n",
    "            <td>\n",
    "                <img src=\"https://avatars.githubusercontent.com/u/173697762?v=4\" alt=\"moon chan yeong profile picture\">\n",
    "            </td>\n",
    "            <td>\n",
    "                <h1>Moon Chan Yeong</h1>\n",
    "                <p><em>Day by day in every way, I'm getting better and better</em></p>\n",
    "                <p>I am a graduate student at Pohang University of Science and Technology(POSTECH).\n",
    "                    My major is 'Social Data Science'.\n",
    "                    I love to learn something and have curious about many things in the world.\n",
    "                    I have a motorcycle, <a href=\"Po-Ba.html\">Po-Ba(Pohang Bada)</a>.\n",
    "                    Everymorning I handdrip a cup of coffee. I really love coffee.</p>\n",
    "            </td>\n",
    "        </tr>\n",
    "    </table>\n",
    "\n",
    "\n",
    "    <hr>\n",
    "    \n",
    "    <h2>Education</h2>\n",
    "    <ul>\n",
    "        <li>Geochang High School</li>\n",
    "        <li>B.S. Educational Technology, Hanyang University, Korea, 2024</li>\n",
    "    </ul>\n",
    "    <hr>\n",
    "    \n",
    "    <h2>Journals</h2>\n",
    "    <p>J1. 하선민, 전용찬, <b>문찬영</b>, & 송지훈. (2024). N 잡러가 경험한 심리적 소진 회복에 관한 근거이론적 접근. 한국콘텐츠학회논문지, 24(6), 408-424. <a href=\"https://doi.org/10.5392/JKCA.2024.24.06.408\">https://doi.org/10.5392/JKCA.2024.24.06.408</a></p>\n",
    "    <p>J2. 이진주, <b>문찬영</b>, 이진주. (2024). Rasch 분석을 활용한 일터에서의 목표지향성 측정도구 타당화 연구. 경영교육연구, 39(3), 199-226. <a href=\"https://doi.org/10.23839/kabe.2024.39.3.199\">https://doi.org/10.23839/kabe.2024.39.3.199</a></p>\n",
    "    <hr>\n",
    "\n",
    "    <h2>Skills</h2>\n",
    "    <table border=\"1\" cellpadding=\"3\">\n",
    "        <tr>\n",
    "            <td>\n",
    "                <table>\n",
    "                    <tr>\n",
    "                        <td>Problem-solving</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td>Work Ethic</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td>Analytics Skills</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                </table>\n",
    "            </td>\n",
    "            <td>\n",
    "                <table>\n",
    "                    <tr>\n",
    "                        <td>Team Working</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td>Communication</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                    <tr>\n",
    "                        <td>Leadership</td>\n",
    "                        <td>⭐⭐⭐⭐⭐</td>\n",
    "                    </tr>\n",
    "                </table>\n",
    "            </td>\n",
    "        </tr>\n",
    "    </table>\n",
    "    <hr>\n",
    "\n",
    "    <h2>Work Experience</h2>\n",
    "    <p>Coming Soon...</p>\n",
    "    <hr>\n",
    "\n",
    "    <h2>Fullmoon_1st album</h2>\n",
    "    <table border=\"1\" cellpadding=\"3\">\n",
    "        <thead>\n",
    "            <tr>\n",
    "                <td align=\"center\">Number</td>\n",
    "                <td align=\"center\">Title</td>\n",
    "            </tr>\n",
    "        </thead>\n",
    "        <tbody>\n",
    "\n",
    "        </tbody>\n",
    "        <tfoot></tfoot>\n",
    "        <tr>\n",
    "            <td align=\"center\">1</td>\n",
    "            <td align=\"center\">그대로</td>\n",
    "        </tr>\n",
    "        <tr>\n",
    "            <td align=\"center\">2</td>\n",
    "            <td align=\"center\">달나라</td>\n",
    "        </tr>\n",
    "        <tr>\n",
    "            <td align=\"center\">3</td>\n",
    "            <td align=\"center\">놔</td>\n",
    "        </tr>\n",
    "        <tr>\n",
    "            <td align=\"center\">4</td>\n",
    "            <td align=\"center\">그 아이</td>\n",
    "        </tr>\n",
    "        <tr>\n",
    "            <td align=\"center\">5</td>\n",
    "            <td align=\"center\">좋아해도 될까</td>\n",
    "        </tr>\n",
    "        <tr>\n",
    "            <td align=\"center\">6</td>\n",
    "            <td align=\"center\">빈자리</td>\n",
    "        </tr>\n",
    "    </table>\n",
    "    <a href=\"https://youtu.be/SMc55SUhe8U?si=CwCLHzWKyRVwvrqG\">Youtube link</a> for listening the full album\n",
    "    <hr>\n",
    "\n",
    "    <h2>Hobbies</h2>\n",
    "    <ol>\n",
    "        <li>Coffee Handdrip</li>\n",
    "        <li>Riding my motorcycle, Po-Ba</li>\n",
    "        <li>Listening music</li>\n",
    "    </ol>\n",
    "    <hr>\n",
    "\n",
    "    <h2>Contact Information</h2>\n",
    "    <p>E-mail: fullmcy@postech.ac.kr</p>\n",
    "    <p>Please click <a href=\"contact_me.html\">here</a> to send me e-mail</p>\n",
    "</body>\n",
    "\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3fa19102-9a5f-44d5-90c9-62d47370f5ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "# cv _style.css\n",
    "body {\n",
    "    background-color: azure;\n",
    "}\n",
    "\n",
    "hr{\n",
    "    border-style: none;\n",
    "    border-top-style: dotted;\n",
    "    border-color: grey;\n",
    "    border-width: 5px;\n",
    "    width: 5%\n",
    "}\n",
    "\n",
    "img {\n",
    "    height: 300px;\n",
    "}\n",
    "\n",
    "h2 {\n",
    "    color: #0F67B1;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a35c6246-8612-40c0-8e38-6c645af958c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Bacon _index.html\n",
    "<!doctype html>\n",
    "<html lang=\"en\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\"\n",
    "          content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n",
    "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n",
    "    <title>Document</title>\n",
    "    <link rel=\"stylesheet\" href=\"styles.css\">\n",
    "</head>\n",
    "\n",
    "<body>\n",
    "    <h1 id=\"heading\">I love Bacon</h1>\n",
    "    <p>bacon, bacon, bacon</p>\n",
    "    <p>bacon, bacon, bacon</p>\n",
    "    <p>bacon, bacon, bacon</p>\n",
    "    <img class= \"bacon\" src=\"https://em-content.zobj.net/source/apple/391/bacon_1f953.png\" alt=\"bacon\">\n",
    "    <img class= \"coffee circular\" src=\"https://em-content.zobj.net/source/apple/391/hot-beverage_2615.png\" alt=\"coffee\">\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "87770e93-05df-4212-b3f5-5d3dc2652bb2",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Bacon _style.css\n",
    "/************** TAG SELECTORS ****************/\n",
    "\n",
    "body{\n",
    "    background-color: white;\n",
    "}\n",
    "\n",
    "h1 {\n",
    "    color: red;\n",
    "    font-size: 200px;\n",
    "}\n",
    "\n",
    "/*\n",
    "img {\n",
    "    background-color: red;\n",
    "}\n",
    "*/\n",
    "\n",
    "img:hover{\n",
    "    background-color: gold;\n",
    "}\n",
    "\n",
    "\n",
    "/************** CLASS SELECTORS ****************/\n",
    ".bacon {\n",
    "    background-color: green;\n",
    "}\n",
    "\n",
    ".coffee {\n",
    "    background-color: yellow;\n",
    "}\n",
    "\n",
    ".circular {\n",
    "    border-radius: 100%\n",
    "}\n",
    "\n",
    "\n",
    "/************** ID SELECTORS ****************/\n",
    "\n",
    "#heading {\n",
    "    color: blue;\n",
    "}"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}