[ CSS + Bootstrap] Css, Bootstrap 기초 내용 정리

CSS is Cascading Style Sheets

1. Css types

inline Css

include inline styles of Html tag.

<h1 style="color: red">Text</h1>

internal Css

internal css places into the head tag with <style> tag and can style all of element included in this page.

<head>
  <style> h1 {color: red;} </style>
</head>

external css

The external style sheet is generally used when you want to make changes on multiple pages.

 <head>
   <link rel="stylesheet" type="text/css" href="/style.css"/> 
 </head>

Order By CSS

inline Css > internal Css > external Css

2. Css Syntax and

selector { property : value };
selectors using for class for ".", for id "#"
id > class > element tag
id can use only one time in the page, class can use multiple times
if we use two classes of one element, like <h1 class="heading italic">.
As this code h1 tag gets two values of classes that css file
By the way when we use two id values of element,
like <h1 id="heading italic" all of id values will deleted and gets default browser style value
ID selectors: ID selectors are the most specific kind of selector
By the default browser style values should set body margin to 0;

3. height

The height Css property specifies the height of an element
If box-sizing is set to border-box it determines the height of the border area
Height Values :
1. Length: px, em, vh => absolute value
     2. Percentage: 50%, 75% => height as percentage
     3. Keyword: max-content, mint-content, fit-content(20em), auto
     4. Global values: inherit,initial, revert, unset
     5. Most used common values: px, em, vh and auto

4. width

Sets an element's width
By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.
Width Values :
     1. Length: px, em => absolute value
     2. Percentage: 50%, 75% => height as percentage
     3. Keyword: max-content, mint-content, fit-content(20em), auto
     4. Global values: inherit,initial, revert, unset
     5. Most used common values: px, em, % and auto

5. Width , Height Calculation

By default size such as height and width have same 200px size
When padding is set to 20px, this div height and width will be 240px
When border is set to 10px solid, div height and width will be 260px
When margin is set to 30px , this div height and width will be 320px

6. Display

Common block elements : p, headers ( h1 to h6), div, list tags ( ul, li, ol), form elements
Common inline elements : span, img, a tags
We can't set width and height with inline elements
Can set the height and width of the block elements
When we choose inline-block, can set inline elements with width and height

Different of display : none vs visibility: hidden
when we use display: none of any element, this element will deleted layout and next inline or block element will place instead of none element
By the way visibility: hidden is value that just hidden of element's position, next element can't take o place hidden element

7. Position

Relative position of the element can set top, bottom, left, right values
Relative position is relative to own position not viewport screen
Relative elements doesn't effect to any other elements

Absolute position is relative to parent.
There is a simple div element setting relative position, and inside has img element has absolute position.
In this situation, element that absolute image place 30px of right, it will become 30px position on right not left of the screen.
Relative position is relative to own position not viewport screen but absolute position is relative to parent element,
when here no parent element it takes body
Relative and Absolute positions are pretty good to position of elements
When we use width for text elements, need to use margin auto.

font-size: 100% -> is equal font-size: 16px;
Funny information: font-size => 16px = 100% = 1em

8. Media Query

Media Queries allow to apply CSS styles depending on a device's general type.
To conditionally apply styles with the Css @media and @import rules
How to use: @media <type> <feature>
Targeting media types: print, screen, hover, max-width, color
Code Refactoring: Readability, Modularity, Efficiently, Length

@media (max-width: 1028px) {
    .title-mainImg {
        position: static;
        transform: rotate(0);
        margin: 50px 0;
    }
    .title {
        text-align: center;

9. Multiple Selectors

Multiple classes: Group for a while two same classes as one css style. h1, p { color:red} in this case all of h1 and p elements will get a red color
Hierarchical Selectors: Group of id and class elements. #title .slider => in this case title and slider get a same value
Parent and child Selectors: .slider h1 {color: red} in this case h1 as child of slider class gets a red color

Combined Selectors: No space between of two selectors
     1. selector1.selector2 {}, in this case h1 element that inside of title box gets red color
     2. selector1.#selector {} , in this case p element that inside of slider gets red color
     3. div.slider : will work no problem but div#title doesn't work
     4. element.class such as h1.title will change all h1 elements which have a title

h1#title { color: red}

 p.slider { color: red },

element  .class vs element.class

9. Last Css Rule change

When we use two same styles for one element, in this case h1 will change green color.

h1 { color: red; color : yellow},

When we have h1 element with id and class types. By the code

<h1 #id="heading" class="title"> Hello World </h1>

We can change this element with 3 ways.
1. By external css : most commonly way

h1 { color: red; },

2. Using class: class is more specific than h1 element, so this text will changed to yellow when

title {color : yellow}

3. Using id :id is more higher than class, so text will changed to blue;

 #heading { color : blue;}

Here an interesting example that when we change the queue of h1, class, and id styles nothing changed.

id > class > h1 element

When we use combined selectors , absolute text will changed to pink, bcz we use id selector as most higher priority.

#footer h1 {color : pink}

In fact inline Css > internal Css > external Css, so using inline and internal css styles more higher than id or class external css selectors

   <h1 #id="heading" class="title" style="color: orange"> Hello World </h1>

9. Super Important 3 Set of web development

- Color theory

- Typography

- UI / UX : User interface and user experience

    - 5 Mood Colors
      1. Red: Love, energy, intensity
      2. Yellow: Joy, Intellect, Attention
      3. Green: Freshness, Safety, Growth
      4. Blue: Stability, Trust, Serenity
      5. Purple: Royalty, Wealth, Feminity

- Types of fonts
      1. serif
      2. sans-serif
      3. script
      4. display
      5. modern

9. Bootstrap

Rows and Column is super comfortable to use with

   - Row : default value is 100% of screen
   - Col : default value is 100% of screen

   - col-lg: Large Column value as displayed in Large Laptops. col-lg-6(50% of 12), get 50% of screen
   - col-md : For laptops
   - col-sm : For responsive mobile design

Order the style

   - When we have two css files such as style1.css and style2.css

CSS styles are applied in the order they are linked in your HTML code.
- Unlike CSS and JavaScript, HTML code is executed from top to bottom so the order of your code matters.

Containers

   - Containers are fundamental building blocks of Bootstrap that contain, padding and align
   - Most basic layout element and required when using our default grid system.

   - Three different containers:
     1. .container : sets a max-width at each responsive breakpoint
     2. .container-fluid : which is width 100% of all breakpoints
     3. .container - {breakpoint} : which is width 100% until the specified breakpoint
container : { sm, md, lg, xl, xxl, fluid}

'Computer Science > Web' 카테고리의 다른 글

[WEB] HTML5란? 개념 및 특징 정리 (4)	2024.02.17
[WEB] HTML이란? 개념, 주요 특징 정리 (1)	2024.02.17
[ HTML ] HTML 기초 내용 정리 (0)	2023.03.03