a. inserting images within CSS
<div class="bg-img">배경이미지</div>
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}Use the url funtion to add images as backgrounds
.bg-img {
background-size: 100%;
}The ratio of the background image can be changed using the bachground-size
b. Span tag within P tags
<p> i am a <span>boi<span/> for real <p/>Span can be used within other block tags to give property to a certain word within a sentence
1. The Table tag
a. the components of the table tag
<table>, <thead>, <tbody>, <tr>, <th>, <td>The
<table>tag is used to create the container for the table.
The<tr>tag is the partitioning tag within the table with<th>,<td>tags as elements within the partition.
The<th>tag makes the letter bold while the<td>tag is used to show the components of the table.
------------example table---------------
HTML
<table class="prac">
<tr>
<th></th>
<th>1pm</th>
<th>2pm</th>
<th>3pm</th>
</tr>
<tr>
<th>Gym</th>
<td>Dodge ball</td>
<td>Kick boxing</td>
<td>Sack racing</td>
</tr>
<tr>
<th>Exercise Room</th>
<td>Spinning</td>
<td colspan="2" class="grey">Yoga marathon</td>
</tr>
<tr>
<th>Pool</th>
<td colspan="3" class="grey">Water polo</td>
</tr>
</table>CSS
table {
border-collapse: collapse;
}
.border-table th, .border-table td {
border: 1px solid black;
}
.prac th, .prac td{
border: 1px solid black;
font-weight: 400;
text-align: left;
}
prac{
color: black;
}
.grey{
background-color: lightgrey;
}Image
--------------------------------------------------------------
2. Inputs
a. the components of the input tag
<input>, <textarea>The text and password pair can be saved on the browser
The number type can only read numbers, no - allowed
w3schools selector link 링크텍스트
The button:hover in css can be used to change the shape of the cursor when hovering over an element
w3schools cursor link 링크텍스트
The example uses css to change the bordercolor and cursor when hovered over
example
HTML
<div class="survey-container">
<div class="input-wrap">
<input type="text" placeholder="ID(필수)">
</div>
<div class="input-wrap">
<input type="password" placeholder="비밀번호">
</div>
<div class="input-wrap">
<input type="number" value="123456">
</div>
<div class="input-wrap">
<textarea>소개:</textarea>
</div>
<div class="input-wrap">
<button>제출완료</button>
</div>
</div>CSS
.survey-container{
width: 200px;
margin: 100px auto;
}
input, textarea{
width: 100%;
font-size: 13px;
margin-bottom: 5px;
border-radius: 5px;
padding: 7px 12px;
}
input{
border: 1px solid black;
}
textarea{
resize:none;
}
input::placeholder{
color: #bbb;
}
input[type="text"]::placeholder{
color: red;
}
button{
color: white;
font-size: 15px;
background-color: #4CAF50;
padding: 5px 10px;
border-radius: 5px;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
input:hover, textarea:hover{
border-color: #4CAF50;
}Image
3. Search box / Relative positioning
The search box is an element that is ubiquitous on the web. most websites utilize this element to navigate around the website.
The following example places the search icon within the search box.
Relative postitioning allows elements to be moved around reletive to it's parent element. As such the search icon is positioned towrds the right.
HTML
<body>
<div class="search-bar">
<input type="text" placeholder="검색어 입력">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" alt="search icon">
</div>
</body>CSS
* {
box-sizing: border-box;
}
.search-bar{
position: relative;
width: 300px;
}
.search-bar input{
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
}
.search-bar img{
position: absolute;
width: 17px;
top: 10px;
right: 12px;
margin: 0;
}Image
4. Semantic tags to replace the <div> tag
New tags were created in order to replace the div tags.
These new tags such as<header>,<footer>and<navigator>
allows coders to use tag names with more significance than the<div>tag.
They also make it easier to organize the different parts of the page
w3schools link 링크텍스트
5. Floating Objects
a. When floating objects causes overlap
Use this when the float causes objects to overlap over each other
.after-box {
clear: left;
}use the clear function
b. When the floating image overflows from container
Use this when the floating images is too big so it overflows from the container.
.clearfix {
overflow: auto;
}Some of the older browsers don't support the concise version, so for older browsers the following code must be implemented.
.clearfix {
overflow: auto;
zoom: 1;
}c. Layout example utilizing floats
If you give an element float: left and specify a width you can give other elements a margin-left: 200px to have them fit in to the right side of that element.
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
6. Media query
Media query is used like an if statement to see if the display environment is mobile or desktop.
Use min-width and max-width to set the point in which the display mode changes.
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
7. Inline Blocks
Inline blocks can be used to easily form block shaped elements
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
8. Column property
This is a relatively new property so doesn't work below IE9 and on opera mini.
It allows you to easily divide information into columns without going through alot of work.
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
9. Flex-Box
There's alot of outdated info on flexbox.
Check on the following link to check if the data you're accessing is up to date
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
-webkit-flex is placed so that the browser can recognize the code.
Different browsers utilize different versions so that's a downfall.
