[HTML/CSS] My Quick Reference for Core Basics

· Tech· Frontend
Frontend

1. CSS application priority

① !important

1
2
3
4
5
div {
color: red;
border: solid 5px blue;
background-color: #cce6ff !important;
}
 cs

② Given directly to the corresponding tag → inline method

1
<div style="border: solid 1px red; background-color: #ffffcc; font-size: 40pt;">Hello, world@ @T130@@/div>
 cs

③ Style tag given in HTML file → Embedded Method

1
<style type="text/css"@ @T180@@></style>
 cs

④ External css file

1
<link rel="stylesheet"@@T233 @@ href="mycss.css">
 cs

2. Tag display method

Display methods typically include block and inline methods.

block method tags are

inline method tag is

The display method of a given tag can be changed, and can be changed to block-inline method and float property .

Even if the entire float is set to left by embedding in html, if close: left is applied inline to the corresponding tag according to CSS priority, the influence of float will be removed from that tag.

(close: left is applied to the div2 tag in the photo below)

3. Width settings to create a responsive web

1
2
<meta name="viewport" @@T35 9@@content="width=device-width, initial-scale=1">
cs

 

1
2
3
4
5
@media screen and (max-width:360px){
    hl {color: red;}
    ul {list-style-type: none;}
    li {display: inline;}
}
 cs

 

 

4. 태그의 display 방식

 

display 방식은 대표적으로 block 과 inline 방식이 있다.

block 방식 태그 : article, div, h1~h5, header, hr, table, footer, aside, p 등

inline 방식 태그 : a, input, span, select, img, label 등

- inline 은 width 및 height 적용이 안된다.

 

 

5. Semantic tag

The use of semantic tags such as

can convey the semantic unit of an HTML document well and thus improve code readability. And because element styles are displayed differently depending on the meaning of the tag during a search, the use of these semantic tags is advantageous for search engine optimization (SEO).

(→ Detailed explanation)

6. HTML Entities

7. line-height and vertical-align, text-align

You should know that the

inline element has heights content-area and line-height height. In other words, line-height is not simply determined by font-size. The content-area is located in the center of the line-height. 

height If the value is auto, lihe-height is used, and in this case, content-area is the same as line-height.

Changes in margin and padding have no effect, but when the display is line-block, padding, margin, and border increase the height and thus have an effect.

(→ Detailed explanation and source)

When you try to use

css, vertical-align may not be applied, because it may be applied differently depending on the font and line-height. Basically, content-area changes occur for each font and depending on the application environment (browser, etc.). At this time, the case where sufficient inline box where vertical-align can be applied must be considered.

vertical-align is CSS applied to inline elements.

(→ Detailed explanation and source)

vertical-align is based on vertical alignment. text-align The alignment standard is horizontal.

vertical-align is applied when the content is within the

tag or when the display method is set to table for the outside and table-cell for the inner tag. Please note that this applies

8.

Within the tag, groups sub-tags into one group. And by using the tag, you can enter a title between the tops of the border surrounding the elements within . In other words, settings can be made as shown in the picture below w3school.

tag and tag

The id value of

input can be received using for in the label.

In other words, if you select the word label type of animal, such as autofocus, you can make the cursor go to the tag. 

required enables submit execution only when the value of input is selected.

autocomplete is the autocomplete function.

1
2
<label for="animal"@@T727@ @>Types of animals : </label>
<input type="text" @@T750 @@id="animal" size="20" @ @T762@@autofocus placeholder="Mammal" required@@T77 1@@ |
cs

+

164 posts in 테크