HTML 속성 (Attributes)
CSS 속성 (Properties)
JS 속성 (Properties)
박스 모델: HTML요소의 기본적인 모양을 만들어내는 여러가지 속성들 (가로너비, 세로너비, 여백 등등)
글꼴, 문자: 폰트(서체)
배경, 배치(특정 요소를 원하는 위치에 배치)
플렉스(정렬): 여러 요소들을 수평으로 쌓기
전환: 요소의 전상태와 후상태의 중간단계를 자연스럽게 애니메이션으로 처리(이거 너무 마음에 든다)
변환: 요소에 변화를 주는 것, 2D전환과 3D전환이 있음
띄움: 요소를 띄우는 것
(요소 주변으로 문자가 흐를 수 있음 - 신문의 사진과 기사를 떠올리면 됨!)
애니메이션: 전홤 효과 이외의 좀 더 복잡한 구조의 애니메이션 만들어내기
그리드: 행과 열의 구조를 가지고 있는 이차원의 레이아웃 구조 제어
다단: 하나의 페이지에서 단을 여러 개로 나누는 것
필터: blur, 흑백효과, 반전 등의 필터를 씌우는 것
1. 박스 모델
width, height 는 요소의 가로/세로 너비를 의미한다.
가장 많이 사용하는 단위는 px
기본값은 auto로 브라우저가 자동으로 계산한다.
블럭요소와 인라인 요소의 auto값은 살짝 다르다.
(인라인 요소: 콘텐츠의 크기만큼)
(블럭요소: 가로는 최대한, 세로는 콘텐츠의 크기만큼)
-
인라인 요소: 포함한 콘텐츠 크기까지 가로너비와 세로 너비는 자동으로 줄어든다.
-
블록 요소 : 가로 길이는 부모 요소의 크기만큼 자동으로 늘어난다.
세로 너비는 포함한 콘텐츠 크기까지 자동으로 줄어든다.
인라인 요소는 본질적으로 가로 너비와 세로 너비를 제어할 수 없다.
max-width, max-height : 요소가 커질 수 있는 최대 가로/세로 너비
기본값: 최대 너비 제한 X
단위: px,em,vw 등, px을 가장 자주 씀
min-width, min-height : 요소가 작아질 수 있는 최소 가로/세로 너비
기본값: 0, 최소 너비 제한 없음
단위: px,em,vw등, px를 가장 자주 씀
- CSS의 단위
px 픽셀 ex. 1920x1080px
% 상대적 백분율
em 요소의 글꼴 크기
rem 루트요소의 글꼴크기 (root em 즉, html의 글꼴 크기)
vw 뷰포트의 가로너비의 백분율 (view width)
vh 뷰포트의 세로너비의 백분율 (view height)
Tip.브라우저는 기본적으로 설정하지 않으면 폰트크기를 16px로 설정한다.
.parent {
width: 300px;
height: 200px;
background-color: royalblue;
font-size: 10px;
}
.child {
width: 20em;
height: 100px;
background-color: orange;
}<div class="parent">
<div class="child"></div>
</div>위와 같이 parent클래스의 글씨크기를 10px로 설정하면 글씨 크기는 상속이 되므로 child클래스의 글씨 크기도 10px이 되어 width는 200픽셀이 된다.
rem을 이용하면 html태그의 폰트크기만 바꿔주면 일관적으로 요소의 크기를 조정할 수 있으므로 편하다.
부모 요소의 폰트크기가 변하여도 상관없다.
rem은 루트 요소의 폰트크기에만 영향을 받기 때문이다.
단, 폰트크기 자체는 부모요소의 폰트크기에 영향을 받게 된다.
- 외부 여백
margin : 요소의 외부 여백(공간)을 지정하는 단축 속성
가로(세로) 너비가 있는 요소의 가운데 정렬에 활용해요!
0 외부 여백 없음
auto 브라우저가 여백을 계산 (브라우저마다 다를 수 있음, 따라서 초기화가 필요)
단위 px, em, vw 등 단위로 지정
가운데 정렬: 프로그램에서 문구나 그림 따위를 정렬하는 방식의 하나, 가로쓰기에서는 가로축의 가운데에 맞추고 세로쓰기에서는 세로축의 가운데에 맞추어 정렬한다.
가로 세로 너비가 있ㅎ는 요소의 가운데 정렬에 auto를 활용할 수 있다.
.container {
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
margin-bottom: 20px;
}이런 식으로 CSS를 줬을 때
개발자 도구에서 이렇게 margin-bottom 이 20px임을 확인할 수 있다.
단축 속성이란?
margin은 10px을 주면 위(top) 아래(bottom) 좌(left) 우(right) 모두에 10px의 여백이 생긴다.
띄어쓰기로 margin: 10px 20px; 이라고 주면 margin은 상하로 10px. 좌우로 20px이 생긴다.
margin: 10px 20px 30px 이라고 주면 각각 top left,right, bottom에 주어진다.
/
ㅡ
/ 모양이 이런 느낌?
마지막으로 margin: 10px 20px 30px 40px; 이라고 주면 각각 top right bottom left 에 값이 들어간다. (시계방향)
이렇게 margin이라는 속성은 띄어쓰기를 이용해서 1개의 값부터 4개의 값까지 줄 수 있는데 단축 속성이라는 것은 꼭 4개의 값을 넣지 않아도 4개의 값 모두를 제어할 수 있다는 것을 의미한다.
그리고 margin-방향은 그 방향 여백을 뜻하는 개별 속성이다.
그리고 margin:100px auto; 와 같이 margin을 주면 좌우는 auto값이 들어가게 되고 이 때 요소는 부모 요소에 대하여 가로로 가운데 정렬이 된다.
이런 식으로!
Tip. margin에 음수값
.container .item {
width: 100px;
height: 100px;
background-color: orange;
border: 4px solid red;
margin: -30px;
}margin에 음수값을 넣으면
이런 식으로 요소가 겹치게 된다.
3. 내부 여백
padding : 요소의 내부 여백(공간)을 지정하는 단축 속성
0: 내부 여백 없음
지금까지 사용했던 것과 같은 기본적인 단위를 사용하고
padding의 경우 %를 종종 사용한다.
%는 부모 요소의 가로너비에 대한 비율로 지정한다.
요소의 내부에 여백을 지정하는 것이므로 외부 여백과 달리 요소 자체의 크기가 커진다.
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>.container {
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
border: 4px solid red;
}
.container .item:first-child {
padding: 20px;
}이렇게 짜면
요소의 내부에 여백이 생기면서 요소 자체의 크기가 커지는 것을 확인할 수 있다.
(여기서 알 수 있는 점: background-color는 padding에 역시 적용이 된다.)
개발자 도구를 보면 이렇게 padding에 20이 들어가 있는 것을 확인할 수 있다.
padding도 단축 속성이고, 매개변수의 개수에 따른 적용되는 방향은 margin과 동일하다.
개별 속성 역시 margin과 똑같이 존재한다.
4. 테두리 선과 색상 표현
요소의 테두리 선을 지정하는 단축 속성 : border
border의 요소에는 선-두께, 선-종류, 선-색상이 있고
각각 border-width, border-style, border-color 로 지정할 수 있다.
border를 만들면 padding과 같이 border의 크기만큼 요소의 크기가 커진다.
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>.container {
}
.container .item {
width: 100px;
height: 100px;
background-color: orange;
}
.container .item:first-child {
border: 10px solid orange
}border: 10px solid orange 부분을 보자.
경계선의 두계가 10px, 선 종류는 solid(실선), 선의 색상은 orange가 되어
다음과 같은 결과를 출력한다.
border 속성의 기본값을 살펴보자.
기본값은
border: medium none black 으로 특히, 선의 종류는 기본값이 none으로 종류를 입력하지 않으면 선의 종류가 없어서 출력되지 않는다.
border의 두께로 medium, thin, thick이 있으나 굉장히 애매하고 브라우저마다 출력결과가 다를 수 있으므로 거의 사용하지 않고 일반적으로 px,em,%등 단위를 이용해서 입력한다.
border-width는 너비를 뜻하는 개별속성이면서 단축속성이기도 하다.
이 때 매개변수의 개수에 따른 적용되는 방향은 margin, padding과 같다.
border-style은 요소 테두리 선의 종류를 의미하는 속성이다.
기본값은 none으로 기본값의 경우 출력이 되지 않는다.
solid는 실선(일반 선)이고 dashed는 파선으로 ----- 와 같은 선을 의미한다.
이 두개가 자주 쓰인다.
그 외 여러가지 선의 종류가 있으나 이걸 다 외울 필요는 없고 나머지 종류들은 필요할 때마다 찾아서 구현하면 된다.
border style 역시 단축 속성이다.
잘 안 쓰인다고는 하나 어떤 모양인지 눈으로 익혀두고 필요할 때마다 쓰면 좀더 고급스러운 웹페이지 디자인에 도움을 주지 않을까 싶다.
border-color : 요소 테두리 선의 색상을 지정하는 단축 속성
기본값은 black 이고 transparent를 넣으면 투명하게 된다.
색상 표현은 색상 이름, Hex 색상코드, RGB(빛의 삼원색), RGBA(빛의 삼원색 + 투명도) 등으로 표현할 수있다.
일단 색상이름은 브라우저에서 제공하는 것이므로 브라우저에 따라 달라질 수 있으므로 사용울 권장하지 않는다.
가장 많이 사용하는 방식은 Hexadecimal Color이다.
border의 개별속성:
border-방향-속성 으로 나타낼 수 있다.
- border-radius
요소의 모서리를 둥글게 깎아내는 역할을 한다.
기본값은 0으로 둥글게 깎아내는 무언가가 없다.
단위는 px,em,vw 등이다.
<div></div>div {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
border-radius: 10px;
}
위와 같이 네부분이 10px씩 둥글게 깎여지는 것을 볼 수 있다.
더 자세히 메커니즘을 보자.
이렇게 각 꼭짓점에서 가로 세로 10px만큼 떨어진 곳에 원의 중심을 찍고 거기서 10px의 반지름을 가진 원을 만들어 원에 들어가지 않은 나머지 부분을 깎아낸다고 보면 된다.
특정한 모서리만 깎기를 원하면 값을 여러개를 작성하면 된다.
매개변수의 순서와 모서리는 다음과 같이 매칭된다.
- box-sizing
요소의 크기 계산 기준을 지정하는 변수이다.
기본값은 content-box로 요소의 내용(content)으로 크기를 계산하고
border-box는 요소의 내용+padding+border로 크기를 계산한다.
<div class="item">hello</div>
<div class="item">hello</div>.item {
width: 100px;
height: 100px;
background-color: orange;
}
.item:first-child {
border: 4px solid red;
padding: 10px;
box-sizing: border-box;
}여백과 border를 포함한 크기로 width와 height를 설정하고 싶으면
box-sizing: border-box;라는 코드를 추가하면 된다.
결과:
요소의 크기를 수동으로 계산하지 않아도 되게 만들어주는 매우 편리한 기능이다.
