'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 도움되는 사이트 (0) | 2022.02.01 |
|---|---|
| CSS Flexbox 완전 정리 (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |
Front-End
- 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web 2022.01.31
- CSS Flexbox 완전 정리 2022.01.31
- CSS 레이아웃 정리 display, position 완성 2022.01.31
- CSS 셀렉터, 기초 이론 정리. 2022.01.31
- HTML 태그 완성 2022.01.31
- HTML 기초 2022.01.31
반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web
2022. 1. 31. 21:50
CSS Flexbox 완전 정리
2022. 1. 31. 21:43
https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9
Container
display
flex-direction : main axis, cross axis 어느 방향으로 정렬할 것인지 정하는 것에 의해 바뀜.
flex-wrap
flex-flow
justify-content
align-items
align-content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>.container {
background: beige;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* flex-flow: column nowrap */
/* justify-content: space-between;
align-items: baseline;
align-content: space-between; */
}
.item {
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background: #ef0a0a;
flex-grow: 1;
flex-shrink: 1;
align-self: center;
/* flex-basis: 30%; */
}
.item2 {
background: #f48fb1;
flex-grow: 1;
flex-shrink: 1;
}
.item3 {
background: #ce93d8;
flex-grow: 1;
flex-shrink: 1;
}
Color 선택할 때 유용한 사이트
https://material.io/resources/color/#!/?view.left=0&view.right=0
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
Flex Box 복습 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 도움되는 사이트 (0) | 2022.02.01 |
|---|---|
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |
CSS 레이아웃 정리 display, position 완성
2022. 1. 31. 20:07
https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8
display
block : 상자로 변환 한줄에 한개
inline : 인라인으로 변환 (물건)
inline-block : 상자로 변환되어서 안에 컨텐츠와는 상관없이 박스의 width나 height에 맞춰서 표기
Position
static : Postion의 기본값 Html에 정의된 순서대로 자연스럽게 보이는 것.
relative : 원래 있어야할 자리에서 이동. (static의 위치에서 변경 값만큼 이동)
absolute : 아이템이 담겨있는 가장 가까운 box안에서 위치 변경이 이루어진다.
fixed : 상자에서 벗어나서 웹페이지의 기준으로 이동한다.
sticky : 원래있어야할 자리에 있지만 스크롤을 내려도 따라옴.
브라우저에서 CSS를 사용할 수 있는지 확인하는 사이트
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
|---|---|
| CSS Flexbox 완전 정리 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |
| HTML 기초 (0) | 2022.01.31 |
CSS 셀렉터, 기초 이론 정리.
2022. 1. 31. 16:38
https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7
CSS (Cascading Style Sheet)
CSS는 우리가 작성한 HTML을 우리가 원하는대로 꾸며줄 수 있게 해준다.
Cascading
정의된 세부적인 것이 있을경우 그것을 쓰고 없으면 다음으로 넘어간다.
다음 순서를 따른다.
1. Author Style : 우리가 정의한 Style
2. User Style: 사용자가 정의한 Style
3. Browser가 정의한 Style
!important 는 Cascading을 분리하는 방법 가능하면 쓰지 않는 것이 좋다.
Selectors
Tag 가까이 설정한 값들이 Universal보다 우선순위에 있다.
Attribute Selector
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
padding: 2px;
}
CSS Selector 를 연습할 수 있는 사이트
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
|---|---|
| CSS Flexbox 완전 정리 (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |
| HTML 기초 (0) | 2022.01.31 |
HTML 태그 완성
2022. 1. 31. 15:33
https://www.youtube.com/watch?v=OoA70D2TE0A&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=6
공부할때에는 세부적인 것을 배우는 것도 중요하지만 멀리서 큰 그림을 먼저 보는 것이 중요하다.
Tag의 분류
Tag는 사용자에게 보여지지 않는 Box와 사용자에게 보여지는 Item 두개의 종류로 분류할 수 있다.
재사용가능한 것들을 묶어서 나타내 주는 것이 article이다.
Block과 Inline구조
엘레먼트와 노드
어트리뷰트
HTML Tag 분석
<a href="https://google.com" target=_blank>Click</a> <!-- target은 a태그를 클릭했을 때, 어디에 웹페이지를 열것인지를 정의힌다. -->
ol : order list
ul : unorder list
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
|---|---|
| CSS Flexbox 완전 정리 (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 기초 (0) | 2022.01.31 |
HTML 기초
2022. 1. 31. 15:07
https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5
HTML (Hypertext Markup Language)
웹 상에서 보여지도록 디자인 된 Markup 언어 (구조화 된 언어) 표준화 된 언어를 사용하고 있다.
웹 상에서 HTML을 개발할 수 있는 사이트
https://jsbin.com/?html,output
JS Bin
Sample of the bin:
jsbin.com
기본 구조
<!DOCTYPE html> <!-- 도큐먼트 타입은 HTML이다. -->
<html>
<head> <!-- 구글에서 검색할 때, 나오는 메타데이터만 정의되어 있음. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body> <!-- 사용자에게 보여지는 내용. -->
</body>
</html>
W3C라는 단체에서 HTML에 관련된 내용을 정의함. 관련 HTML 태그들은
https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
에서 확인할 수가 있다.
HTML은 쓰면 안되는 Tag들이 존재한다. 이를 확인하고 싶으면
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
에서 확인이 가능하다.
웹사이트를 보는 방법
웹사이트는 모든 박스들이 모여서 만들어져 있다.
'Front-End > 프론트엔드 강의 - 프론트엔드 개발자 되기 입문편⭐️ (개념+클론코딩)' 카테고리의 다른 글
| 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web (0) | 2022.01.31 |
|---|---|
| CSS Flexbox 완전 정리 (0) | 2022.01.31 |
| CSS 레이아웃 정리 display, position 완성 (0) | 2022.01.31 |
| CSS 셀렉터, 기초 이론 정리. (0) | 2022.01.31 |
| HTML 태그 완성 (0) | 2022.01.31 |