- How we can add(mix) CSS to HTML page
1) to put the HTML code and CSS code on the same file
- going to use a tag <style></style> : should be in the <head> (not <header>)
- write CSS code in it.
2) to seperate HTML from CSS
- <link href="styles.css" rel="stylesheet" />
- write CSS code in the styles.css
2. Basic CSS lines
there is three rule.
- What CSS do is pointing HTML code.(Selector)
- Property (속성) - combined by curly bracket {}
- Has to follow syntax
**** property + colon + value + semicolon (eg. color: blue;)
no space when you write property like 'font size', always use '-'
**** everything must be finished with semicolon (;)
3. <div> /<span>
- div, paragraph,address don't allow anything next to them = Blocks
- span, link, image, code do allow something next to them. = Inline
- Only Inline can be changed as blocks (display)
- Memorizing whats not a block is more easy
4. blocks
1) Margin : space from the border of the box to the outside
- margin :50px 20px (top/bottom 50px, right/left 20px)
- margin : 20px(top) 5px(right) 12px(bottom) 9px(left) _ clockwise direction
2) Padding : space from the border of the box to the inside
3) Border : designate thickness and style(border style mdn) color
- can be applied inline and blocks both.
5. Class
id should have unique stuff - if it is repeated its not effective
so need something that you can point to and can be shared.
* Can be used like ) .tomato {} (means class="tomato")
6. Putting one box next to another one
- Use display: inline-block;
- Flexbox
7. Rules of Flexbox
1) Do not talk with children, Talk to the Parents
2) justify-content: works on the main axis
3) align-items: works on the cross axis (default : vertical)
- can be changed : flex-direction: column / row
8. Position
1) relative
2)absolute
9. Pseudo Selectors
1) first-child
2) last-child
3) nth-child(n) / nth-child(odd/even)
4) ::placeholder
- allows you to modify placeholder
- input :: placeholder {}
5) ::selection
- when you select letters, those letters will be changed
10. Combinator
1) p + span
2) div>span
11. Selector
1) button: active { background-color: tomato;}
- Acting when youre pressing on the button -> color will be changed
2) hover
- when the mouse is on the button (not clicking) -> color will be changed
3) focus
- selected by keyboard
4) focus-within
5) visited
12. Color
1) hexadeximal color
2) RGB(Red, Green, Blue)
- rgba(a means alpha - opacity)
13. Variouble
- space is not allowed, should use dash(-)
- :root {} = modify default of the document
14. Transition
- A property that you will add to the element without the state
15. Ease in function
- How animation will change.
16. Transformations
- transform: ________X/Y(-10px)
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
developer.mozilla.org
1) Rotate
2) Scale
3) Translate
17. Animations
1) @keyframes name of animation { }
from {transform:rotateX(degree);}
to { transform:rotateX(360deg);}
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
18. Media Queries
'HTML, CSS' 카테고리의 다른 글
| States, Transition, Media Query (0) | 2024.07.30 |
|---|---|
| Position, Pseudo selector (1) | 2024.07.23 |
| Git hub, Icons, Font, Reset (0) | 2024.07.22 |
| HTML (3) | 2024.07.20 |