Flex 속성
기본적으로 div 박스는 아래로 정렬되는 속성을 가지고 있습니다. 즉, 위에서 부터 아래로 한칸씩 쌓이는 것이죠.
그렇지만, flexbox를 이용하면 이를 손쉽게 변경 할 수 있습니다.
1
2
3
4
5
<div class="flex-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
1
2
3
4
5
6
7
8
9
.flex-container {
display: flex;
}
.box {
width: 100px;
height: 100px;
background: #ddd;
margin: 5px;
}
이런식으로 box들을 감싸고 있는 div 요소에 flex-container 클래스를 부여함으로서 box들이 가로로 정렬되게끔 구현 할 수 있습니다.
이외에도 flexbox는 다양한 속성들을 가지고 있습니다.
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
display: flex;
justify-content: center; /* 가로 축을 기준으로 정렬 -> 가로 기준으로 오른편 가운데 왼편 ... */
align-items: center; /* 세로 축을 기준으로 정렬 -> 세로 기준으로 위 가운데 아래 .... */
align-content: center; /* 박스가 가로줄로 여러개 일때, 일괄적으로 세로 정렬 */
flex-direction: column; /* 배치 방향 설정 */
flex-wrap: wrap; /* 폭이 넘치는 요소 wrap(줄 넘김) 처리 */
}
.box {
flex-grow: 2; /* 폭이 상대적으로 몇배인지 결정 기본 값 0*/
}
코딩 생활에 도움을 주는 확장 프로그램
VSCode상에서 확장 프로그램은 윈도우 기준 ctrl + shift + X 입니다. 또는 왼쪽 탭에서 네모난 박스들이 있는 확장프로그램 버튼을 클릭해서 열 수 있습니다.
Prettier, Beautify
코딩 생활에 도움을 주는 첫번째 프로그램으로 Code Formatter가 있습니다.
Code Formatter이란 개발자가 작성한 코드를 일정한 규칙에 맞추어 변환해 주는 도구를 뜻합니다.
유명한 Code Formatter으로 Prettier와 Beautify가 존재합니다.
두 확장 프로그램 모두 작성한 코드를 보기 좋게 변환해주지만 약간의 차이는 존재합니다.
Prettier은 조금 엄격한 스타일을 강제하고, Beautify는 조금 더 자유로운 스타일을 지정 할 수 있습니다.
- VSCode Code에서는 Editor: Format on Save 속성을 지정해줘 저장 시 code formating이 수행되도록 설정 할 수 있습니다.
Emmet
추천하는 두번째 확장 프로그램은 Emmet입니다.
해당 프로그램은 css 셀렉터를 이용하여 HTML을 손쉽게 생성 할 수 있는 확장 프로그램입니다.
다만 해당 프로그램은 약간의 문법 공부가 필요한데, 자주 사용하는 예시에 대해서 알아보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- div.box (.box로도 가능 = div는 생략 가능) -->
<div class="box"></div>
<!-- li>ul.item*3 -->
<li>
<ul class="item"></ul>
<ul class="item"></ul>
<ul class="item"></ul>
</li>
<!-- div.container>div -->
<div class="container">
<div></div>
</div>
1
2
3
4
5
6
.container {
/* w100 */
width: 100px;
/* m10 */
margin: 10px;
}
이런식으로 간단한 명령어들을 통해 좀 더 편리하게 html css 코딩이 가능합니다.
이러한 문법 외에도 좀 더 많은 명령어들이 있기에, 자세한 정보는 구글 검색이나 공식문서를 통해 확인이 가능합니다.
이외에
눈의 피로를 덜어주는 다크 테마, 키워드로 코드를 작성 할 수 있는 스니펫(snippets), 오류를 찾아주는 ESLint 등 수많은 확장프로그램이 존재하므로 한번 찾아보는 것을 추천드립니다.
반응형 레이아웃
우리가 작성하는 html와 css는 사용자의 디스플레이 크기에 따라 다르게 표기됩니다. 그렇기에 모바일 환경이나 웹 환경에서 최적화 된 레이아웃이 별도로 존재하게 되고 이러한 차이를 해결하기위해 반응형 레이아웃을 사용하게 됩니다.
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
반응형 웹을 만들 때 head 태그에 들어가야 되는 필수적인 내용입니다.
해당 기능을 통해 기기의 가로 사이즈를 가져오고 아래와 같이 가로 크기에 따라서 레이아웃을 제작합니다.
1200px / 992px / 768px / 576px
해당 크기는 일반적으로 사용되는 브라우저 폭입니다. 이러한 브라우저 폭에 따라서 최적화된 각각의 레이아웃을 제작하면 됩니다.
다만, 4가지 모두 구현하기보다는 태블릿 환경인 1200px와 768px 이하인 모바일 환경으로 나누어 개발하는 것을 권장드립니다.
반응형 레이아웃 사용하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
font-size: 60px;
}
@media screen and (max-width: 1200px) {
body {
font-size: 40px;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 30px;
}
}
위와 같은 media query을 이용해 간단하게 반응형 css를 구성 할 수 있습니다.
해당 코드에서는 기본적으로 font-size를 60px으로 구성하고 있지만, 웹 사이트를 출력하는 기기의 가로사이즈가 1200px보다 작은 경우에는 font-size를 40px으로, 768px보다 작은 경우에는 font-size를 30px으로 구성하게 됩니다.
즉, 태블릿 환경에서는 40px의 font-size를 가지고 있고, 모바일 환경에서는 30px의 font-size를 지니고 있게 됩니다.
HTML에 아이콘 넣기
HTML에 아이콘을 넣는 방법 중 대표적인 방법인 구글 Material Icon과 Font Awesome 아이콘을 적용해 보겠습니다.
먼저 이러한 아이콘들을 사용하기 위해서는 CSS 파일을 적용해야 합니다. 다만, CSS 파일을 받아서 적용하는 것은 번거롭기 때문에 CDN을 이용하여 서버를 통해서 받아오겠습니다.
1
2
3
4
5
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
1
2
3
4
5
<!-- GoogleMaterial -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
해당하는 <link>를 html head 부분에 삽입하여 css를 받아온 뒤, 마음에 드는 아이콘을 아래 링크에서 찾아서 사용 하면 됩니다.
FontAwesome 바로가기
GoogleMaterial 바로가기
아래는 해당 아이콘을 적용한 예시 코드 입니다.
1
2
3
4
5
<!-- FontAwesome Icon -->
<i class="fa-solid fa-magnifying-glass"></i>
<!-- GoogleMaterial Icon -->
<span class="material-symbols-outlined"> search </span>
Transition 속성 사용하기
Transition 속성은 CSS의 변화가 생겼을 때 즉각적으로 변하는 것이 아니라 지정된 시간에 따라 천천히 변하게 만들어주는 속성 입니다.
이러한 속성을 이용해 간단한 애니메이션을 만들 수 있습니다.
해당 포스팅에서 애니메이션에 대한 이야기를 전부 하기에는 현실적으로 어려움이 있기에 간단한 예제 하나를 설명하면서 어떻게 애니메이션을 만들지 보여드리겠습니다.
먼저, 애니메이션의 작동 원리는 다음과 같습니다.
- 시작지점을 정한다.
- 종료지점을 정한다.
- css가 변하는 시점을 정한다(어떤 상황에서)
- transition으로 css를 천천히 변화한다.
아래는 input요소에 마우스가 올라가면 색상과 가로 길이가 바뀌는 코드입니다.
즉, 시작 지점은 width: 200px, background: red 이고, 종료 지점은 width: 400px, background: blue 입니다.
이후 css가 변하는 지점은 마우스가 올라갔을 때, 모든 transition을 2초에 걸쳐 변화시킵니다.
1
2
3
4
5
6
7
8
9
10
11
input {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
input:hover {
width: 400px;
background-color: blue;
}
아래는 trainsition의 세부 속성들입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
input {
/* 시작 전 딜레이 */
transition-delay: 0s;
/* transition 작동 속도 */
transition-duration: 2s;
/* 어떤 속성에 transition 입힐건지 */
transition-property: width background-color;
/* 동작 속도 그래프조정 */
transition-timing-function: ease-in;
/* 모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax) */
transition: all 2s;
}
복잡한 애니메이션 만들기
애니메이션을 만들 때, 시작위치와 종료위치 사이에 무언가를 넣고 싶으면 기존 방법으로는 굉장히 복잡해집니다. 단순히 한방향으로만 변하는 것이 아니라 양방향으로 이동할 수 있는 에니메이션에 대해서 말씀드리겠습니다.
transition 속성
먼저, 복잡한 애니메이션을 만들기 전 알아야 하는 속성이 있습니다.
바로 transform 속성입니다. 해당 속성은 요소를 독립적으로 움직이는데 사용 합니다.
아래는 자주 사용되는 transform 속성들입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
/* 10도 회전 */
transform: rotate(10deg);
/* x 10px, y 20px만큼 좌표이동 */
transform: translate(10px, 20px);
/* 크기 2배 확대 */
transform: scale(2);
/* 30도 비틀기 */
transform: skew(30deg);
/*transform 두개 이상을 한꺼번에 쓰려면*/
/* 10도 회전 및 X축 30px 좌표 이동 */
transform: rotate(10deg) translateX(30px);
}
@keyframes
@keyframes를 이용하여 애니메이션의 진행 상황에 따라 상태를 정의 할 수 있습니다. 아래는 X축 방향으로 100px만큼 이동 후 다시 X축 방향으로 -100px만큼 이동하는 코드입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container:hover {
animation-name: test-animation;
animation-duration: 2s;
}
@keyframes test-animation {
0% {
transform: translateX(0px); /* 애니메이션이 0%만큼 동작시 */
}
50% {
transform: translateX(100px); /* 애니메이션이 50%만큼 동작시 */
}
100% {
transform: translateX(-100px); /* 애니메이션이 100%만큼 동작시 */
}
}
이런식으로 애니메이션을 구현하면 애니메이션이 종료될 때, 원래 위치로 순간이동하게 됩니다.
이런 경우 100%의 값을 transform: translateX(0px);과 같이 0%의 값과 동일하게 주면 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes test-animation {
0% {
transform: translateX(0px); /* 애니메이션이 0%만큼 동작시 */
}
33% {
transform: translateX(100px); /* 애니메이션이 33%만큼 동작시 */
}
66% {
transform: translateX(-100px); /* 애니메이션이 66%만큼 동작시 */
}
100% {
transform: translateX(0px); /* 애니메이션이 100%만큼 동작시 */
}
}
아래는 애니메이션의 세부 속성 들입니다.
1
2
3
4
5
6
7
8
9
.container:hover {
animation-name: test-animation;
animation-duration: 1s;
animation-timing-function: linear; /*베지어 곡선*/
animation-delay: 1s; /*시작 전 딜레이*/
animation-iteration-count: 3; /*반복 횟수*/
animation-play-state: paused; /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
animation-fill-mode: forwards; /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}
복합 결합자(CSS Combinators)
선택자들 사이의 관계를 정의하는 결합자라는 것이 있습니다. 결합자에는 4개가 존재합니다.
- 자손 선택자 -> [띄어쓰기]를 통해 모든 자손을 선택
- 자식 선택자 -> [>]를 통해 선택된 자식을 선택
- 인접 형제 선택자 -> [+]를 통해 바로 뒤 형제 선택
- 일반 형제 선택자 -> [~]를 통해 모든 형제 선택
아래에서 간단한 html 구조를 통해 보여드리겠습니다.
1
2
3
4
5
6
7
8
<div class="parent">
<div class="first-child"></div>
<div class="second-child"></div>
<div class="third-child"></div>
<section>
<div class="fourth-child"></div>
</section>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent div {
/* 자손 선택자 .parent의 모든 자손 div 적용 */
/* 따라서 fourth-child도 적용 */
}
.parent > div {
/* 자식 선택자 .parent의 자식 div 적용 */
/* 따라서 fourth-child는 적용 안됨 */
}
.first-child + div {
/* first-child의 바로 뒤 형제인 second-child에게 적용됨 */
}
.first-child ~ div {
/* first-child의 형제인 second-child, third-child 두개에게 적용 */
}
.parent:hover > .second-child {
/* parent에 hover되었을때, second-child에게 해당 css를 적용해라. */
}
Video, Audio 속성
1
2
3
4
5
6
7
8
9
10
11
12
13
<video muted autoplay>
<source src="비디오 파일경로" type="video/mp4" />
<source src="1번 비디오가 안될 때, 대체 비디오 파일경로" type="video/mp4" />
</video>
<!-- muted는 음소거상태 -->
<!-- autoplay는 자동재생 (muted와 함께 넣어야 동작함) -->
<!-- poster는 썸네일이미지 -->
<!-- preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능) -->
<audio>
<source src="오디오 파일경로" />
</audio>