CSS 기초

CSS 란?

CSS는 쉽게 말해 **사용자 경험(UX)**을 위한 디자인이다.

1. 적당한 위치에 콘텐츠 배치 (레이아웃)
2. 텍스트 강조와 같은 최소한의 타이포그래피(조판, typography)
3. 최소한의 접근성 (예를 들어 색상)

 

UX 의 중요성. 리디자인(왼쪽부터) 예시

UI: 적당한 위치에 콘텐츠 배치 (레이아웃). 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없습니다.

 

 

잠깐, 프론트엔드 개발자 소양이란...?

• 화면 구성을 할 줄 아는 능력 (레이아웃)

• 보기 좋은 화면을 만들 줄 아는 능력 (타이포그래피, 색상)

• 정렬이 어긋나거나 배색이 좋지 않음을 인지할 수 있는 감각

• 사용자가 사용하기 편한 앱이 무엇인지, 왜 편하게 느끼는지에 대한 이유를 분석해본 경험

원문: medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525

 

CSS 구성

자주 쓰는 속성 찾아보기

• 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요? text-align
• 글자 색을 바꾸기 위한 속성은 무엇인가요? color
• 배경 색을 바꾸기 위한 속성은 무엇인가요? background-color
• background 속성과 background-color 속성은 어떻게 다른가요?
  
  • background-color : 해당 요소의 배경색을 지정한다.
  • background : 색상, 이미지 또는 배경 이미지 속성을 한 줄에 해결한다.

background: #ffffff url("img_tree.png") no-repeat right top;

• pixel, em, rem 단의 차이는 무엇인가요?  https://mber.tistory.com/48

 

 

 

기본적인 셀렉터(selector)

 

모든 h4에 스타일 적용

h4 {
  color: red;
}

특정 h4에 스타일 적용: id를 이용. CSS에는 #기호를 이용하여 id 선택.

<h4 id="navigation-title">This is the navigation section.</h4>

 

#navigation-title {
  color: red;
}

class로 스타일 분류하여 적용.

id는 문서 내에 단 하나의 엘리먼트에만 적용할 수 있는 유일한 이름이어야 하기 때문에

class로 동일한 스타일을 목적이 동일한 여러 엘리먼트에 적용할 수 있습니다.

이 때에는, #이 아닌 .을 이용해 선택해줄 수 있습니다.

 

<!-- 잘못된 예제 -->
<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

<!-- 바른 예제 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}

여러 개의 class를 하나의 엘리먼트에 적용하기

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

정리

class	id
.으로 선택	#으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음	목적에 맞게 자유롭게 이름 붙일 수 있음
동일한 값을 갖는 엘리먼트 많음	문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
엘리먼트가 여러 값을 가질 수 있음	엘리먼트 단 하나의 값을 가짐
스타일의 분류(classification)에 사용	특정 엘리먼트를 이름 붙이는 데 사용

단, id와 class를 동시에 사용하면 매번 HTML에서 이를 확인해야 하기 때문에 class만 사용하는

Block-Element-Modifier(BEM) 기법을 사용하는 것이 효율적이다. BEM이란? https://webclub.tistory.com/263

 

텍스트 꾸미기

색상: 글자는 color 속성을 사용한다. HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상 이름을 사용

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

 

 

글꼴: 글꼴은 font-family를 사용한다.

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

여러 글꼴을 쉼표로 구분하여 적어 순서대로 fallback(표현하고 싶은 글꼴이 없을 시에 사용하는 대비책) 할 수 있다.

 

다양한 글꼴을 사용하려면? fonts.google.com/

크기: font-size를 사용한다.

.title {
  font-size: 24px;
}

정렬

가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.

세로로 정렬할 경우에는 문제가 조금 복잡합니다. 보통 vertical-align을 생각하기 쉽지만, 이는 부모 엘리먼트의 종류를 특정해야 합니다. (부모 엘리먼트가 display: table-cell 일 경우에만 사용 가능) 결국 세로 정렬이란 것은 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에 발생하는 것인데, 이는 박스에 대한 이해가 선행됩니다. 이후 배우게 될 박스 모델 및 레이아웃에서 이 문제를 조금 더 자세히 다뤄보겠습니다.

기타 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

알아야 할 몇가지 단위

- 절대 단위: px, pt 등

- 상대 단위: %, em, rem, ch, vw, vh 등

 

 

• 절대적이고 확실한 크기로 정하고 싶을 때
  • px(픽셀). px은 접근성에 불리하다. CSS를 통해 글꼴 크기가 고정되어 작은 글씨를 보기 힘든 사용자가 브라우저 기본 글꼴 크기를 더 크게 설정해도 무시되는 단점이 있다.  px은 모바일 기기와 같이 작은 화면이면서 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력될 수 있다. px은 화면 크기가 절대적인 경우에 (예를 들어 출력용) 유리하다.
    
• 보통의 경우
  • rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.) -> 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다.

• 반응형 웹(responsive web)에서 기준점을 만들 때

  • 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이 때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다. 이 때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해볼 수 있습니다.

• 화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우
  • vw, vh를 사용하세요. 웹사이트의 보여지는 영역을 Viewport라고 하며, vw, vh는 viewport width 및 height를 의미합니다. 간혹 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 본 적이 있을겁니다. 이는 100vw, 100vh를 사용해 구현한 것입니다.
  • 예시 사이트 1

 

 

<center> <font>를 사용하지 말아야 하는 이유

원래 HTML 초창기에는, 스타일을 따로 정의하겠다는 컨셉 자체가 존재하지 않았습니다. 그래서 <center>가운데 정렬</center> 혹은 <font color="#ff0000">빨간 글자</font>와 같은 사용 예도 존재했었죠. 하지만 지금은 더이상 사용해서는 안되는 태그입니다. 이는 앞서 언급했던 관심사 분리 때문입니다. HTML이 설계와 디자인을 둘 다 하게 두지 말고, HTML은 설계만 신경쓰고, CSS는 디자인만 담당하게 합시다.

 

박스 모델

모든 콘텐츠는 고유한 영역이 있습니다.

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

 

Block

Inline

이해가 안된다면 이 곳을 참고하세요. http://www.danielledeveloper.com/inline-vs-block-vs-inline-block-css/

• 줄바꿈이 되는 태그: <h1> <p>
• 줄바꿈이 되지 않는 태그: <span>

박스를 구성하는 요소

border(테두리), padding(안쪽 여백), margin(바깥 여백)

 

border

각 영역이 해당하는 크기를 알기 위해 레이아웃을 만들 때에 그 크기를 시각적으로 확인할 수 있습니다.

p {
  border: 1px solid red;
}

//순서대로 border-width, border-style, border-color

• 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style: dotted
• 테두리를 둥근 모서리로 만들려면 어떤 속성을 사용하면 되나요? border-radius : -% (이외에도 다양함)
• 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? box-shadow: none | x-position y-position blur spread color | inset | initial | inherit

margin

p {
  margin: 10px 20px 30px 40px;
}
//순서대로 top, right, bottom, left

 

값을 두개만 넣으면 top과 bottom이 10px, left 및 right가 20px 입니다. margin: 10px 20x;

값을 하나만 넣으면 모든 방향의 바깥 여백에 적용됩니다. 

margin-top/right/bottom/left 와 같이 방향을 특정한 속성도 존재합니다.

 

padding

안쪽 여백으로 값 순서-방향 은 margin과 동일.  개발자 도구로 확인해보기 바랍니다.

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

넘치는 컨텐츠 처리

기본적으로 박스 크기보다 컨텐츠 크기가 더 큰 경우, 박스 바깥으로 빠져나온다. 이 경우

한정된 박스 크기에 맞게 컨텐츠가 더이상 표시되지 않게 하거나,

박스 안쪽으로 스크롤하여 컨텐츠를 볼 수 있게 만드는 것이 가능합니다.

p {
  height: 40px;
  overflow: auto;
}

overflow-x, overflow-y 를 통해 한 방향으로 스크롤 가능하게 만들 수도 있습니다.

넘치는 컨텐츠를 가리고 싶을 경우 overflow: hidden;

 

박스 크기 측정 기준

박스의 사이즈는, 컨텐츠를 기준으로 하는 content-box 가 Default 입니다.

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

 

각 box의 너비를 컨텐츠 기준으로 하면 가로 또는 세로 길이 조정시 컨텐츠 박스의 길이가 변경되므로 오차가 발생할 수 있습니다.

이 경우, border-box 을 추가하여 300px 이

모든 여백과 테두리를 포함한 크기로 계산되게 합니다.

 

 

* 셀렉터는 HTML의 모든 태그, 모든 영역에 적용하기 위함인데 일부분에 적용하면 혼란을 가중시키기 때문에 모든 페이지에 적용하는 것이 합리적입니다. 

 

 

* {
  box-sizing: border-box;
}

 

  border-box를 권장합니다.

 

 

 

 

 

 

 

 

그래도 이해가 안 간다면 아래 그림을 참고하시기 바랍니다.