07강 CSS 셀렉터, 기초 이론 정리
1. 의미, 정의
CSS=Cascading & Style Sheet
* !important : 연결고리를 무시하고 가장 중요한 스타일이 됨.(가능하면 쓰지 않는 것이 좋다.)
2. 선택자(selectors)
universal *
type Tag
ID #id
Class .class
State :
Attribute []
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 예제</title>
<style>
* {color : red} //모두 적용
li {color : blue} //li 태그 적용
#pop {color : green} //id=pop 적용
</style>
</head>
<body>
<ul>
<li id="pop">number1</li>
<li>number2</li>
</ul>
순서없는 리스트
</body>
3. 스타일링
.box{
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
border: 2px dashed pink;
background: aliceblue;
}* 가능한 속성값 확인 사이트 CSS Reference - A free visual guide to CSS
08강 CSS 레이아웃 정리
4. 헷갈리는 컨셉
- display와 position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 예제</title>
<style>
div, span {
width: 80px;
height: 80px;
margin: 20px;
background: aliceblue;
}
div {
background: red;
display: inline-block; //인라인 블럭 형태로 변경: 한 줄에 여러 박스 표시
display: inline; //인라인 형태로 변경: 컨텐츠 자체만을 꾸며줌
}
span {
background: blue;
display: block; //블럭형태로 변경: 한 줄에 하나 표시
}
</style>
</head>
<body>
<!-- Block level -->
<div></div>
<div></div>
<!-- Inline level -->
<span>1</span>
<span>2</span>
</body>
- position 속성 정리
.container {
background: yellow;
left: 20px;
top: 20px;
position: static; // 기본 고정값. 변화x
position: relative; // 원래 아이템 자리에서 상대적 변화
position: absolute; // 아이템이 담겨있는 가장 가까운 상자 안에서 변화
position: fixed; // 상자에서 완전히 벗어나, 웹 페이지 안에서 변화
position: sticky; // 원래 자리에 있으면서, 스크롤 해 페이지를 옮겨도 원래 있던 자리에 위치
}
09강 CSS Flexbox 완전 정리
5. CSS 꽃: Flex box
-> 박스가 커지면(/작아지면) 각각의 아이템들이 어떻게 커지면서(/작아지면서) 박스 안에서 정의되는지~
* float : 이미지와 텍스트를 어떻게 배치할 것인지에 대해 정의
left, center, right
<1> container와 그 안에 담긴 item들.
<2> main axis(중심축)과 cross axis(반대축) 두 가지 축이 존재.
1) container에 적용가능한 속성
- display :
- flex-direction: row, row-reverse, column, column-reverse;
- flex-wrap: nowrap, wrap;
- flex-flow: column nowrap;
- justify-content: flex-start, flex-end, center, space-around, space-between;
- align-items: baseline;
- align-content: center, space-between;
2) item에 적용가능한 속성
- order: 1,2,3 //item들의 순서변경
- flex-grow: //container의 사이즈가 커질 때, item들의 크기 변화를 정의
- flex-shrink: //container의 사이즈가 작아질 때, item들의 크기 변화를 정의
- flex-basis: auto or ~% //item들이 공간을 얼마나 차지해야 하는지 보다 세부적으로 명시할 수 있게 도와줌.
- align-self: //item별로 정리
*%: 부모의 퍼센테이지
vh: 부모와 상관없이 퍼센테이지
10강 Visual Studio 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천
11강 웹사이트 빨리 만드는 지름길
12강 반응형 웹, 웹개발 할 때 꼭 알아야 하는 Responsive Web
고정된 레이아웃이 아닌 유동적인 레이아웃!
예전~ float과 %를 사용
요즘~ flex grid, flex box, %, vw, vh 사용
ㄴ그럼에도 불구하고 생기는 레이아웃 재배치는,
Media Queries 이용!
@media screen and (min-width: 800%) {
.container {
width: 50%;
}
}'Web > HTML' 카테고리의 다른 글
| 클론코딩 | 미니 홈페이지 레이아웃 #1 with. 빔캠프 CSS (1) | 2023.07.21 |
|---|---|
| 프론트엔드 개발자 되기 입문편! 16~21강 (0) | 2022.05.17 |
| 프론트엔드 개발자 되기 입문편! 13~15강 (0) | 2022.05.10 |
| 프론트엔드 개발자 되기 입문편! 01~06강 (0) | 2022.04.05 |
| 생활코딩 WEB1-HTML 14강~20강 (0) | 2022.03.28 |