3. Responsive Web Design - Applied Visual Design

freecodecamp 리뷰 3번째 글입니다. 앞에서 HTML, CSS의 아주 기초적인 부분들만 배웠는데 여기 부터는 조금 더 어려운 내용을 다루고 있습니다. 52개 subjects로 Responsive Web Design Course에서 가장 많은 양을 차지합니다. 그러나, 다 글 읽고 바로 적용해보면 되는 문제라 시스템에 익숙해지면 금방 하실 수 있습니다.

• Create Visual Balance Using the text-align Property
  • text의 위치를 정해주는 text-align property에 대한 내용입니다. left, center, right, justify 4가지를 갖는데 jusify는 특이하게 행 전체에 균등하게 글자를 배분합니다. 워드를 하다 보면 글씨가 이상하게 끝까지 차지하는 방식으로 배열될 때를 생각하시면 됩니다. justify는 (인쇄되는 텍스트의) 행의 끝을 나란히 맞추다. 라는 뜻을 갖고 있는데 css에서 자주 쓰이는 뜻이므로 기억해두시길 바랍니다.
• 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
  • 문단의 일부만 bold로 만들기 위해서는 해당 부위를 span으로 감싸고 span에 font-weight: bold를 주는 방식을 사용했는데 <strong> tag를 사용하면 원하는 부위를 바로 bold로 만들 수 있습니다.
• Use the u Tag to Underline Text
  • 위와 같은 방식으로 text-decoration: underline 과 span을 함께 사용하는 대신에 <u> tag를 사용하면 해당 부분에 밑줄이 그어집니다.
• Use the em Tag to Italicize Text
  • font-style: italic 과 span 대신에 <em> tag를 사용하여 글자를 기울일 수 있습니다. <i> tag로도 글자를 기울일 수 있으나, <i> tag에 class를 넣어 icon으로 만드는 것이 보편화 되어 <em> 사용을 추천드립니다.
• Use the s Tag to Strikethrough Text
  • text-decoration: line-through 대신 <s> tag를 사용하여 글자 중간에 선을 그을 수 있습니다.
• Create a Horizontal Line Using the hr Element
  • <hr>로 수평 구분 선을 넣을 수 있습니다. 참고로 hr은 horizontal rule의 줄임말 입니다.
• Adjust the background-color Property of Text
  • rgba에 대하여 다루고 있습니다. a값은 투명도를 정하는 부분이라, 흔히 opacity와 같은 것으로 생각할 수 있으나, 이 2가지는 결정적인 차이점이 있습니다. 바로 opacity값은 상속이 되고 rgba는 상속이 되지 않는 다는 점에서 그러합니다. 꼭 기억하고 계시길 바랍니다. 의도대로 css 값을 변경하지 못하는 경우에 해당 element의 css가 문제가 아니라 parent의 css값이 문제가 될 수 있으니 이러한 상황을 염두에 두시길 바랍니다.
• Adjust the Size of a Header Versus a Paragraph Tag
  • 앞서 언급했듯이 heading은 제일 큰 주제부터 h1을 사용하고 글씨 크기는 따로 변경하시는게 좋습니다. 글씨 크기가 원하는 것이라고 할지라도 h1보다 h2, h3를 먼저 쓰는 것은 일반적으로 권장되지 않습니다.
• Add a box-shadow to a Card-like Element
  • box-shadow 문서 참고 바랍니다. box-shadow에 여러 값이 들어가기 때문에 주의해서 보시기 바랍니다.
• Decrease the Opacity of an Element
• Use the text-transform Property to Make Text Uppercase
  • JavaScript에도 해당하는 method들이 있지만, css로 하는 것이 편할 수도 있습니다. 또한 capitalize로 맨 앞 글자만 대문자로 만들어 주는 것은 JavaScript에 따로 없으므로 필요 시 사용하시면 됩니다.
• Set the font-size for Multiple Heading Elements
• Set the font-weight for Multiple Heading Elements
  • font-weight는 normal, bold의 값도 들어가지만 100~1000의 숫자도 들어갑니다. normal 400, bold 700입니다.
  • font-family에 대한 글 안에 font-weight에 대한 내용이 있습니다. 링크 참조하시길 바랍니다.
• Set the font-size of Paragraph Text
• Set the line-height of Paragraphs
  • 각 행의 간격을 변화시키기 위해 line-height property를 사용할 수 있습니다.
• Adjust the Hover State of an Anchor Tag
  • hover 시에 글자 색을 바꾸도록 하기 위해 a:hover {} 와 같은 문법을 사용하고 있습니다.
  • :hover 와 같이 :를 붙이는 것을 Pseudo-class라고 합니다. class의 특별한 상태를 나타내거나, 특정한 element를 선택하기 위해 사용됩니다. hover, active, visited, root 등이 자주 쓰입니다. 이 외에도 상당히 많지만, 잘 기억하고 활용하면 구현할 코드 양을 줄이면서 잘 동작하도록 구현할 수 있기 때문에 잘 알아두시길 바랍니다.
  • 의사 요소(pseudo elements)에 대한 글을 참고하시길 바랍니다
• Change an Element's Relative Position
  • css의 큰 장벽중 하나인 position에 대한 내용입니다. static | relative | fixed | absolute | sticky 5가지가 있는데 relative, fixed, absolute는 확실히 알아주시길 바랍니다. 이 중 default값은 static입니다. sticky는 특정한 경우에만 사용되기 때문입니다.
• Move a Relatively Positioned Element with CSS Offsets
  • static 인 경우에는 top, right, left, bottom을 이용하여 위치를 변경할 수 없습니다. relative로 변경하면 비로소 top, left, right, bottom을 이용하여 static에서의 위치 기준으로 위치를 변경할 수 있게 됩니다.
• Lock an Element to its Parent with Absolute Positioning
  • absolute는 가장 가까운 static이 아닌 position값을 가진 element를 기준(자기의 조상 중에)으로 위치를 변경합니다. static이 아닌 position값을 가진 element가 조상 중에 없다면 body를 기준으로 위치를 정하게 되므로 fixed와 같은 곳에 위치하게 됩니다.
• Lock an Element to the Browser Window with Fixed Positioning
  • fixed는 viewport, 즉 화면 어딘가에 고정되도록 하게 합니다. navigation bar 등을 고정시켜 사용하는 경우에 주로 쓰입니다.
• Push Elements Left or Right with the float Property
  • float을 사용하면 element를 좌우로 이동시킬 수 있습니다. 단순하게 이동 시키는 것 뿐만 아니라 img와 글씨가 함께 있는 경우에 img에 float을 주면 글씨가 그림을 감싸게 됩니다.
  • 플로트(float)에 대한 글을 참고하시길 바랍니다
• Change the Position of Overlapping Elements with the z-index Property
  • z-index를 활용하면 3차원 공간으로 browser를 활용할 수 있습니다. z-index가 다른 element는 서로 겹치지 않습니다.
• Center an Element Horizontally Using the margin Property
  • margin: auto는 좌우 중앙으로 block을 배치하기에 좋은 방법입니다.
  • 단, 나중에 배우는 flex를 사용하게 되면 좌우 및 상하 가운데를 맞추는 좋은 방법이 생깁니다. (display: flex; justify-content: center; align-items: center;)를 가운데로 이동시키고 싶은 element의 parent에게 주면 됩니다.
• Learn about Complementary Colors
• 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
• 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
  • background는 자세히 알아두시는게 좋습니다. 색이나 image를 줄수 있고 repeat의 설정 방식에 따라서 image를 반복된 패턴으로 사용하거나 전체를 차지하는 방식으로 하거나 원하는 위치를 보이게 한다거나 하는 일을 할 수 있습니다.
  • 배경(backgorund)에 대한 글을 참고하시길 바랍니다.
• Use the CSS Transform scale Property to Change the Size of an Element
• Use the CSS Transform scale Property to Scale an Element on Hover
  • transform는 CSS 고급 주제에 속합니다. 여기서 다루고 있는 scale, skew 뿐만 아니라, rotate, translate, matrix 등의 함수가 있습니다.
  • 2D Transform에 대한 글을 참고하시길 바랍니다.
• 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
• Create a Graphic Using CSS
• Create a More Complex Shape Using CSS and HTML
  • ::before, ::after 등의 pseudo elements가 나옵니다. 이건 element내의 특정한 부분을 지정하고자 할 때 쓰입니다.
  • 의사 요소(pseudo elements)에 대한 글을 다시 한 번 참고하시길 바랍니다
• Learn How the CSS @keyframes and animation Properties Work
  • css를 이용하여 animation을 설정하는 방법을 배웁니다. 앞의 transform을 활용하여 animation을 만들 수 있습니다.
• Use CSS Animation to Change the Hover State of a Button
• Modify Fill Mode of an Animation
  • animation-fill-mode: forwards 를 주면 animation이 종료될 때의 모습으로 멈추게 됩니다.
  • animation-fill-mode에 대해서는 animation에 대한 글 내부에서 찾아보시길 바랍니다.
• Create Movement Using CSS Animation
  • animation으로 top값을 변경시켜 움직이는 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
  • animation-iteration-count를 이용하여 animation 반복 횟수를 정할 수 있습니다. infinite로 설정하면 무한히 반복합니다.
• Animate Elements at Variable Rates
  • scale을 이용하여 커졌다 작아졌다 하는 animation을 만들고 있습니다.
• Animate Multiple Elements at Variable Rates
  • animation-duration을 이용하여 각 animation이 걸리는 시간에 변화를 주었습니다.
• Change Animation Timing with Keywords
  • animation-timing-function을 이용하여 animation의 가속도를 변화시킵니다. 해당 현상만 보고 이해하기 어려울 수 있으니 여기를 참고 바랍니다.
• Learn How Bezier Curves Work
  • 솔직히 이 부분은 잘 이해할 수 없었습니다. 혹시 추가적인 설명이 필요하시다면 여기를 참고 바랍니다.
• Use a Bezier Curve to Move a Graphic
• Make Motion More Natural Using a Bezier Curve

앞의 두 개의 Course와는 달리 심화된 내용도 나오므로 너무 어렵다 싶으면 적당히 이해만 하고 넘어가시고 나중에 필요할 때 깊이 파서 보시는 것도 좋은 방법입니다.