2. Responsive Web Design - Basic CSS

f

Basic HTML and HTML5 에 이은 2번째 글입니다. 저번에는 웹 페이지의 골격을 이루는 HTML에 대한 기초를 배웠다면, 이번에는 HTML을 다양한 방식으로 보여주기 위한 수단인 CSS를 배웁니다. 이전 글과 마찬가지로 일단 순서대로 모두 하신 후에 이 글을 읽으면서 내용을 복습하면 되겠습니다. 각 제목을 보면서 어떤 내용이었는지 되새겨 보신 후에 제목 아래에 있는 포인트 들을 이해하고 넘어가시면 됩니다.

• Change the Color of Text
  • tag 내에 style="property: value" 이러한 방식으로 style attribute를 넣을 수 있고, 이렇게 넣은 style을 inline style이라고 합니다.
  • css에서 color라고 하는 것은 항상 글씨의 색깔입니다. 배경색은 background-color로 따로 있습니다.
• Use CSS Selectors to Style Elements
  • inline style(tag 내에 style="property: value"와 같은 방식으로 style을 적용하는 것) 외에도 html 문서 내에 <style> </style> 내에 style을 넣을 수 있습니다.
• Use a CSS Class to Style an Element
  • .className 이란 방식으로 class마다 동일한 css 값을 줄 수 있습니다. 해당 tag에 class attiribute에 class이름을 넣어주면 class가 적용됩니다.(정확히는 html attribute가 아니라 다른 방식으로 동작한다고 하나 일단 element 이름 옆에 나오는 값이란 의미에서 attribute라고 했습니다)
• Style Multiple Elements with a CSS Class
  • 여러 element에 동일한 class를 주어 같은 css값을 줄 수 있습니다.
  • 또한, 한 element에 여러 class를 줄 수 있습니다. class="class1 class2 class3" 과 같이 띄어쓰기로 연결하여 전달하면 해당 class의 모든 css property가 적용되며 같은 property가 있는 경우 뒤에 오는 class의 값으로 설정됩니다.
• Change the Font Size of an Element
• Set the Font Family of an Element
• Import a Google Font
  • <link href="..." rel="..." type="..."> 을 보실수 있는데 이 부분을 잘 알아두시는게 좋습니다. html 파일 내에 이와 같은 link를 넣는 것으로 외부 리소스를 활용할 수 있습니다. font 뿐만 아니라 bootstrap과 같은 css 라이브러리, fontawesome과 같은 아이콘 라이브러리도 이와 같은 형식으로 link element로 가져와 쓸 수 있습니다.
• Specify How Fonts Should Degrade
  • font-family에 여러 폰트를 주어 폰트가 동작하지 않는 경우 다음 폰트를 적용하는 방식입니다. 이와 같은 방식은 font 뿐만 아니라 url을 이용해 무언가 받아오는 element에서도 적용됩니다.
• Size Your Images
  • img의 크기를 정해주는 방식을 알려줍니다. width를 따로 정하지 않는 경우에는 원래 이미지가 가진 크기를 갖게 됩니다.
  • px 뿐만 아니라 %를 사용하여 부모 element의 크기에 상대적인 크기로 설정 가능합니다.(나중에 배우겠지만, vh, vw 등으로 출력 대상인 display 크기나 브라우저의 크기에 상대적인 크기로 설정도 가능합니다)
• Add Borders Around Your Elements
  • border에 대해서 나왔는데 이 부분에서 부족한 부분이 box model에 대한 설명입니다. box model을 이해해야 border가 어디에 그려지는지 잘 이해할 수 있습니다. 자세한 내용은 링크 참조 바랍니다.
    • 이 모델을 잘 이해하면 왜 width가 동일하더라도 element 전체의 크기가 달라지는지 이해하실 수 있습니다. 그 이유는 padding과 border의 크기가 달라지면 전체 element가 차지하는 영역의 크기도 달라지기 때문입니다.
  • 추가적으로 box-sizing property에 대해서도 아시야 합니다.
    • 요약하자면 위의 box model은 content-box인데, 여기서 width, height는 content의 크기만을 의미합니다. padding 부분은 추가적인 부분이 됩니다. border-box에서는 border-padding-content 3개 모두 합쳐서 width가 됩니다. 따라서 실제 content의 크기는 width에서 border와 padding을 제외한 크기 만큼이 됩니다. padding, border와 상관 없이 element의 크기를 고정시키고 싶으실 때 border-box를 사용하실 수 있습니다.
• Add Rounded Corners with border-radius
• Make Circular Images with a border-radius
  • border-radius를 꼭 px로 할 필요가 없습니다. 둥근 이미지를 만들고 싶을때는 50%이상을 넣어주시면 됩니다. 그 이상의 값을 넣어도 동일하게 원형이 됩니다.
• Give a Background Color to a div Element
• Set the id of an Element
  • id 지정은 굉장히 유용합니다. HTML 편에서 얘기했던 <a href="#id"></a> 꼴로 문서 내의 위치를 찾아갈 때도 사용할 수 있고, JavaScript를 배우면서 배우게 될 doument method를 통해 해당 element에 쉽게 접근할 수 있게 만들어주기 때문입니다.
• Use an id Attribute to Style an Element
  • css에서 id는 '#'을 앞에 붙여야 하고 class는 '.'을 앞에 붙여야 합니다. element의 경우에는 그냥 쓰면 됩니다.
• Adjust the Padding of an Element
  • padding은 content(글, 그림 등)를 감싸는 빈 공간을 의미합니다. 단, 이 부분에는 background 색이나 그림이 들어갑니다.
• Adjust the Margin of an Element
  • margin은 border 밖의 빈 공간을 의미합니다. 단, 이 부분에는 background 색이나 그림이 들어가지 않습니다.
  • 본문에도 나오지만 한 번 더 업급하면, margin이 겹치는 부분에서는 큰 margin 값만 적용됩니다. 두 margin 값이 + 되는게 아니르 두 margin값의 max 값 만큼만 margin이 생깁니다.
• Add a Negative Margin to an Element
  • margin을 -값으로 주면 크기가 커집니다. 그런데, 굳이 -값을 써서 크기를 키우는 일을 해야되는 경우는 드물거 같습니다.
• Add Different Padding to Each Side of an Element
  • padding값을 4방향 모두 다르게 줄 수 있습니다. top, left, b padding, border, margin 3개 모두 다 다르게 주는게 가능합니다.
• Add Different Margins to Each Side of an Element
• Use Clockwise Notation to Specify the Padding of an Element
  • 값을 1, 2, 3, 4개 줄 수 있는데 각각 다릅니다. 링크를 참조하여 1개이면 top, left, bottom, right 모두, 2개인 경우에는 top/bottom left/right의 값을 주게 됩니다. 4개인 경우에는 순서대로 값을 줍니다. 자세한 사항은 링크 참조 바랍니다.
• Use Clockwise Notation to Specify the Margin of an Element
• Use Attribute Selectors to Style Elements
  • [attributeName='attributeValue'] { } 와 같은 형식으로 특정 attribute 값인 element에 접근이 가능합니다.
• Understand Absolute versus Relative Units
  • absolute length: cm, mm, in, px, pt, pc
  • relative length: em, ex, ch, rem, vw, vh, vmin, vmax, %
• Style the HTML Body Element
• Inherit Styles from the Body Element
  • 이 페이지를 보면 body element만 style을 상속해주는 것처럼 보이지만, 실제로는 그렇지 않습니다. css property마다 inherit 정책이 각각 다릅니다.
  • 다양한 값들이 상속되지만 묶어지는 것들을 기준으로 얘기하자면 text content와 관련 된 font, color, text-align, text-indent, line-height와 table과 관련 된 border-collapse, border-spacing, list와 관련 된 list-style 등이 있습니다.
  • css inherit 정책을 다 외우기는 힘듭니다. 코딩을 하다가 어떤 속성이 전체에 적용되어 문제가 생기는 경우에 inherit 속성 리스트를 참고하시길 바랍니다.
• Prioritize One Style Over Another
  • 동일한 css property가 적용될 때 어떤게 먼저 적용되는지 규칙(CSS Specificity)에 대한 내용입니다.
  • 원 글에는 자세한 내용이 나오지 않으므로 스타일 적용의 우선 순위를 읽어보시길 바랍니다.
• Override Styles in Subsequent CSS
  • 앞서 얘기한 여러 클래스 적용에 대한 내용입니다. class2와 class1에 겹치는 property가 있으면 뒤에 있는 class2의 value가 적용됩니다.
• Override Class Declarations by Styling ID Attributes
• Override Class Declarations with Inline Styles
  • element < class < id < inline 순으로 specificity가 높다는 것을 설명하고 있습니다.
• Override All Other Styles by using Important
  • CSS Specificity를 무시할 수 있는 키워드입니다.
• Use Hex Code for Specific Colors
  • css color를 고를 때 사용하면 좋은 링크입니다.
  • ref. https://www.w3schools.com/colors/colors_picker.asp
• Use Hex Code to Mix Colors
• Use Abbreviated Hex Code
  • #000000 => #000
• Use RGB values to Color Elements
• Use RGB to Mix Colors
• Use CSS Variables to change several elements at once
• Create a custom CSS Variable
  • 변수 선언은 --name: value의 꼴로 원하는 위치에 넣으시면 selecting되는 element의 local scope으로 동작하도록 되어 있습니다.
• Use a custom CSS Variable
  • var(--name) 을 property의 value위치에 넣으면 됩니다.
• Attach a Fallback value to a CSS Variable
  • font-family에 2개의 font-family를 넣은 것과 비슷한 방식입니다. 해당 변수가 scope내에 없는 경우 뒤에 있는 값을 사용합니다.
  • var(--name, fallbackValue)와 같은 형식으로 쓰면 scope내에 --name이 없는 경우 fallbackValue를 사용합니다.
• Improve Compatibility with Browser Fallbacks
• Inherit CSS Variables
  • global scope로 선언 하시고 싶으시다면 :root { } 내부에 변수를 선언하면 됩니다. css에 대한 변수 선언에 대해 알아보시길 바랍니다.
• Change a variable for a specific area
  • 동일 variable을 root가 아닌 local에서 재선언을 하여 값을 덮어 쓸 수 있습니다.
• Use a media query to change a variable
  • media query는 반응형 웹을 만들기 위해 필수적으로 알아둬야 할 내용입니다. Responsive Web Design Principles Chapter에서 자세히 배울 예정입니다.

tcpschool만 사용하다보니 없는 내용이 있어서 w3schools의 내용도 사용했습니다. css에 대한 변수 선언 부분을 w3schools에서 가져왔는데, 영어긴 하지만 많이 쓰이는 사이트이고 참고할만한 자료가 많아 종종 사용할 예정입니다. 일단 tcpschool에서 먼저 찾아보고 없는 경우에는 w3schools를 참고 링크로 올리겠습니다.