Cascading Style Sheet
- Casecading - to fall, pour, or rush in
- 브라우저가 css 코드를 읽을 때 위에서부터 아래로 읽는다
- 결국 맨 마지막에 있는 코드가 최종으로 적용된다
Html과 CSS를 연결하는 방법
- External CSS
- html 파일 외부에 css 파일을 만들어 연결 (권장, 재사용 가능)
<head>태그 안에<link>태그를 이용하여 css 파일을 적용
<head>
<link rel="stylesheet" href="stylesheet.css" />
</head>- Internal CSS
- html 파일
<head>태그 안에<style>태그를 이용하여 css 적용 selector(식별자) {property(속성) : value(값);}
- html 파일
<head>
<title>Home - My first website</title>
<style>
div {
height: 150px;
width: 150px;
background-color: tomato;
}
span {
background-color: turquoise;
}
</style>
</head>- Inline CSS
- 적용하고자 하는 태그 안에 style 속성을 이용하여 css 적용
<body>
<h1 style="color : tomato;">RED VELVET</h1>
</body>Blocks and Inlines
CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있다.
- Block
- Inline
- 요소에 적용되는 박스 유형은
block및inline과 같은[display](https://developer.mozilla.org/ko/docs/Web/CSS/display)속성 값으로 정의 display속성을 이용해 Block과 Inline 요소의 성질을 변경할 수 있다
Box model의 구성
- Content box
- Padding box
padding은 콘텐츠 주변을 마치 공백처럼 자리padding의 크기는 padding과 관련 속성을 사용해 제어
- Border box
Border박스는contents와padding까지 둘러싼다.Border의 크기와 스타일은 border와 관련 속성을 사용하여 제어
- Margin box
margin은 가장 바깥 쪽 레이어로 contents와 패딩,border를 둘러싸면서 박스와 다른 요소 사이 공백 역할margin박스의 크기는 margin과 관련 속성을 사용하여 제어
Margin
Margin- box의border(경계)의 '바깥'에 있는 공간magin은 속성 값의 수에 따라 적용되는 위치가 다르다.- 값이 하나면 사방
- 두 개면 상하, 좌우
- 네 개면 시계방향(🔼,▶,🔽,◀)
Margin-collapsing
블록의 top 및 bottom 마진은 때로는 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄(collapsed))됩니다. - MDN
Paddings and IDs
Padding- box의 border(경계)의 '안쪽'에 있는 공간padding속성값도margin과 동일하게 적용- 값이 하나면 사방
- 두 개면 상하, 좌우
- 네 개면 시계방향(🔼,▶,🔽,◀)
- inline은
padding이 좌우에만 적용된다.
Box 선택
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>- 태그로 선택하기: 해당 태그가 일괄적으로 적용된다.
div {
height: 150px;
width: 150px;
padding: 10px;
}- id로 선택하기: 해당 id의 요소만 적용, id앞에 #을 붙여서 작성
#first {
background-color: whitesmoke;
width: 150px;
height: 150px;
}Border
- box의 경계
Syntax: <line-width> || <line-style> || <color>- inline과 block 모두에 적용 가능
Classes
id는 고유하며 1개의 요소만 선택 가능class는 요소들을 그룹지어 동일한 내용을 적용할 때 사용
Inline Block
- inline-block은 block으로 인식하게 한다
- 높이, 너비, 사방에 margin도 가질 수 있다
- 바로 옆에 다른 요소가 올 수도 있다
- 단점
- 요소 사이에 지정해주지 않은 빈 공간이 있다(보이지 않는 기본 설정값)
- 정해진 형식이 없다
Flexbox
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}- flex 사용 시 지켜야 할 3가지 규칙
- 부모에게만 명시하고 , 자식에게는 명시하지 않는다
justify-content는 main axis(default: 수평)를 담당align-items는 cross axis(default: 수직)를 담당
-
축을 수정하고 싶은 경우
flex-direction을 column으로 변경 -
화면크기 변화에도 요소의 사이즈를 변형하지 않고 다음 줄로 가게하고 싶으면
flex-wrap사용 -
FlexBox 익히기 게임 : 🐸flex-box-froggy
사람을 위한 기술을 공부합니다