Week 1-2 : HTML & CSS 로 확인하기

TIL List

• CSS의 목적

• CSS의 기본 문법 및 구조

1) CSS의 사용 목적

전 TIL 에서 CSS 는 스타일링이라고 말했다.

CSS를 사용하는 목적은 다음과 같다.

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

어떤 개발자든 간단한 UI를 만들 줄 아는 것은 기본적인 소양이다.

즉 프론트엔드, 백엔드 모두 CSS를 다루는 기본적인 방법은 알고 있어야 한다.

2) CSS 파일을 HTML 에 적용시키는 방법

html 의 head 부분에 다음과 같이 입력하면 된다.

<link rel="stylesheet" href="index.css" />

중요한 것은 href= 에서 정확한 css 파일명을 적어야 한다.

만약, index.css 라고 저장된 파일인데 입력을 inde.css 로 하면 원하는 css 파일을 불러오지 못한다.

만약, 두 개의 css 파일을 적용시키고 싶으면 다음과 같이 입력하면 된다.

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />

그냥 두 개의 CSS를 가져오는 태그를 입력하면 두 CSS 모두 한 HTML 에 적용된다.

3) CSS의 기본 구조

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #4a4a4a;
  }
  
  // body 는 셀렉터
  // {} 는 선언 블록
  // margin, padding, background, color 는 속성명
  // 0,0,#fff,#4a4a4a 는 속성 값
  // margin: 0;
     padding: 0;
     background: #fff;
     color: #4a4a4a; 
     을 통틀어서 선언이라고 한다.
  // ; 는 세미콜론

중괄호 앞에 등장하는 태그 이름(body)은 셀렉터(selector)라고 부르며, 중괄호에 속성과 값을 적어 스타일을 표현한다. 각 속성과 속성 사이는 반드시 세미콜론(;)으로 구분해야 한다.

❗ 사실, 직접 HTML 태그에 CSS 속성을 추가하는 방법도 있습니다. 그러나, 이는 관심사 분리 측면에서 권장되지 않습니다. HTML이 설계와 디자인을 둘 다 하게 두지 말고, HTML은 설계만 신경쓰고, CSS는 디자인만 신경쓰게 하자는 의도입니다.

4) CSS의 기본 문법

id 활용법

만약, <h4> 라는 태그가 여러 곳에 배치됐을 때 특정 부분의 <h4> 를 CSS 를 통해 스타일링 하고 싶다면 어떻게 해야 할까?

h4 {
  color: red;
}

위와 같이 CSS를 설정하면 모든 곳의 <h4> 에 영향을 주게 된다.

따라서 그 특정 부분의 <h4> 에 id를 지어줘서 그 곳에만 CSS 가 적용될 수 있게 할 수 있다.

//html
<h4 id= "h4-name">what i wanna change h4</h4>

//CSS
#h4-name {
   color: red;
}

CSS에 불러올 때 id는 # 을 통해 구분한다.

class 활용법

이번에는 <li> 태그가 여러 곳에 배치됐을 때 특정 부분의 <li> 를 CSS를 통해 밑줄을 그어주고 싶다면 어떻게 해야 할까?

위 처럼 id 를 사용하면 되지 않을까?

답은 NO 이다.

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

따라서 <li> 와 같이 같은 태그가 반복적으로 선언된 곳에는 적합하지 않다.

이럴때 우리는 class 를 사용하면 된다.

// HTML
<ul>
  <li class="li-name">Home</li>
  <li class="li-name">Mac</li>
  <li class="li-name">iPhone</li>
  <li class="li-name">iPad</li>
</ul>

// CSS
.li-name {
  text-decoration: underline;
}

CSS에 불러올 때 class는 . 을 통해 구분한다.

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

위에 선언된 4가지의 <li> 중 Home 에만 특정 CSS를 적용하려면 어떻게 해야 할까?

// HTML
<ul>
  <li class="li-name selected">Home</li>
  <li class="li-name">Mac</li>
  <li class="li-name">iPhone</li>
  <li class="li-name">iPad</li>
</ul>

// CSS
.li-name {
  text-decoration: underline;
}
.selected {
  font-weight: bold;
  color: #009999;
}

위와 같이 따로 selected 라는 class 를 가진 CSS 를 만들어주고 원하는 속성을 넣는다.

그 뒤, HTML 에서는 공백을 이용해서 class 이름을 분리해주면 된다.

이렇게 하면 하나의 엘리먼트에 여러 개의 class를 적용할 수 있다.

id 와 class 의 차이점 정리

• id

  • #으로 선택
  • 목적에 맞게 자유롭게 이름 붙일 수 있음
  • 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
  • 엘리먼트 단 하나의 값을 가짐
  • 특정 엘리먼트를 이름 붙이는 데 사용

• class

  • .으로 선택
  • 목적에 맞게 자유롭게 이름 붙일 수 있음
  • 동일한 값을 갖는 엘리먼트 많음
  • 엘리먼트가 여러 값을 가질 수 있음
  • 스타일의 분류(classification)에 사용

5) CSS를 활용한 텍스트 꾸미기

1. 글자 색

글자 색상으로는 color 속성을 사용한다.

.red {
   color: ##ff0000;
}   

이 color 속성을 활용해 배경 색상, 혹은 박스 테두리 색상을 적용할 수도 있다.

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

2. 글꼴

글꼴은 font-family 속성을 사용한다.

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

글꼴 이름은 따옴표를 붙여서 사용할 수 있으며, 여러 글꼴을 쉼표로 구분하여 적을 수 있는데 이는 순서대로 fallback(표현하고 싶은 글꼴이 없을 시에 사용하는 대비책)을 위한 글꼴이다.

예를 들어 아이폰에서만 사용 가능한 이모티콘을 갤럭시 사용자에게 보내게 되면 갤럭시 사용자는 해당 이모티콘을 읽을 수 없다.

따라서 만약 해당 이모티콘을 읽지 못하면 다음 속성 값을 읽도록 하게 설정하는 것이라고 생각하면 된다.

3. 글꼴 크기

글꼴 크기는 font-size 속성을 이용한다.

.title {
  font-size: 24px;
}

글꼴 크기를 설정할 때 중요한 것은 단위다. 단위는 두 가지 종류가 있다.

1. 절대 단위 : px, pt 등

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

4. 글꼴의 크기를 사용하는 3가지 상황

만약 당신이 절대적이고 확실한 크기로 정하고 싶을 때는 절대 단위인 px 를 사용하면 된다.

다만, px은 접근성에 불리합니다. 이 말은 곧 CSS를 통해 글꼴 크기는 고정되기 때문에, 작은 글씨를 보기 힘든 사용자가 브라우저 기본 글꼴 크기를 더 크게 설정했다 하더라도 이런 설정이 무시되는 단점이 있습니다. 결과적으로 개발자가 강조하려던 제목(heading) 등이 오히려 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 또한 px은 모바일 기기와 같이 작은 화면이면서 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력될 수 있습니다. px은 화면 크기가 절대적인 경우에 (예를 들어 출력용) 유리합니다.

보통의 경우에는 상대 단위인 rem 을 사용하는 것이 좋다.

root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

만약 반응형 웹에서 기준점을 만들 때 즉, 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹을 만들 때는 상대 단위인 vw, vh 를 사용하는 것이 좋다.

웹사이트의 보여지는 영역을 Viewport라고 하며, vw, vh는 viewport width 및 height를 의미합니다. 간혹 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 본 적이 있을겁니다. 이는 100vw, 100vh를 사용해 구현한 것입니다. (참고로 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

5. 기타 스타일링 및 정렬

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

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

세로로 정렬하는 경우는 추후에 포스팅 하겠다.

6) 시맨틱 태그 (semantic tag)

우리는 전에서 해당 태그에 id 와 class 를 통해 특정 값을 넣어줬다.

<div class="header"> 

<div id="footer">

출처: https://hianna.tistory.com/278 [어제 오늘 내일]

사실 이것은 이전 HTML 방식이라고 볼 수 있다.

지금의 HTML5 에서는 아래처럼 미리 정의된 태그를 사용할 수 있다.

<header>
<footer>

둘의 차이점은 id 와 class 를 통해 특정 값을 넣어주는 것은, 개개인마다 설정하는 값이 다를 수 있다. 예를 들어 header 를 hed, heder 이런 식으로 표기하는 것이다.

이러한 태그를 만약 남이 본다면 어떻게 될까?

아마 제대로 된 의미를 파악하지 못할 수 있다.

따라서 HTML5 부터는 시맨틱 태그 라는 것을 제공해 그 의미를 명확하게 할 수 있게 해줬다.

HTML5 에서 제공하는 시맨틱 태그들은 다음과 같다.

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

출처: https://hianna.tistory.com/278 [어제 오늘 내일]

이 외에도 여러가지 시맨틱 태그들이 존재한다.

물론 위의 시맨틱 태그로 표현이 안되는 것은 id 와 class 로 따로 값을 지정해줄 수 있다.