알아야 할 내용
Applied Visual Design 소개
웹 개발에서의 비주얼 디자인은 굉장히 범위가 큰 주제이다.
여기에는 타이포그래피(typography, 사전적 의미는 인쇄술 혹은 활판 기술) , 색에 대한 이론, 그래픽, 애니메이션, 페이지 레이아웃 등이 모두 포함된다.
기본적으로 웹 콘텐츠는 유저에게 정보를 제공하는 것이 목적이다.
이 때 비주얼 디자인은 콘텐츠가 어떻게 보이는지, 어떤 식으로 전달 되는지, 그리고 유저가 어떤 경험을 할 수 있는지 등을 좌우한다.
앞서 배웠던 바와 같이, HTML은 웹 페이지의 전반적인 구조와 틀을 만들고, CSS는 레이아웃과 모습을 만든다.
이번에는 개발자가 어떻게 각자만의 비주얼 디자인을 만들어 나가는지 공부해보려 한다.
목록
- 텍스트 정렬하기 - Create Visual Balance Using the text-align Property
- 가로길이 조정하기 - Adjust the Width of an Element Using the width Property
- 세로길이 설정하기 - Adjust the Height of an Element Using the height Property
- 텍스트 진하게 만들기 - Use the strong Tag to Make Text Bold
- 텍스트에 밑줄 치기 - Use the u Tag to Underline Text
- 텍스트에 기울임체 적용하기 - Use the em Tag to Italicize Text
- 텍스트에 취소선 긋기 - Use the s Tag to Strikethrough Text
- 구분선 적용하기 - Create a Horizontal Line Using the hr Element
- 텍스트 부분의 바탕색 설정하기 - Adjust the background-color Property of Text
- 제목글 크기 설정하기 - Adjust the Size of a Header Versus a Paragraph Tag
- 박스 쉐도우 설정하기 - Add a box-shadow to a Card-like Element
- 투명도 설정하기 - Decrease the Opacity of an Element
- 텍스트 특성 바꿔보기 - Use the text-transform Property to Make Text Uppercase
- 제목글의 폰트 사이즈 설정하기 - Set the font-size for Multiple Heading Elements
- 줄 간격 설정하기 - Set the line-height of Paragraphs
- 마우스 커서를 갖다대면, 상태 변하게 만들기 - Adjust the Hover State of an Anchor Tag
- 엘레먼트의 위치 바꾸기 - Change an Element's Relative Position
- CSS 오프셋으로 엘레먼트 움직이기 - Move a Relatively Positioned Element with CSS Offsets
- 앱솔루트 포지셔닝 (절대 위치) 사용하기 - Lock an Element to its Parent with Absolute Positioning
- 픽스드 포지셔닝 (고정 위치) 사용하기 - Lock an Element to the Browser Window with Fixed Positioning
- 플로트 특성으로 엘레먼트 공간 조정하기 - Push Elements Left or Right with the float Property
- 겹친 엘레먼트의 순서 바꾸기 - Change the Position of Overlapping Elements with the z-index Property
- 마진으로 엘레먼트 위치 조정하기 - Center an Element Horizontally Using the margin Property
- 보색 - Learn about Complementary Colors
- 제3색에 대해 배워보기 - Learn about Tertiary Colors
- 보색을 웹페이지에 적용해보기 - Adjust the Color of Various Elements to Complementary Colors
- 색조 바꾸기 - Adjust the Hue of a Color
- 색의 톤 설정하기 - Adjust the Tone of a Color
- 색이 바뀌는 과정을 보여주는 Linear Gradient - Create a Gradual CSS Linear Gradient
- 줄무늬 모양 만들어보기 - Use a CSS Linear Gradient to Create a Striped Element
- 이미지를 바탕화면에 적용하기 - Create Texture by Adding a Subtle Pattern as a Background Image
- 비율 설정으로 엘레먼트 크기 조정하기 - Use the CSS Transform scale Property to Change the Size of an Element
- 마우스 커서가 닿았을 때, 엘레먼트가 커지게 만들기 - Use the CSS Transform scale Property to Scale and Element on Hover
- 엘레먼트의 양옆을 비틀어 놓기 - Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
- 엘레먼트의 위아래를 비틀어 놓기 - Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
- CSS로 그래픽 만들기 - Create a Graphic Using CSS
- HTML과 CSS로 더 복잡한 모양 만들기 - Create a More Complex Shape Using CSS and HTML
- 애니메이션 만들어보기 - Learn How the CSS @keyframes and animation Properties Work
- 버튼 색을 바꾸는 애니메이션 만들어보기 - Use CSS Animation to Change the Hover State of a Button
- 애니메이션에 Fill 모드 적용해보기 - Modify Fill Mode of an Animation
- CSS 애니메이션으로 엘레먼트 움직이게 만들기 - Create Movement Using CSS Animation
- 엘레먼트가 움직임과 동시에 사라지게 만들어보기 - Create Visual Direction by Fading an Element from Left to Right
- 애니메이션 무한반복 - Animate Elements Continually Using an Infinite Animation Count
- 무한반복 심장박동 애니메이션 만들어보기 - Make a CSS Heartbeat using an Infinite Animation Count
- 키프레임으로 다른 박자의 애니메이션 적용하기 - Animate Elements at Variable Rates
- 애니메이션 듀레이션으로 다른 박자의 애니메이션 적용하기 - Animate Multiple Elements at Variable Rates
- 애니메이션 속도 설정하기 - Change Animation Timing with Keywords
- 베지어 곡선 1 - Learn How Bezier Curves Work
- 베지어 곡선 2 - Use a Bezier Curve to Move a Graphic
- 베지어 곡선 3 - Make Motion More Natural Using a Bezier Curve
- 시각 디자인을 끝마치며...
Create Visual Balance Using the text-align Property
텍스트 정렬하기
설명
텍스트(text, 글)는 웹 콘텐츠에서 생각보다 많은 분량을 차지한다.
그리고 이를 CSS를 사용하여 얼라인(align, 정렬) 하는 방법이 있는데, 이 때 text-align 프로퍼티(property, 특성)를 사용하면 된다.
- 저스티파이(justify, 양쪽 정렬)
- 센터(center, 가운데 정렬)
- 라이트(right, 오른쪽 정렬)
- 레프트(left, 왼쪽 정렬)
문제
1. <h4></h4> 태그의 텍스트를 가운데로 정렬해보자. 즉, Google이라는 텍스트를 가운데로 정렬시키면 된다.
2. 구글이 어떻게 설립되었는지 설명하는 패래그래프(paragraph, 단락)에는 텍스트 얼라인 저스티파이로 설정해보자.
답변
h4 {
text-align: center;
}
p {
text-align: justify;
}Adjust the Width of an Element Using the width Property
가로길이 조정하기
설명
CSS에서 위드스 (width, 가로길이) 프로퍼티(property, 특성)를 사용하여 HTML 엘레먼트의 가로길이를 설정할 수 있다.
렐리티브 유닛 (relative unit, 상대 단위)인 em을 사용할 수도 있고,
앱솔룻 유닛 (absolute unit, 절대 단위)인 px을 사용할 수도 있다.
아니면 퍼센트 유닛을 사용하여, 패런트 (parent, 상위) 엘레먼트와 상대적인 크기를 설정할 수도 있다.
위드스 설정의 예이다:
img {
width: 220px;
}문제
1. 카드 전체에 위드스 프로퍼티를 적용해보자.
2. 위드스 발류는 절대 유닛인 픽셀을 사용하여, 245px로 설정해보자.
3. FullCard 클래스를 사용하도록 하자.
답변
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}Adjust the Height of an Element Using the height Property
세로길이 설정하기
설명
CSS의 하이트(height, 세로길이) 프로퍼티(property, 특성)로 엘레먼트의 세로길이를 설정할 수 있다.
위드스(width, 가로길이) 프로퍼티와 같은 방식으로 사용하면 된다.
img {
height: 20px;
}문제
1. h4 태그의 하이트를 25px로 설정해보자.
2. 다만 여기서 주의할 점은 테스트를 통과하기 위해서는 브라우저 확대/축소가 100%로 설정되어 있어야 한다.
답변
h4 {
text-align: center;
height: 25px;
}Use the strong Tag to Make Text Bold
텍스트 진하게 만들기
설명
텍스트에 볼드(bold, 진한 글자)를 적용하려면, 스트롱(strong, 진하게) 태그를 사용하면 된다.
보통 독자의 주의를 요하거나 중요하다는 의미로 사용한다.
스트롱 태그는 CSS의 font-weight: bold 와 같은 룰을 적용한다.
문제
"Stanford University"라는 텍스트를 <strong></strong> 태그로 감싸보자.
답변
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>Use the u Tag to Underline Text
텍스트에 밑줄 치기
설명
텍스트에 밑줄을 치려면, u 태그를 사용하면 된다.
보통 특정 텍스트가 중요하다거나 기억해야 하는 내용이라는 것을 알리기 위해 사용한다.
다만, 링크에도 보통 밑줄이 쳐져 있기 때문에, 밑줄 쳐진 텍스트를 링크로 오해할 수도 있으니 주의하자.
CSS의 text-decoration: underline 과 같은 룰을 적용한다.
문제
Ph.D. students 를 <u></u> 태그로 감싸보자.
답변
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>Use the em Tag to Italicize Text
텍스트에 기울임체 적용하기
설명
특정 텍스트를 강조하려면, em 태그를 사용하면 된다. 그러면 텍스트에 기울임체가 적용된다.
CSS의 font-style: italic 과 같은 룰을 적용한다.
문제
파라그래프(paragraph, 문단)에 <em></em> 태그를 적용해보자.
답변
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>Use the s Tag to Strikethrough Text
텍스트에 취소선 긋기
설명
텍스트에 취소선을 적용하면, 텍스트 한 가운데에 선이 쫙 그어진다.
이런 식으로 말이다.
취소선 적용은 s 태그를 사용하면 된다.
취소선은 무효나 삭제를 뜻한다.
CSS의 text-decoration: line-through 와 같은 룰이 적용된다.
문제
1. <h4></h4> 태그 안에 있는 Google 이라는 텍스트에 <s></s> 태그를 적용해보자.
2. 그리고 그 옆에 Alphabet 이라는 새로운 텍스트를 넣자.
답변
<h4><s>Google</s>Alphabet</h4>Create a Horizontal Line Using the hr Element
구분선 적용하기
설명
hr 태그를 사용하면, 엘레먼트 구역 가로길이만큼의 호리존탈 라인 (horizontal line, 구분선)을 적용할 수 있다.
이 태그는 컨텐츠를 구분하거나, 주제가 바뀌는 위치에 사용하면 된다.
참고로, <hr> 태그는 셀프클로징(self-closing) 태그라 </hr> 클로징 태그가 필요없다.
문제
<h4></h4> 태그 바로 아래에 <hr> 태그를 적용해보자.
타이틀과 본문 내용을 구분하기 위한 선을 적용하는 것으로 생각하면 된다.
답변
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>Adjust the background-color Property of Text
텍스트 부분의 바탕색 설정하기
설명
페이지 전체 바탕이 아닌, 텍스트의 바탕색만 바꿀 수도 있다.
이번에는 헥스코드(hex code, 6자리 코드)나 rgb() 가 아닌, rgba() 를 사용해 보려 한다.
- r : red
- g : green
- b : blue
- a : alpha / opacity (오파시티, 투명도)
여기서 r, g, b는 0에서 255의 값을 줄 수 있다는 점을 기억하는가?
알파 값과 같은 경우는, 0이 최소값이고, 1이 최고값이다.
0은 완전히 투명한 것이고, 1은 투명도가 전혀 없는 것이다.
바탕색의 투명도를 조절하면, 텍스트 색을 크게 방해하지 않으면서도 내용을 전달할 수 있다.
문제
1. <h4></h4> 엘레먼트의 백그라운드 칼라를 조절해보자.
2. rgba(45, 45, 45, 0.1) 의 값을 사용하자.
3. 또한 <h4></h4>의 하이트(height, 세로길이)를 지우고,
4. 패딩(padding, 사각형 내부 공간) 값에 10px을 주자.
답변
h4 {
text-align: center;
padding: 10px;
background-color: rgba(45, 45, 45, 0.1);
}Adjust the Size of a Header Versus a Paragraph Tag
제목글 크기 설정하기
설명
헤더(header, 제목글) 태그의 폰트 사이즈,
즉 <h1></h1> 에서 <h6></h6> 까지는 패래그래프(paragraph, 본문) 폰트 사이즈보다는 커야 할 것이다.
헤더의 크기를 사용해서 구조를 짜임새 있게 짜야 하는 부분에 대해서는 설명을 하지 않아도 충분히 이해할 것이다.
문제
1. 헤더 크기를 아주 크게 만들어보자.
2. <h4></h4> 태그의 폰트 사이즈를 27 픽셀로 설정해보자.
답변
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}Add a box-shadow to a Card-like Element
박스 쉐도우 설정하기
설명
박스 쉐도우 (box shadow)는 아래 그림과 같이, 문자 그대로 박스에 그림자 효과를 준다.
박스쉐도우에는 다음과 같은 몇 가지 프로퍼티(property, 특성)를 설정할 수 있다.
- 오프셋-x (offset-x) : 엘레먼트에서 수평으로 얼마나 크게 그림자를 설정할 것인지
- 오프셋-y (offset-y) : 엘레먼트에서 수직으로 얼마나 크게 그림자를 설정할 것인지
- 블러 래디어스 (blur radius, 흐릿한 정도)
- 스프레드 래디어스 (spread radius, 퍼지는 정도)
- 칼라
참고로, 블러 래디어스와 스프레드 레디어스는 옵션이다.
꼭 안 넣어도 된다.
1개 세트의 박스쉐도우 프로퍼티를 설정할 땐 코마(comma, 쉼표)를 넣지 않지만,
여러 개의 박스쉐도우를 설정하고 싶다면, 콤마로 나눠서 설정하면 된다.
과정을 살짝 살펴보자.
먼저 첫 번째 박스쉐도우 설정값을 적용해보자.
.example {
box-shadow: 0 10px 20px rgba(0,0,0,0.19);
}
이번에는 두 번째 설정값만 적용해보자.
.example {
box-shadow: 0 6px 6px rgba(0,0,0,0.23);
}
문제
1. <div></div> 태그를 보면, 이미 thumbnail 이라는 id 가 설정되어 있다.
2. <style></style> 태그 안에, 썸네일 셀렉터를 만들어 보자. 클래스는 '.'을 사용하고, 아이디에는 '#'를 사용한다는 점을 기억할 것이다.
3. #thumbnail 셀렉터 안에, 위에서 살펴봤던 두 개의 쉐도우박스 설정값을 모두 적용해보자. 콤마로 나눠서 적용한다는 점을 기억하자.
답변
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}Decrease the Opacity of an Element
투명도 설정하기
설명
CSS에서 오파시티 (opacity, 불투명함)라는 프로퍼티로는 투명도, 즉 트랜스패런시(transparency)를 설정할 수 있다.
오파시티 발류는 0에서 1이라는 숫자로 설정할 수 있다.
0은 완전히 투명한 상태이고,
1은 완전히 불투명한 상태이다.
오파시티를 설정하게 되면, 엘레먼트 전체에 적용된다.
이미지든 텍스트의 바탕색이든 간에 말이다.
문제
1. 앵커(anchor) 의 오파시티를 설정해보자.
2. links 클래스로 앵커 태그가 셀렉트 되어 있는지도 혹시 모르니 확인하는 것을 잊지말자.
답변
.links {
text-align: left;
color: black;
opacity: 0.7;
}Use the text-transform Property to Make Text Uppercase
텍스트 특성 바꿔보기
설명
텍스트 트랜스폼 (text-transform, 텍스트 변형)는 CSS에 있는 프로퍼티(property, 특성) 중 하나다.
문자 그대로 텍스트의 외형을 바꾼다.
웹 페이지 상의 컨텐츠를 일관성 있게 표출하는데 사용하기에 제격이다.
그러면 텍스트 자체를 바꾸는 수고를 덜수 있다.
대부분 영어 텍스트에 적용되는 내용이라, 한글에는 적용이 불가능할 것처럼 보인다.
나는 공부벌레 (I am a study ant) 라는 문장을 사용하여, 하나씩 살펴보자.
로워케이스(lowercase, 소문자) : i am a study ant
어퍼케이스(uppercase, 대문자) : I AM A STUDY ANT
캐피털라이즈(capitalize, 영문 타이틀처럼 첫 알파벳만 대문자) : I Am A Study Ant
이니셜 (initial, 기본값) : I am a study ant
인헤릿 (inherit, 패런트 엘레먼트에서 인헤릿 받기) : I am a study ant (상위 엘레먼트에 어떤 CSS가 적용되어 있느냐에 따라 결과가 달라질 수 있음)
논 (none, 기존값) : I am a study ant
개인적으로는 언제 이니셜과 논 발류가 달라질 수 있는지 모르겠다.
문제
<h4></h4> 태그 안에 있는 텍스트를 대문자로 만들어 보자.
답변
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
text-transform: uppercase;
}Set the font-size for Multiple Heading Elements
제목글의 폰트 사이즈 설정하기
설명
폰트 사이즈 (font-size) 특성으로는, 문자 그대로 텍스트 엘레먼트의 크기를 조정할 수 있다.
폰트 사이즈로 웹 페이지에 있는 컨텐츠에 일관성을 유지할 수 있다.
문제
<h1></h1> 태그부터 <h6></h6> 태그에 font-size 를 설정해보자.
- h1 : 68px
- h2 : 52px
- h3 : 40px
- h4 : 32px
- h5 : 21px
- h6 : 14px
답변
<style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>Applied Visual Design: Set the line-height of Paragraphs
줄 간격 설정하기
설명
CSS에서는 라인 하이트 (line-height, 줄 간격) 를 조절할 수 있다.
라인 하이트를 사용하면, 텍스트의 각 줄 간의 간격을 더 넓게 하거나 더 좁게 만들 수 있다는 얘기다.
문제
light-height 프로퍼티를 <p></p> 태그에 25픽셀로 설정해보자.
답변
<style>
p {
font-size: 16px;
line-height: 25px;
}
</style>Applied Visual Design: Adjust the Hover State of an Anchor Tag
마우스 커서를 갖다대면, 상태 변하게 만들기
설명
이번에는 수도 클래스 (pseudo-class)를 사용해보려 한다.
수도 클래스는 엘레먼트의 특정 상태(state)를 조정할 수 있다.
예를 들면, 링크에 마우스 커서를 갖다대면 링크의 색이 바뀌도록 할 수 있는데,
수도 클래스를 사용하여 이런 엘레먼트의 상태를 바꿀 수 있다는 말이 된다.
호버(:hover, 위에 갖다 대기) 수도 클래스 셀렉터를 사용하면,
위에서 설명한 것과 같이, 갖다댄 엘레먼트의 상태를 바꿀 수 있다.
색을 바꿀 수도 있고, 폰트를 바꿀 수도 있겠다.
문제
1. 앵커 태그가 현재 검정색으로 상태가 정해져 있다.
2. 마우스 커서를 앵커 태그에 갖다댈때만, 이 엘레먼트가 파란색으로 상태가 변하도록 만들어 보자.
답변
<style>
a {
color: #000;
}
a:hover {
color: blue;
}
</style>Change an Element's Relative Position
엘레먼트의 위치 바꾸기
설명
CSS는 HTML 엘레먼트를 각각의 박스처럼 본다.
그래서 CSS 박스 모델이라고도 한다.
블록 레벨 아이템은 항상 새 줄에서 시작한다.
예를 들어, 문장을 이어서 쓰지 않고 새로운 줄에서 다시 시작하는 개념과 같다.
인라인(in-line) 아이템은 새로운 줄에서 시작하지 않고, 문장을 이어서 쓰는 것과 같은 개념이다.
예를 들어보자.
이미지 컨텐츠 옆에 문장을 쓰고 싶다면, 인라인 아이템을 사용할 것이다.
반대로 이미지는 단독으로 두고, 새로운 줄부터 문장을 쓰고 싶다면, 블록 레벨 아이템을 사용하면 될 것이다.
HTML 레이아웃에 적용된 기본 설정을 노멀 플로우 (normal flow) 라고 한다.
그리고 CSS로 이를 엎어쓸 수 있다. HTML 기본값 대신 CSS 값을 적용할 수 있다는 얘기다.
엘레먼트의 포지션을 렐레티브(relative, 상대적) 로 두면,
현재 노멀플로우와 상대적으로 어떤 포지션에 둬야 하는지를 설정하는 것이다.
포지션 프로퍼티는 오프셋 프로퍼티와 함께 설정할 수 있다.
오프셋을 레프트(left), 라이트(right), 톱(top), 보톰(bottom) 등으로 구분한 다음,
픽셀, 퍼센트, 혹은 엠(em)으로 값을 설정할 수 있다.
코드를 보고 설명해보겠다.
p {
position: relative;
bottom: 10px;
}
현재 패래그래프 스타일을 셀렉트 한 상태이다.
패래스래프 엘레먼트가 속한 박스 전체를 셀렉트 한 상태로 생각하면 된다.
기존의 노멀 플로우와 상대적으로 움직일 수 있게, 포지션을 렐레티브로 설정했다.
그리고 기존 박스 보톰에서 10픽셀 멀어지게 설정했다.
그러면 패래그래프 박스는 아마도 원래 박스 위치에서 10픽셀만큼 위로 밀려 올라갈 것이다.
특정 엘레먼트의 포지션을 바꿔도, 나머지 엘레먼트는 영향을 받지 않는다.
결국 잘못하면, 엘레먼트끼리 겹치는 포지션에 둘 수도 있다는 말이다.
다만,
포지션을 바꿔서 웹페이지의 레이아웃을 여러가지 방법으로 조정할 수 있다고 해도,
기본 HTML 엘레먼트로 전반적인 웹페이지의 구조를 만들어야 한다는 점을 기억하자.
시각 장애인은 스크린리더(screen reader)라는 기능의 도움을 받아,
웹페이지의 컨텐츠를 읽어내려가는데,
이는 HTML 엘레먼트를 기준으로 하기 때문이다.
문제
1. <h2></h2> 의 포지션을 렐레티브로 설정해보자.
2. 그리고 톱(top)에서 10픽셀 멀어지도록 해보자. (아래로 밀려 내려간다.)
3. 여기서 <h2></h2> 엘레먼트만 움직이고, 다른 엘레먼트는 전혀 영향을 받지 않는다는 점을 확인해보자.
답변
<style>
h2 {
position: relative;
top: 15px;
}
</style>Move a Relatively Positioned Element with CSS Offsets
CSS 오프셋으로 엘레먼트 움직이기
설명
위에서 연습해본 바와 같이,
CSS 오프셋으로 웹페이지 내 엘레먼트의 노멀 플로우 포지션을 렐레티브(상대적으로) 하게 변경할 수 있다.
오프셋은 밀린다는 느낌이어서,
오프셋을 톱(top)으로 설정하면, 엘레먼트는 설정값만큼 아래로 밀려 내려간다.
간단하게 생각하면 반대쪽으로 움직인다는 얘기다.
문제
1. <h2></h2> 엘레먼트의 포지션을 렐레티브로 설정해보자.
2. 오른쪽으로 15픽셀
3. 그리고 위로 10픽셀만큼 움직이도록 설정해보자.
4. 밀린다는 느낌으로, 설정한 오프셋의 반대로 움직인다는 점을 기억하자.
답변
<style>
h2 {
position: relative;
left: 15px;
bottom: 10px;
}
</style>Lock an Element to its Parent with Absolute Positioning
앱솔루트 포지셔닝 (절대 위치) 사용하기
설명
이번에는 CSS 포지션의 앱솔루트(absolute, 절대 위치)에 대해 배워 보려 한다.
렐레티브 포지션은 다른 엘레먼트에 영향을 주지 않았던 것을 기억할 것이다.
반대로
앱솔루트 포지션은 웹페이지의 노멀플로우를 벗어나기 때문에,
다른 엘레먼트의 위치에도 영향을 미친다.
예를 들어, 텍스트 A가 위에 있고, 텍스트 B가 아래에 있다고 가정해보자.
렐레티브 포지션으로 텍스트 A를 텍스트 B 위치로 옮기면,
두 텍스트가 겹쳐 보이게 된다.
렐레티브는 다른 아이템에 영향을 주지 않기 때문이다.
앱솔루트 포지션은 텍스트 A를 텍스트 B 위치로 옮기면,
텍스트 B가 텍스트 A 위치를 대신 채워넣게 된다.
결과적으로는
텍스트 B가 위에 있고, 텍스트 A가 아래에 있는 모양이 되는 것이다.
문제
1. 서치바 아이디 (#searchbar) 엘레먼트의 포지션을 앱솔루트로 설정하자.
2. 그리고 오프셋을 톱과 라이트 (위, 오른쪽)에 각각 50픽셀씩 설정해보자.
답변
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}Lock an Element to the Browser Window with Fixed Positioning
픽스드 포지셔닝 (고정 위치) 사용하기
설명
이번에는 픽스드(fixed, 고정) 포지션에 배워보도록 하자.
픽스트 포지션은 다른 엘레먼트에 영향을 주지는 않지만,
브라우저 위치에 스스로를 고정시킨다.
그래서 웹페이지 아래로 스크롤해서 내려가도,
픽스드 포지션으로 설정된 엘레먼트는
그 위치에 그대로 브라우저 상에서 보이는 것이다.
엑셀 테이블의 가장 첫번째 행을 고정시키는 것과 같은 효과가 있다고 생각하면 되겠다.
문제
1. 내비게이션 바가 만들어져 있는 상태다.
2. #navbar 아이디를 사용하여, 픽스드 포지션으로 설정해보자.
3. 톱과 레프트 오프셋 값을 각각 0픽셀로 바꿔보자.
답변
#navbar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #767676;
}Push Elements Left or Right with the float Property
플로트 특성으로 엘레먼트 공간 조정하기
설명
이번에는 지금까지 배웠던 포지션과 관련된 프로퍼티에서 벗어나 보려 한다.
하지만 포지셔닝을 조정한다는 컨셉은 같다.
이번에 배워볼 프로퍼티는 플로트(float)이다.
플로트를 사용하면 웹페이지 상에 적용된 노멀플로우(normal flow)를 무시하게 된다.
일반적으로,
특정 엘레먼트가 차지하는 공간을 왼쪽이나 오른쪽으로 두고 싶을 때 사용한다고 생각하면 될 듯 하다.
이 때, 보통 위드스(width, 가로길이)를 함께 설정하여, 왼쪽이나 오른쪽의 얼마나 큰 공간을 차지할지 함께 설정하게 된다.
프리코드캠프 화면을 확인해보면,
플로트 프로퍼티로 조정하는 공간이 회색으로 표시되어 있다.
문제를 풀어보며
플로트 프로퍼티를 여러 방식으로 설정해보며 테스트 해보면,
이해가 훨씬 쉬울 것이다.
문제
1. 레프트 아이디 (#left)의 플로트를 레프트로 설정하자.
2. 라이트 아이디 (#right)의 플로트를 라이트로 설정하자.
답변
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}Change the Position of Overlapping Elements with the z-index Property
겹친 엘레먼트의 순서 바꾸기
설명
특정 엘레먼트를 오버랩(overlap, 겹치게) 되게 포지셔닝 했을 때,
더 나중에 포지셔닝을 적용한 엘레먼트가 위에 놓이게 된다.
z-index 프로퍼티로 이런 부분을 더 자유롭게 설정할 수 있다.
어떤 엘레먼트를 더 위에 놓을지 설정할 수 있다는 얘기다.
예를 들어,
A 엘레먼트에 대한 CSS를 가장 먼저 설정했다고 치자.
B 엘레먼트에 대한 부분을 A 설정값 아래에 적용했다면,
A 엘레먼트가 아래에 깔리고, B 엘레먼트가 위에 놓이는 식이다.
여기서
z-index 값을 A에 2로,
B에 1로 설정한다면,
B 엘레먼트가 아래에 깔리고,
A 엘레먼트가 그 위에 놓이는 식으로 조정이 가능하다.
문제
1. 파란색 사각형은 .second 클래스, 빨간색 사각형은 .first 클래스가 적용되어 있다.
2. 파란색 사각형의 z-index는 현재 1로 설정되어 있다.
3. 빨간색 사각형이 위에 놓여지게, z-index 값을 2로 설정해보자.
답변
.first {
background-color: red;
position: absolute;
z-index: 2;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}Center an Element Horizontally Using the margin Property
마진으로 엘레먼트 위치 조정하기
설명
지금까지 연습해본 바와 같이, 포지셔닝 기술에는 여러가지 방법이 있다.
또 다른 방법 중 하나는, 엘레먼트 블록을 수평으로 중간 지점에 맞추는 방법이다.
이는 마진(margin, 엘레먼트 블록 바깥 공간)의 값을 오토(auto, 자동)으로 설정하는 방법이다.
이 방법은 이미지에도 적용할 수 있다.
이미지 엘레먼트는 기본적으로 인라인(inline, 같은 줄에 형성되는) 엘레먼트이다.
디스플레이 특성을 블록으로 변경하면, 블록 엘레먼트로 바꿀 수도 있다.
문제
1. <div></div> 를 수평 방향으로 센터에 위치하도록 바꿔보자.
2. 마진을 오토로 설정하여 바꿔보도록 하자.
답변
<style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>
<div></div>Learn about Complementary Colors
보색
설명
색상과 디자인에 대한 주제는 굉장히 범위가 넓고 깊다.
여기서는 기본적인 부분만 짚고 넘어가려 한다.
색은 특정 콘텐츠에 주의를 끌 수 있다.
색을 잘만 이용하면, 어떤 감정도 불러일으킬 수 있다.
조합에 따라서는 모든 것이 더 조화롭게 보이게 만들 수도 있다.
색의 배합과 선택에 따라
웹사이트의 룩(look, 모습)을 완전히 바꿔버릴 수 있다.
그러기 위해서는 고려해야 할 사항들이 아주 많다.
칼라휠(color wheel, 색상환)은 각 색상이 서로 어떻게 관련되어 있는지 보여준다.
칼라휠에는
비슷한 유형의 휴(hue, 색조)가 근처의 자리잡혀 있고,
서로 반대의 유형의 휴는 더 멀리 위치해 있다.
두 가지 색상이 칼라휠 안에서 완전히 반대편에 자리 잡혀 있을 때,
우리는 이를 컴플레멘터리 칼라 (complementary color, 보색)라고 한다.
서로 보완해주는 색이라고 생각하면 된다.
이 두 가지 색상을 조합하면,
서로의 색을 무마시켜 결과적으로는 회색 색상이 나오게 된다.
하지만 이 두 가지 색상을 같은 위치에 따로 배치하면,
확연하게 서로 대조되는 색으로 보인다.
보색의 몇 가지 예로는:
- 레드 (#FF0000) / 사이앤 (#00FFFF)
- 그린 (#00FF00) / 마젠타 (#FF00FF)
- 블루 (#0000FF) / 옐로우 (#FFFF00)
보색의 예를 보면,
F와 0이 서로 완전히 반대로 조합되어 있음을 확인할 수 있다.
색 조합의 구식인 방법으로는 RYB 칼라 모델이 있는데,
이 모델은 현대적인 칼라 모델과는 다른 원색과 대조색으로 구성되어 있다.
현대의 색상 이론은
컴퓨터에서 보이는 RGB 모델과,
프린터에서 사용하는 CMY(K) 감색법을 사용한다.
색의 조합이나 보색을 찾는 방법으로는
칼라 피커 (color picker)와 같은 툴을 사용할 수 있다.
참고로,
색상을 사용하는 것이 아주 중요하긴 하지만,
색상의 사용으로만 중요한 정보를 전달하는 것은 좋은 방법이 아니다.
시력장애인 또한 항상 염두에 두어,
색이 아니어도 정보가 충분히 정보가 전달 될 수 있는 방법을 항상 고려해야겠다.
문제
1. 블루 클래스의 백그라운드 칼라를 블루로 바꿔보자.
2. 옐로우 클래스의 백그라운드 칼라를 옐로우로 바꿔보자.
답변
.blue {
background-color: #0000FF;
}
.yellow {
background-color: #FFFF00;
}Learn about Tertiary Colors
제3색에 대해 배워보기
설명
우리가 컴퓨터나 핸드폰 화면에서 보는 색깔은 빨간색, 초록색, 파란색, 즉 RGB 조합의 결과물을 보는 것이다.
현대 색채 이론에서는 이를 RGB 가색 모델 (additive color model)이라 한다.
레드/그린/블루 는 프라이머리 칼라 (primary color, 원색)이라 한다.
원색 두 가지를 섞으면 세컨더리 칼라 (secondary color, 등화색)을 만들 수 있다.
- 그린/블루 : 청록색 (Cyan)
- 레드/블루 : 자홍색 (magenta)
- 레드/그린 : 노란색 (yellow)
이러한 세컨더리 칼라의 컴플레멘터리 칼라 (complementary color, 보색)는 섞이지 않은 원색이 된다.
예를 들어, 노란색에는 블루가 섞이지 않았기 때문에,
블루가 노란색의 컴플레멘터리 칼라가 되는 것이다.
당연히 칼라휠 (color wheel, 색상환)에서 서로 반대에 위치하는 색상이 된다.
터셔리 칼라 (tertiary color, 제3색)는 프라이머리 칼라와 세컨더리 칼라의 조합으로 만들 수 있다.
예를 들어, 레드(프라이머리)와 옐로우(세컨더리)를 섞으면 오렌지(터셔리)가 된다.
그러면 총 6가지의 색상에 대한 결과물이 칼라휠에 더 추가될 수 있는 것이다:
1. 레드 (레드 총 1색)
2. 옐로우 (레드/그린 총 2색)
3. 오렌지 (레드/그린/옐로우 총 3색)
색채의 조합을 만들어 내기 위해 사용할 수 있는 방법은 굉장히 많다.
터셔리 칼라를 사용할 수 있는 한 가지 예로는,
스플릿 컴플레멘터리 칼라 스킴 (split-complementary color scheme)이라는 방식이 있다.
이 스킴에서는 베이스 칼라 (base color, 밑색)로 시작하여,
이 칼라를 보완하는 보색인 컴플레멘터리 칼라 두개가 양옆에 위치하게 된다.
이렇게 구성된 총 3가지 색상은 디자인 상에서 굉장히 시각적으로 대조되는 색임과 동시에,
서로 대비되는 컴플레멘터리 칼라보다는 덜 대조적이다.
스플릿 컴플레먼터리 칼라 스킴의 예는 다음과 같다:
1. 오렌지 : #FF7F00
2. 사이엔 : #00FFFF
3. 라스베리 : #FF007F
문제
1. 오렌지, 사이엔, 라스베리 클래스가 생성되어 있다.
2. 클래스 이름에 맞춰 백그라운드 색을 바꿔보자.
3. 이름을 사용하지 말고, 헥사코드를 꼭 사용하자.
서로 색이 상당히 대조적인 것을 눈으로 확인할 수 있을 것이다.
답변
.orange {
background-color: #FF7F00;
}
.cyan {
background-color: #00FFFF;
}
.raspberry {
background-color: #FF007F;
}Adjust the Color of Various Elements to Complementary Colors
보색을 웹페이지에 적용해보기
설명
서로 대조적인 색채인 보색(complementary color)를 이용해, 더 눈에 띄게 할 수 있는 방법을 지금까지 알아보았다.
하지만 이런 방법을 너무 남용하면 정작 중요한 텍스트를 읽기가 힘들어 질 수도 있다.
목적을 잊으면 안 된다.
특정 텍스트의 중요성을 부각하기 위해서 사용한 색이 오히려 텍스트를 가리면 안 된다는 얘기다.
실제로 색상을 사용할 때는,
전반적으로 사용하는 색상이 있고.
이에 비해 더 눈에 띄는 컨텐츠를 만들기 위해 보완할 만한 색상을 사용한다.
문제
1. 틸(teal, 청색) 색상을 전반적으로 사용하는 색으로 지정하려 한다.
2. 틸 색상의 컴플렘멘터리 칼라인 오렌지는 하이라이트 색으로 사용하려 한다.
3. 헤더(header)와 푸터(footer)는 현재 검은색으로 되어 있는데, 이를 틸 색상으로 바꿔보자.
4. h2 색상도 틸 색상으로 바꾸자.
5. 마지막으로 사인업 버튼은 오렌지 색상으로 바꿔보자.
답변
header {
background-color: #09A7A1;
color: white;
padding: 0.25em;
}
h2 {
color: #09A7A1;
}
button {
background-color: #FF790E;
}
footer {
background-color: #09A7A1;
color: white;
padding: 0.5em;
}Adjust the Hue of a Color
색조 바꾸기
설명
색채에는 몇가지 특성이 있다.
- 휴 (hue, 색조)
- 새츄레이션 (saturation, 채도)
- 라이트네스 (lightness, 명도)
CSS3에서는 이를 hsl() 로 조정할 수 있게 해준다.
휴는 우리가 일반적으로 생각하는 색깔이라고 생각하면 된다.
빨간색을 왼쪽에 두고 시작하여,
색상이 점점 변해 가운데 지점에서는 초록색으로 변하고,
여기서 더 점점 변해 오른쪽에서는 파란색으로 변하는 선이 있다고 가정해보자.
휴는 이 이 선 안에 존재하는 색이라고 생각하면 되겠다.
hsl() 안에서의 휴는 칼라휠(color wheel, 색상환)의 개념으로 이해하면 된다.
그래서 칼라휠 안에서 0도부터 360도 범위 안에서의 값을 설정하면 되는 것이다.
새츄레이션은 색채 안에 있는 회색의 양을 의미한다.
완전히 새츄레이트 됐다는 말은 회색이 존재하지 않는다는 의미이다.
새츄레이션이 거의 없는 색상은 거의 회색이라고 보면 되는 것이다.
새츄레이션은 퍼센트 값으로 설정한다.
라이트네스는 색채 안에 있는 흰색과 검은색의 양을 의미한다.
0%가 검은색이고, 100%가 흰색이다.
그래서 50%는 원래의 색을 의미하게 된다.
hsl() 값으로 몇 가지 색상의 예를 들어보겠다.
아래의 색상들은
회색이 섞이지 않은 일반색이니,
당연히 새츄레이션은 100%이며,
라이트네스는 50%이다.
| 칼라 | HSL |
| 레드 (red, 빨간색) | hsl(0, 100%, 50%) |
| 옐로우 (yellow, 노란색) | hsl(60, 100%, 50%) |
| 그린 (green, 초록색) | hsl(120, 100%, 50%) |
| 사이앤 (cyan, 청록색) | hsl(240, 100%, 50%) |
| 마젠타 (magenta, 자홍색) | hsl(300, 100%, 50%) |
문제
1. 클래스 이름이 3가지 색상으로 표시되어 있다.
2. 클래스 이름에 맞게 hsl()을 사용하여, 색을 바꿔보자.
답변
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}Adjust the Tone of a Color
색의 톤 설정하기
설명
위에서 연습해 보았던 hsl() 은 색의 톤(tone, 색조)을 손쉽게 조정할 수 있게 해준다.
일반 색상에서 라이트네스에 약간의 화이트를 섞어주면, 옅은 색을 만들 수 있다.
반대로, 라이트네스에 약간의 블랙을 섞어주면, 약간의 그림자가 진 색처럼 만들 수도 있다.
라이트네스 뿐만 아니라,
새츄레이션으로 회색의 빛을 얼마만큼 띄게 하느냐에 따라
색의 톤을 완전히 바꿔버릴 수도 있다.
문제
모든 엘레먼트는 기본적으로 백그라운드 칼라 (background-color, 바탕색)가 트랜스패런트(transparent, 투명)로 설정되어 있다.
현재 화면에 보이는 nav 엘레먼트에는
아무런 백그라운드 칼라가 설정되어 있지 않음에도 불구하고
사이앤(cyan, 청록색)으로 보인다.
그 이유는 헤더 엘레먼트의 백그라운드가 사이앤으로 설정되어 있기 때문이다.
1. nav 엘레먼트의 백그라운드 칼라를 바꿔보자.
2. 사이앤의 색을 사용하되, 새츄레이션은 80%, 라이트네스는 25%로 설정해보자.
답변
nav {
background-color: hsl(180, 80%, 25%);
}Create a Gradual CSS Linear Gradient
색이 바뀌는 과정을 보여주는 Linear Gradient
설명
HTML 엘레먼트에 색을 결정하는 것은 휴 하나만 갖고 할 수 있는 것이 아니다.
CSS 에서는 하나의 색이 다른 색으로 바뀌는 과정을 보여주는
칼라 트랜지션 (color transition)을 사용할 수 있다.
또 다른 말로는 그래디언트(gradient, 변화도)라고도 한다.
이는 백그라운드 프로퍼티(property, 특성)에 포함된 펑션(function, 함수)인 linear-gradient() 펑션을 사용하면 된다.
다음과 같은 신택스(syntax, 구문)를 사용한다.
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
"90deg" 라고 표시된, 첫 번째 아규먼트(argument, 인자)는 시작하는 색의 방향을 의미한다.
90deg는 각도의 90도를 의미하기 때문에,
수직으로 움직이는 방향성을 나타낸다.
"45deg" 로 쓰게 되면, \ 와 같이 45도 각도의 방향성을 의미한다.
그 다음으로는 기준점이 될만한 색깔들을 넣어주면 된다.
꼭 2가지 색으로만 만들 수 있는 것이 아니기 때문에,
여러가지 색상을 넣어 시험해봐도 된다.
문제
1. div 엘레먼트에 백그라운드의 리니어 그래디언트를 추가해보자.
2. 방향은 35도, 색은 #CCFFFF와 #FFCCCC를 사용해보자.
옅은 빨간색에서 옅은 파란색으로 바뀌는 과정이 아름답게 연출될 것이다.
답변
div {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}Use a CSS Linear Gradient to Create a Striped Element
줄무늬 모양 만들어보기
설명
repeating-linear-gradient() 펑션은 linear-gradient() 와 비슷하다.
다른 점은 그래디언트(grandient, 변화도)가 반복된다는 점이다.
리피팅 리니어 그래디언트에 넣을 수 있는 값이 여러가지가 있는데,
우리는 간단하게 하기 위해,
앵글(angle, 각도)과 칼라가 멈추는 지점인 칼라 스톱 (color stop) 갖고 살펴보려 한다.
앵글 값은 그래디언트의 방향이다.
칼라 스톱은 다른 색을 설정하는 지점이다.
칼라 스톱은 퍼센트나 픽셀 크기로 지정할 수 있다.
프리코드캠프 에디터 화면에서 보이는 예를 확인해보자.
픽셀 0에서 칼라 옐로우로 시작하게 되어 있는 것을 확인할 수 있다.
이 색이 변화하여 두 번째 칼라인 블루에서 끝나게 되어 있다.
블루는 픽셀 40에서 시작하여 그린으로 변하게 되어 있다.
이는 다시 변화하게 네 번째 칼라인 레드에서 끝나게 되어 있는데,
가장 첫 지점인 0픽셀에서 80픽셀 떨어진 지점으로 설정되어 있다.
1번 칼라인 옐로우에서 2번 칼라인 블루까지는
트랜지션이 이뤄지는 것을 눈으로 확인할 수 있다.
2번 칼라와 3번 칼라인 블루는
40픽셀이라는 지점인 같은 위치에 있기 때문에
트랜지션은 확인할 수 없다.
3번 칼라와 4번 칼라인 레드의 트랜지션은 확인할 수 있다.
문제
1. 앵글(angle, 각도)을 45deg 로 바꿔보자.
2. 0픽셀 시작 지점을 옐로우로 설정하자.
3. 40 픽셀 끝 지점도 같은 옐로우로 설정해보자.
4. 이제 40픽셀 시작 지점을 블랙으로 설정하자.
5. 80픽셀 끝 지점도 같은 블랙으로 설정하자.
성공하면, 아래와 같은 그림이 결과로 뜰 것이다.
답변
repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);Create Texture by Adding a Subtle Pattern as a Background Image
이미지를 바탕화면에 적용하기
설명
화면의 바탕인 백그라운드를 좀 더 눈에 띄게 만드는 방법 중 하나로는
약간의 패턴을 적용하는 것이다.
다만, 바탕이 너무 튀어서는 안 되므로, 발란스가 중요하다.
백그라운드 프로퍼티(property, 특성)에는 url() 펑션이 있다.
url() 로 특정 이미지와 링크하여,
이 이미지에 우리가 원하는 패턴을 백그라운드에 적용할 수 있다.
이미지를 링크로 걸때는 주소를 따옴표("") 안에 넣어주면 된다.
문제
1. 이 링크를 사용해보자. (https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png)
2. 보디 셀렉터 안에 이 이미지를 백그라운드로 설정해보자.
성공하면, 아래 그림과 같은 패턴이 화면에 뜰 것이다.
자세히 보면, 작은 소용돌이 같은 문양이 바탕에 은은하게 깔려있다.
답변
<style>
body {
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png")
}
</style>Use the CSS Transform scale Property to Change the Size of an Element
비율 설정으로 엘레먼트 크기 조정하기
설명
엘레먼트의 크기 비율을 조정하는데에는
트랜스폼(transform) 프로퍼티에 scale() 펑션을 사용할 수 있다.
원래 크기의 2배로 설정하고 싶다면 이런 식으로 하면 된다:
p {
transform: scale(2);
}문제
1. #ball1 아이디의 엘레먼트는 그대로 두자.
2. #ball2 아이디로 설정된 엘레먼트의 크기만 1.5배로 늘려보자.
답변
#ball2 {
left: 65%;
transform: scale(1.5);
}Use the CSS Transform scale Property to Scale an Element on Hover
마우스 커서가 닿았을 때, 엘레먼트가 커지게 만들기
설명
위에서는 트랜스폼(transform, 변형)으로 크기를 조정해봤다.
트랜스폼으로는 크기 뿐만 아니라,
엘레먼트의 위치를 움직이거나,
엘레먼트를 비스듬하게 위치시키는 등
여러가지의 펑션을 적용할 수 있다.
:hover 와 같은 특정 엘레먼트의 상태를 조정할 수 있는 수도클래스(pseudo-class)를 사용할 때도
트랜스폼으로 엘레먼트의 상태를 조정할 수 있다.
예를 들어,
아래의 코드는 마우스 커서를 엘레먼트에 올려놓으면
엘레먼트의 크기가 2.1배 커지는 효과를 가져온다.
p:hover {
transform: scale(2.1);
}
참고로,
디브(div) 엘레먼트에 트랜스폼을 적용하면,
디브에 포함된 모든 차일드(child, 하위) 엘레먼트가 영향을 받는다.
문제
1. <div></div> 에 hover 룰을 적용해보자.
2. 트랜스폼을 사용하여, <div></div> 엘레먼트의 크기가 1.1배가 되도록 적용해보자.
답변
div:hover {
transform: scale(1.1);
}Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
엘레먼트 모양의 양옆을 비틀어 놓기
설명
이번에는 트랜스폼의 skewX() 에 대해 살펴보려 한다.
스큐(skew, 비스듬)는 주어진 각도만큼 X축, 즉 수평으로 기울게 한다.
아래 코드는
X축 -32도 스큐를 적용한 것이다.
p {
transform: skewX(-32deg);
}문제
1. #bottom 아이디가 주어진 엘레먼트가 있다.
2. 이 엘레먼트에 X축 24도 스큐를 적용해보자.
답변
#bottom {
background-color: blue;
transform: skewX(24deg);
}Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
엘레먼트의 위아래를 비틀어 놓기
설명
위에서 살펴본 바와 같이,
skewX() 는 X축으로 엘레먼트를 비틀어 놓는다.
같은 방식으로,
skewY() 는 Y축, 즉 수직 방향으로 엘레먼트를 비틀 수 있다.
문제
1. #top 아이디가 주어진 엘레먼트를 확인할 수 있을 것이다.
2. 이 엘레먼트에 Y축 -10 스큐를 적용해보자.
답변
#top {
background-color: red;
transform: skewY(-10deg);
}Create a Graphic Using CSS
CSS로 그래픽 만들기
설명
지금까지 살펴본 바와 같이
셀렉터와 프로퍼티(property, 특징)를 조합하여
재밌는 모양을 여러가지 만들 수 있다.
우리가 시도해볼만한 쉬운 예 중 하나는
초승달(crescent) 모양을 만드는 것이다.
이번에는 엘레먼트에 그림자 효과를 주는 박스쉐도우(box-shadow)와
엘레먼트의 각 코너(corner, 꼭지점)에 둥그런 효과를 주는 보더래디어스(border-radius)를
함께 사용해보려 한다.
투명한 동그라미를 만들고,
이 모양의 쉐도우를 약간 옆에 위치시켜
쉐도우가 초승달처럼 보이게 만들려 한다.
동그라미를 만들기 위해서는
보더래디어스의 값을 50%로 설정해야 한다.
이미 배웠던 바와 같이 박스쉐도우에는
오프셋X(offset-x), 오프셋Y(offset-y), 블러래디어스(blur-radius), 스프레드 래디어스(spread-radius), 칼라 등의 순서로 값을 설정하면 된다.
여기서 블러래디어스와 스프레드 래디어스는 옵션이다.
문제
1. 현재 화면에는 사각형 모양과 이 모양의 그림자가 만들어져 있다.
2. 먼저 사각형의 백그라운드 칼라를 투명하게 만들어 보자.
3. 그리고 보더 래디어스를 50%로 설정하자.
4. 마지막으로 오프셋X 25픽셀, 오프셋Y 10픽셀, 블러래디어스 0, 스프레드 래디어스 0, 칼라는 블루로 설정하자.
답변
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px blue;
}Create a More Complex Shape Using CSS and HTML
HTML과 CSS로 더 복잡한 모양 만들기
설명
세상에서 가장 인기 있는 모양 중 하나가 바로 하트 모양이다.
이번에는 하트 모양을 만들어 보려 한다.
하트 모양을 만들면서
::before, ::after 수도 엘레먼트 (pseudo-element) 에 대해서도 함께 살펴보려 한다.
먼저 아래 예시부터 살짝 들여다 보자.
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
먼저 ::before, ::after 수도엘레먼트가 제대로 동작하기 위해서는
콘텐트 프로퍼티를 설정해야 한다.
이 프로퍼티는 보통 사진이나 텍스트를 엘레먼트에 추가할 때 사용할 수 있다.
그래서 모양만 만들려고 해도,
콘텐트 프로퍼티는 반드시 설정해야 한다.
대신, 아무것도 들어가 있지 않은 비어있다는 의미의
엠티 스트링 (empty string, "")을 대신 넣으면 된다.
위에 예시처럼 따옴표를 열자마자 닫으면 된다.
그 외의 다른 프로퍼티에 대한 설명은 이미 배웠던 내용이니 생략하겠다.
대신 셀렉터에 있는 클래스를 조금씩 건드려 도대체 뭐가 어떻게 구성되어 있는지를 살펴보겠다.
가장 먼저 화면에는 핑크색 사각형이 아래에 깔려있는듯 하고,
동그란 파란색 사각형이 그 위에 놓여져 있는 것 같다.
하지만 핑크색 도형이 진정 사각형인지는 확인이 필요하다.
아래 깔려 있는 것이 맞는지 확인하기 위해,
.heart::after 클래스의 콘텐트 프로퍼티인 따옴표를 지워보겠다.
콘텐트가 제대로 작동하려면, 엠티 스트링이라도 넣어줘야 한다고 했었다.
엠티 스트링을 지우면, 이 클래스가 제대로 작동하지 않아, 파란색 모양이 화면에서 없어진다.
.heart::after 의 콘텐트에 다시 엠티 스트링을 넣고,
이번에는 .heart::before 클래스를 살펴보자.
정확한 모양의 구분을 위해,
먼저 .heart::before 클래스의 백그라운드 칼라를 레드로 설정하겠다.
하지만 그 전에 콘텐트가 설정되어 있지 않은 것이 보일 것이다.
.heart::before 콘텐트에서 엠티 스트링을 넣고,
백그라운드 칼라를 레드로 설정해보자.
그러면 아래와 같이 화면에 3가지 도형이 도사리고 있다는 것을 눈으로 확인할 수 있다.
이제 화면에 어떤 도형들이 숨어있는지 확인해봤으니,
실제 문제를 풀어보자.
문제
1. 먼저 .heart::after 의 백그라운드 칼라를 핑크로 바꾸고, 보더래디어스를 50%로 바꾸자.
위 설명을 그대로 따라하지 않았다면 아래 그림에서 빨간색 동그라미가 보이지 않을 것이다.
2. 이번에는 .heart 클래스의 트랜스폼 프로퍼티에 rotate(-45deg) 값을 설정해주자.
3. 마지막으로 .heart::before 의 백그라운드 칼라를 핑크로 만들자.
위 설명을 따라하지 않은 상태라면, 빨간색 동그라미가 보이지 않는 상태이기 때문에,
색은 변경하지 않고, 콘텐트에 엠티 스트링만 넣어주면 된다.
답변
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}Learn How the CSS @keyframes and animation Properties Work
애니메이션 만들어보기
설명
애니메이션을 만들기 위해서는
애니메이션 프로퍼티와 키프레임(@keyframe)을 알고 있어야 한다.
애니메이션 프로퍼티에는
애니메이션에 대해 설정한다.
키프레임은
애니메이션이 어떻게 작동해야 하는지 설정한다.
애니메이션에는 총 8가지 프로퍼티가 있다.
여기서는 가장 중요한 2가지만 다뤄보려 한다.
애니메이션 네임 (animation-name)은
말 그대로 애니메이션의 이름을 세팅한다.
나중에 키프레임에서 이 이름을 사용한다.
애니메이션 듀레이션 (animation-duration, 시간)은
애니메이션이 움직이는 시간을 설정한다.
키프레임에는 애니메이션이 정확히 어떻게 작동해야 하는지 설정한다.
이는 0%에서 100%까지의 각 프레임을 설정하는 것과 같다고 생각하면 된다.
0%에서는 가장 먼저 어떻게 시작하는지 보여주면,
100%에서는 어떻게 끝나는지 보여준다.
그러면 CSS가 알아서 트랜지션(transition, 변화과정)을 만들어낸다.
애니메이션과 키프레임을 설정하는 예는 다음과 같다:
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
#anim 아이디에는 애니메이션 이름과 시간이 설정되어 있다.
@keyframe 에서는 애니메이션 이름 colorful 을 사용하여,
애니메이션이 어떻게 작동해야 하는지 설정하였다.
문제
1. #rect 아이디에 다음의 내용을 설정해보자.
1-1. 애니메이션 네임은 rainbow 로
1-2. 애니메이션 듀레이션은 4초로
2. 키프레임은 다음과 같이 설정해보자.
2-1. 0% 의 백그라운드 칼라를 블루로
2-2. 50% 의 백그라운드 칼라를 그린으로
2-3. 100% 의 백그라운드 칼라를 옐로우로
모든 것을 제대로 설정했다면,
현재 화면에 보이는 검은색 박스가
4초에 걸쳐,
블루에서 그린으로, 그린에서 옐로우로 변하는 것이 보일 것이다.
답변
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}Use CSS Animation to Change the Hover State of a Button
버튼 색을 바꾸는 애니메이션 만들어보기
설명
마우스 커서가 버튼에 놓여지면,
버튼의 색깔을 바꾸는데도
키프레임을 사용할 수 있다.
예를 들면 이런 식이다:
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />문제
ms 는 밀리세컨드(millisecond, 0,001초)로,
1000ms 는 1초와 같다.
1. 키프레임을 새로 설정해보자.
2. 버튼 호버 셀렉터에 설정되어 있는 애니메이션 네임을 사용하자.
3. 100% 의 백그라운드 칼라만 #4791d0 으로 설정하면 된다.
답변
@keyframes background-color {
100% {
background-color: #4791d0;
}
}Modify Fill Mode of an Animation
애니메이션에 Fill 모드 적용해보기
설명
위에서 살펴본 바와 같이,
버튼에 마우스 커서를 갖다대면 색이 바뀌는 것까지는 좋았다.
하지만 우리가 설정했던 500ms 의 시간이 끝나면
다시 원래대로 색이 돌아와버린다.
이번에는 애니메이션 시간이 끝나도
원래대로 색이 변하지 않고,
변한 색 그대로 있게 만드는 법을 살펴보려 한다.
animation-fill-mode 를
포워드(forward)로 두면 된다.
애니메이션 필 모드는 애니메이션 시간이 끝나도
100% 에 설정한 애니메이션이 적용된 상태로 끝나게 한다.
animation-fill-mode: forwards;문제
1. button:hover 셀렉터에 animation-fill-mode 를 설정해보자.
2. forward 로 설정하면 된다.
답변
button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* Only change code below this line */
animation-fill-mode: forwards;
/* Only change code above this line */
}Create Movement Using CSS Animation
CSS 애니메이션으로 엘레먼트 움직이게 만들기
설명
엘레먼트에 픽스드(fixed, 고정) 혹은 렐레티브(relative, 상대적)와 같은 포지션이 설정되어 있는 경우,
CSS 오프셋으로 애니메이션 움직임을 설정하여,
오른쪽, 왼쪽, 위, 아래 등으로 움직이게 할 수 있다.
아래 예를 살펴보자.
여기서 설정한 바에 의하면,
0%에서는 엘레먼트가 톱(top, 위)의 0px 위치에서 시작했다가,
50%에서는 톱에서 50픽셀 아래로 밀린 위치로 이동하고,
100%에서는 다시 원래 위치인 0px로 돌아간다.
문제
1. <div></div> 에 수평적인 움직임을 적용해보자.
2. top 프로퍼티는 지우지 말자.
3. 레프트 오프셋을 적용하는 것이다.
4. 0% 에서는 0픽셀로,
5. 50% 에서는 25픽셀,
6. 100% 에서는 -25픽셀을 적용해보자.
7. 그러면 결과적으로는 대각선으로 움직이는 애니메이션 결과를 얻을 것이다.
답변
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 50px;
left: 25px;
}
100% {
background-color: yellow;
top: 0px;
left: -25px;
}Create Visual Direction by Fading an Element from Left to Right
엘레먼트가 움직임과 동시에 사라지게 만들어 보기
설명
이번에는 엘레먼트가 움직임과 동시에,
색이 점점 희미해지는 효과를 만들어 보려 한다.
오파시티(opacity, 불투명도)를 사용할 것이다.
문제
1. #ball 아이디에 적용될 @keyframes 에 오파시티를 추가해보자.
2. 50% 에서 오파시티가 0.1 이 되게 해보자.
답변
@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}Animate Elements Continually Using an Infinite Animation Count
무한 반복 애니메이션
설명
이번에는
애니메이션 이터레이션 카운트 (animation-iteration-count)를 사용하여
애니메이션을 반복할 수 있는 방법을 살펴보자.
animation-iteration-count: 3;
이 경우에는 애니메이션을 3번 반복할 수 있다.
이를 인피니트(infinite, 무한)로 설정하면,
애니메이션을 무한반복하게 만들 수 있다.
문제
animation-iteration-count 를 인피니트로 설정해보자.
답변
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}Make a CSS Heartbeat using an Infinite Animation Count
무한 반복 심장박동 애니메이션 만들어보기
설명
애니메이션 이터레이션 카운트를 한 번 더 사용해보자.
현재 프리코드캠프 웹사이트 화면에는
1초만 움직이는 애니메이션이 설정되어 있다.
문제
1. .back 클래스에 애니메이션 이터레이션 카운트를 인피니트로 설정해보자.
2. .heart 클래스에도 똑같이 인피니트를 설정해보자.
답변
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}Animate Elements at Variable Rates
키프레임으로 다른 박자의 애니메이션 적용하기
설명
지금까지 키프레임(@keyframes)과 애니메이션 이터레이션 카운트를 살펴봤다.
프리코드캠프 화면을 보면,
2개의 별이 반짝이는 애니메이션이 보일 것이다.
이 애니메이션에는
사이즈를 줄였다가 늘리는 애니메이션과
엘레먼트를 약간 투명하게 만들었다가
다시 불투명하게 만드는 애니메이션이 섞여있다.
이번에는 키프레임을 사용하여,
2개의 별이 똑같이 반짝이는 게 아니라,
서로 다른 박자에 반짝이도록 만들어 보려 한다.
문제
1. .star-1 클래스의 애니메이션 네임을 확인하자.
2. .star-1 클래스의 키프레임에서 20%를 50%로 바꿔보자.
답변
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}Animate Multiple Elements at Variable Rates
애니메이션 듀레이션으로 다른 박자의 애니메이션 적용하기
설명
위에서 살펴본 방법은,
키프레임을 사용하여 다른 박자의 애니메이션을 적용한 것이다.
이번에는
애니메이션 듀레이션 (animation-duration, 시간)을 사용하여
같은 결과를 만들어 보려 한다.
프리코드캠프 화면을 보면,
이번에는 3개의 별이 같은 박자로
인피니트(infinite, 무한)로 반짝이는 것이 보일 것이다.
각 별의 애니메이션 듀레이션을 다르게 설정하여
서로 다른 박자로 반짝이게 만들어보자.
문제
1. .star-1 클래스의 애니메이션 듀레이션을 1초로,
2. .star-2 클래스는 0.9초로,
3. .star-3 클래스는 1.1초를 적용해보자.
답변
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
}
.star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
}Change Animation Timing with Keywords
애니메이션 속도 설정하기
설명
animation-timing-function 프로퍼티는,
애니메이션이 얼마나 빨리 움직여야 할지 설정할 수 있다.
예를 들어
자동차 애니메이션이
A 지점에서 B 지점으로
특정 시간(애니메이션 듀레이션) 동안 이동한다고 해보자.
애니메이션 타이밍 펑션은,
이 자동차가 얼마나 빠른 속도로 움직여야 하는지 설정하는 것이다.
꽤 인기 있는 옵션이 몇 가지 있다.
- 이즈(ease) : 기본값
* 천천히 시작
* 중간까지 더 빠르게
* 천천히 끝
- 이즈아웃(ease-out)
* 시작은 빠르게
* 점점 느려지게
- 이즈인(ease-in)
* 시작은 느리게
* 점점 빨라지게
- 리니어(linear)
* 처음부터 끝까지 같은 속도
문제
1. <style></style> 태그 안에, #ball1 아이디와 #ball2 아이디가 보일 것이다.
2. 각 아이디에 애니메이션 타이밍 펑션을 적용해보자.
3. #ball1 아이디에는 리니어
4. #ball2 아이디에는 이즈아웃을 적용하자.
5. 각 아이디에는 같은 2초의 애니메이션 듀레이션이 적용되어 있는 상태이다.
답변
#ball1 {
left:27%;
animation-timing-function: linear;
}
#ball2 {
left:56%;
animation-timing-function: ease-out;
}Learn How Bezier Curves Work
베지어 곡선 1
설명
위에서 살펴본 animation-timing-function 에
베지어커브 (Bezier curves, 베지어곡선)을 사용하면,
더 자유로운 설정이 가능하다.
CSS 애니메이션에서 베지어커브 기능을 사용할 때는,
큐빅 베지어 (cubic-bezier)를 사용한다.
그래프 안에 있는 커브 모양이
애니메이션이 움직이는 속도를 설정한다고 생각하면 된다.
그래프의 가로는 X축이고,
그래프의 세로는 Y축이다.
각 축은 시작 지점 값인 0에서 시작하여,
최대 지점 값인 1에서 종료한다.
물론
마이너스 값을 설정하거나, 1보다 큰 값을 설정할 수 있지만,
애니메이션이 시작지점에서 약간 뒤로 빠졌다가 앞으로 움직인다던지,
종료지점을 지나쳤다가 다시 종료지점으로 돌아오는 방식을 설정할 때 사용한다.
그래프의 X축은
우리가 설정한 애니메이션 듀레이션 시간에 비례한다.
애니메이션 듀레이션 시간을 2초로 설정했다면,
X축 값 0이
애니메이션 듀레이션 0초,
X축 값 1이
애니메이션 듀레이션 2초를 의미한다.
그래프의 Y축은
애니메이션의 속도를 의미한다.
나는 숫자나 그래프와 친숙하지 않아,
이해하는데 한참 걸렸다.
물론 지금도 100% 이해했다고 할 수 없다.
이해가 잘 가지 않는다면,
베지어곡선을 조정하여,
애니메이션이 어떻게 동작하는지
애니메이션으로 직접 보여주는 웹사이트가 있으니,
여기를 참고해보자.
문제
1. #ball1 아이디의 애니메이션 타이밍 펑션은 현재 리니어로 설정되어 있다.
2. 이를 큐빅 베지어로 바꿔보자.
3. 설정값은 (0.25, 0.25, 0.75, 0.75)로 설정해보자.
답변
#ball1 {
left: 27%;
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}Use a Bezier Curve to Move a Graphic
베지어 곡선 2
설명
이전에 설명한 바와 같이
이즈아웃(ease-out)으로 설정된 애니메이션은, 시작은 빨랐다가 점점 느려진다.
리니어(linear)로 설정된 애니메이션은, 처음부터 끝까지 같은 속도로 움직인다.
프리코드캠프 화면으로 보면,
파란색 동그라미가 이즈아웃이 설정된 애니메이션이고,
빨간색 동그라미가 리니어로 설정된 애니메이션이다.
아래와 같은 큐빅 베지어 커브로도
이즈아웃 애니메이션과 같은 효과를 만들 수 있다.
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
이전에 살펴본 바와 같이,
글로 이해하기는 조금 어려울 수 있으니,
애니메이션 속도와 시간을 직접 조정하며 이해하는 것이 더 나을 것 같다.
문제
1. #red 아이디의 애니메이션 타이밍 펑션을 cubic-bezier 로 바꿔보자.
2. 큐빅 베지어의 값은: 0, 0, 0.58, 1 로 설정해보자.
답변
#red {
background: red;
left: 27%;
animation-timing-function: cubic-bezier(0,0,0.58,1);
}Make Motion More Natural Using a Bezier Curve
베지어 곡선 3
설명
프리코드캠프 화면을 확인해보면,
애니메이션이 약간 저글링 하는 것과
비슷한 움직임을 보인다는 것을 알 수 있을 것이다.
위에서 비교해 봤던
리니어 혹은 이즈아웃 모두
저글링과 비슷한 효과를 내기에는 역부족이다.
그래서 이번에도 베지어커브를 사용해볼 것이다.
애니메이션 이터레이션 카운트가 인피니트(infinite, 무한)로 설정되어 있다면,
애니메이션 타이밍 펑션도
자동적으로 계속 반복하게 되어 있다.
키프레임은 현재 50% 인 애니메이션 중간으로 설정되어 있기 때문에,
애니메이션이 아래로 움직일 때와
애니메이션이 위로 움직일 때
같은 애니메이션 효과가 나오게 될 수 있는 것이다.
이전에 살펴본 바와 같이,
글로 이해하기는 조금 어려울 수 있으니,
애니메이션 속도와 시간을 직접 조정하며 이해하는 것이 더 나을 것 같다.
문제
1. #green 아이디에 애니메이션 타이밍 펑션을 수정해보자.
2. 큐빅베지어의 값을 0.311, 0.441, 0.444, 1.649 으로 바꿔보자.
답변
#green {
background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}시각 디자인을 끝마치며...
생각보다 어려운 내용이 많았다.
특히,
색상이 중요한 줄은 알았지만
색상에 대해서만 해도 정보가 이렇게 많을 줄은 몰랐다.
빨리 빨리 끝내고,
자바스크립트 쪽으로 넘어가고 싶은데,
아직 웹디자인만 해도
두 달 넘는 분량이 남았다.
지치지 않기 위해
매일 하나씩만 꾸준히 끝내보자.
Applied Accessibility로 가기
'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글
| 1-6 CSS 플렉스 박스 - CSS Flexbox (0) | 2020.08.17 |
|---|---|
| 1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles (0) | 2020.07.24 |
| 1-4 접근성 - Applied Accessibility (0) | 2020.07.21 |
| 1-2 CSS (0) | 2020.05.09 |
| 1-1 HTML (0) | 2020.03.31 |
