CSS 21.03.06
box model
- box의 실제 넓이는 content의 width + padding + margin + border의 넓이를 더한 값이다.
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}
container의 너비는 300px이 아님. 300px은 content의 width. box의 총 width = 300(content width) + 10(padding-left) + 10(padding-right) + 2(border-left) + 2(border-right) = 324px;
inner의 100%는 300px이 아님. 364px = 300(300px의 100%) + 30(padding-left) + 30(padding-right) + 2(border-left) + 2(border-right)
box의 크기는 여백을 포함한 것이 아닙니다. 박스의 사이즈는, 오롯이 콘텐츠 영역에만 적용되어 있습니다. 이러한 계산 방식은 레이아웃을 어렵게 만듭니다. 다행히 여기에 여백과 테두리 두께를 포함한 박스 계산 방법이 존재합니다. 아래 스타일을 추가합시다.
css 작성 전 반드시 적용! (+ CSS reset)
* {
box-sizing: border-box;
}
box-sizing: border-box; 를 적용하면 width 적용 시 margin, border, padding의 값을 포함한 값을 의미한다.
selector : class vs id
- id : css에서 #으로 선택, 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐, 엘리먼트 단 하나의 값을 가짐, 특정 엘리먼트를 이름 붙이는 데 사용
<h2 class="unique-title"> id Title </h2>
- class : css에서 .으로 선택, 동일한 값을 갖는 엘리먼트 많음, 엘리먼트가 여러 값을 가질 수 있음, 스타일의 분류(classification)에 사용. class 명은 여러개 지정이 가능하며 여러 클래스 명 중 하나만 선택해서도 CSS 적용이 가능
<h1 class="color-title main-title selected"> class title </h1>
<!-- h1의 class 명은 color-title, main-title, selected 총 3개가 지정되어있다.-->
.selected {
color : red;
}
/* class 명이 selected인 모든 태그에 색은 red */
Flex
- 가로 정렬에 사용 가능. 정렬하고자 하는 element를 감싸고 있는 부모에게 display: flex;
display : flex;
display : inline-flex;
- flex-direction : 정렬 방향 설정
가로 방향
flex-direction : row;
세로 방향
flex-direction : column;
가로 방향 역순
flex-direction : row-revers;
세로 방향 역순
flex-direction : column-revers;
- flex-wrap : 한줄 정렬 or 여러줄 정렬.
flex-wrap : nowrap; 사이즈를 줄여서라도 한줄 정렬
flex-wrap : wrap; 한줄에 정렬하기 부족하면 여러줄로
축(axis)을 기준으로 정렬하는 CSS Property
flex-direction : row;
/* 가로 정렬 */
가운데 정렬
justify-content : center;
시작점(왼쪽) 정렬 (row-reverse인 경우 시작점은 오른쪽)
justify-content : flex-start;
시작점(오른쪽) 정렬 (row-reverse인 경우 시작점은 왼쪽)
justify-content : flex-end;
각 요소 간격들을 동일하게 정렬
justify-content : space-between;
각 요소들의 양 옆 간격을 동일하게 조절
justify-content : space-around;
- align-items(align-content) : 하나의 flex 라인에 있는 cross axis를 기준으로 설정.
flex-direction : row;
가운데 정렬
align-items: center;
시작점(위쪽) 정렬 (row-reverse인 경우 시작점은 아래쪽)
align-items : flex-start;
시작점(아래쪽) 정렬 (row-reverse인 경우 시작점은 위쪽)
align-items: flex-end;
- align-content : flex-wrap이 wrap 일 때 여러줄이 생기면 align-content 사용해야한다.
Flex 실무 꿀팁 : 선 align-items 후 align-content.
먼저 align-items를 사용 이상하면 그 다음 align-content.
order
flex에 order 값을 주어서 요소의 순서를 자유롭게 바꿀 수 있다.
main { display: flex; text-align:center; }
main > article { flex:1; order: 2; }
main > nav { width: 200px; order: 1; }
main > aside { width: 200px; order: 3; }
단위 : px, %, em, rem, ch, vw, vh
- 폰트 사이즈 : rem 추천
- 반응형 웹 : px 기준으로
- 화면을 가득 채우고 싶을 때 : vh(높이 기준: 위아래 길이를 바꿔도 화면을 가득 채움), vw(넓이 기준: 양쪽 길이를 바꿔도 화면을 가득 채움)
em vs rem
- em : 상위 element를 기준으로 몇 배인지 지정. em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
- rem : 문서의 최상위 element(즉, HTML element. 브라우저의 기본 글꼴)를 기준으로 몇 배인지 지정.
<html>
<head>
<body>
<p> Font Size </p>
</body>
</head>
</html>
html {
font-size: 16px;
}
body {
font-size: 1.5em;
}
body의 font size는 24px
p {
font-size: 2rem;
}
p의 font size는 32px
background vs background-color
background-color : 해당 요소의 배경색을 지정한다.
body {
background-color : #fff;
}
background : 각 스타일을 개별적으로 지정하는 대신 색상, 이미지 또는 배경 이미지 속성을 한 줄에 적용.
main {
background : #fff url('main-image.png') no-repeat fixed 50% 50%
}
ETC
margin은 음수 값으로도 지정 가능. element들의 간격을 줄어들게 만들 수 있음. (viewport에서 사라지게 하거나 다른 element와 겹치게도 가능)
overflow: 를 사용하면 한정된 박스 크기에 맞게 컨텐츠가 더이상 표시되지 않게 하거나, 혹은 박스 안쪽으로 스크롤하여 컨텐츠를 볼 수 있게 만드는 것이 가능합니다.
overflow: auto;
/* auto 속성은 컨텐츠가 넘치면 자동으로 스크롤되게 만듭니다. */
overflow: hidden;
/* 아예 넘치는 컨텐츠를 무시하고 가리고 싶을 경우 hidden을 사용합니다. */
- shadow : 그림자 효과
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
