WEB, HTML, CSS 기초

📋 COMPUTER

🔍 Memory hyerarchy

🔍 Cache Memory
this is a data that used by CPU and waiting for being used by CPU quickly. Cache memory is for improving calculation speed.

🔍 Compile
the process of translating source code written in a programming language into machine code that computer can understand.

🔍 Build
to execute application, it needs a build process that makes it an executable file with the .exe or .msi extension.

---

📋 WEB

🌸 2-tier architecture : client - server
🌸 3-tier architecture : client - server - database
🌸 web FE : HTML(structure, markup), CSS(style sheet), JS(interaction)

---

📋 HTML

HyperText Markup Language

this is responsible for overall structure of source code

🌲 <div> : div tag occupies one line
🌲 <span> : span tag occupies size of itself
🌲 <p> : p tag express a paragraph
🌲 <a> : a tag makes the text have link

<a href="https://naver.com" target="_blank">네이버새탭열기</a>
<!-- target creat a new tab -->

🌲 <ul, li> : this makes the list
🌲 <input> : this makes variout input form
🌲 <textarea> : this makes textbox which can move next line
🌲 <button> : this makes button

---

📋 CSS

Cascading Style Sheets

this applies design to the structure of source code

🌈 semantic tag : same with <div> in HTML, but it contains a meaning of what is responsible for

🌈 CSS systax

🌈 styling with id

h4 {
  color: red;
}

this result in all of "h4" elements affected

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

this result in only navigation-title affected. Id matches only one element so below code block is wrong

/* wrong example */
<ul>
	<li id="menu-item">Home</li>
	<li id="menu-item">Mac</li>
	<li id="menu-item">iPhone</li>
	<li id="menu-item">iPad</li>
</ul>

🌈 styling with class
if you want to apply same style to multiple elements, use class

<<!-- correct example -->
<ul>
	<li class="menu-item">Home</li>
	<li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
	<li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}