[HTML, CSS] 기초 - Achievement Goals 답하기

[HTML, CSS] 기초  Achievement Goals

1. CSS의 사용목적을 이해하고 있다. 

CSS는 웹페이지를 꾸미는 일을 한다. HTML 문서에 CSS 문서를 적용하면 단조로운 웹페이지를 사용목적에 맞게 고칠 수 있다. 웹페이지의 구조와 로직을 HTML과 JS로 구현을 하고 CSS로 스타일링을 하는 것이다. 그런데 CSS는 단순히 웹페이지를 스타일링 하고자 하는 목적으로만 사용되는 것은 아니다. 콘텐츠의 배치와 위치, 텍스트 타이포그래피에 따라 사용자 경험(UX; User Experience)이 달라질 수 있기 때문이다. CSS의 레이아웃과 타이포그래피를 통해 최상의 사용자 경험을 제공할 수 있다. CSS를 적용하여 색약이나 장애인의 웹접근성을 높일수도 있다.

 

2. 프론트엔드 개발자의 기본 소양에 대해  이해할 수 있다.

CSS를 작성해서 간단한 UI(User Interface; 사용자 인터페스)를 만드는 일은 프론트엔드 개발자의 기본 소양이다. 사용자 인터페이스는 컴퓨터 프로그램과 사람이 소통할 수 있도록 만들어진 요소이다. 훌륭한 웹 애플리케이션 기능을 구현했다 할지라도 UI가 없다면 무용지물이다. 기본소양은 레이아웃과 굵은 글씨와 최소한의 타이포그래피이며 플러스알파 소양은 정렬이나 배색에 대한 감각, UX에 대한 철학과 기존 파워앱의 UX를 분석해 보는 것이다.

 

3. CSS의 기본문법과 구조를 이해할 수 있다.

CSS의 기본적인 구조는 선택자 { 속성 : 값  } 이다. HTML은 여러가지 엘리먼트로 구성되어 있다. 일반적으로 태그라고 불리는 것들이다. <div>, <span> 부터 <input>, <img> 등이 그것이다. CSS의 선택자를 통해 HTML의 엘리먼트를 선택하고 속성을 통해 적용할 표현의 종류를 정하고 값으로 적용하는 것이다. 

 

CSS의 기본구조 선택자 { 속성 : 값; 속성 : 값; } 에서 '속성 : 값; 속성 : 값;' 부분을 선언 블록이라고 한다. 선언 블록에서 단일 엘리먼트인 속성 : 값 부분은 선언(declaration)이라고 하고 ';' 는 선언 구분자라고 한다. 

 

4. 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.

CSS를 HTML에 적용하는 방법은 3가지 이다.  InLine(인라인), Internal(내부), Linking(외부) 이다.

 

 

InLine 스타일은 HTML 태그에 스타일(style) 속성을 통해 직접 CSS를 삽입하는 방법이다.

<p style="color: blue">Lorem ipsum</p>

---

Internal 스타일은 HTML 문서안에 스타일 코드를 넣는 방법이다. HTML 문서안에 <style>과 </style> 사이에 CSS 코드를 작성해서 적용한다.

<style>
  h1 {
    color: blue;
  }
</style>

---

Linking 스타일은 별도의 CSS파일을 작성하고 <link> 태그를 통해서 HTML에 CSS를 연결시켜 적용하는 방법이다.

<link rel="stylesheet" href="style.css">

link 태그를 사용했다. rel은 relation(관계)을 뜻하며 href는 hypertext reference 를 뜻한다. 즉 HTML 문서에 스타일시트 문서를 연결하는데 참조하는 파일명은 style.css라는 의미이다. 만일 HTML 문서와 CSS 문서가 디렉토리상에 서로 다른 위치에 있다면 적절한 경로를 써줘야 한다.

 

그런데 주로 사용되는 방법은 3번째인 Linking 방법이다. 직접적으로 HTML안에서 CSS 정의하는 것을 권장하지 않는 이유는 HTML과 CSS를 혼재해서 사용하면 HTML과 CSS를 함께 관리해야 하기 때문에 수정작업이 복잡해진다. 그렇기 때문에 구조, 로직, 스타일이라는 웹페이지의 3가지 요소를 따로 분리하였고 그것들을 각각의 파일에 구분해놓았다. 그래서 스타일링을 수정하려면 CSS만 수정하면 되기 때문에 훨씬 직관적이고 효율적으로 작업이 가능하다.

 

관심사 분리는 HTML파일에서는 웹페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현한 것을 말한다. 물론 굳이 파일을 구분하지 않아도 될만큼 적은 CSS를 사용하는 경우도 있고 그런 경우는 특수하지만 인라인이나 내부 스타일 시트 방법을 사용할 수 있다.

 

위의 3가지 방법이 혼재되어 사용된 경우 적용되는 순위는 다음과 같다.

인라인 스타일(HTML내부에 위치)>내/외부 스타일(HTML 문서의 head 요소 내부에 위치)>웹 브라우저 기본 스타일

 

5. id 및 class와 관련된 selector 규칙을 이해할 수 있다.

CSS를 적용할 때 선택자(selector)를 사용하여 적용할 영역을 구분할 수 있다. id를 통해서는 개별요소 한가지를 지정할 수 있으며 class를 통해서는 HTML요소를 분류하고 그 분류에 속한 다수의 요소에 CSS를 한꺼번에 적용할 수 있다.

 

class 선택자를 통해 여러 개의 요소에 한 가지의 스타일링을 적용할 수 있는 것처럼 반대로 여러의 class를 하나의 요소에 적용할 수 있다. 사용자의 액션과 UI의 특성에 따른 반응형 웹페이지를 만드는 경우 한 가지 요소에 조건에 따라 적용할 스타일링 달라질 수 있다. 이런 경우 공백을 통해 적용하려는 class의 이름을 분리한다.

 

6. CSS를 이용해 텍스트를 꾸밀 수 있다.

color 속성을 통해 텍스트의 색상을 바꿀 수 있다. font-family는 글꼴 속성인데, 글꼴을 지정하였다 할지라도 사용자의 컴퓨터에 지정해준 글꼴 없는 경우가 있다. 그런 경우를 대비해서 적용할 다수의 fallback 글꼴을 지정해놓을 수 있다.

 

사용자 컴퓨터 글꼴이 미리 저장되어 있는지 여부에 상관없이 미리 정해놓은 글꼴을 웹에서 가져와서 쉽게 적용할 수 있는 웹폰트 기술도 있다. HTML의 link 태그를 이용하여 간단하게 embed할 수 있다.

 

<link href="https://fonts.googleapis.com/css2?family=Gugi&dispaly=swap" 
rel="stylesheet">

 

7. CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.

font-size 속성으로 글자의 크기를 변경할 수 있다. 글자크기 단위와 관련하여 절대 단위와 상대 단위가 있다. 절대단위(px, pt), 상대단위(%, em, rem, ch, vw, vh) 기기나 브라우저 사이즈에 영향을 받지 않는 절대 크기를 정하는 경우 절대단위를 사용한다. 하지만 px는 모바일 기기와 같은 작고 고해상도의 화면에는 적합하지 않다. 고해상도에는 1px이 모니터의 한 점보다 크게 취급되기 때문에 뚜렷하지 않은 이미지로 출력된다.

 

상대단위에서는 일반적으로 rem이 추천된다. root를 기준으로 하는 em이기 때문에 브라우저의 기본 글자 크기는 1rem이며 두배는 2rem이다. 작게 하려면 0.5rem 으로 조절해서 사용할 수 있다. em는 부모 요소에 따라 상대적으로 크기가 변경되기 때문에 계산이 어렵다. 그리고 CSS는 스타일만 정의하고 실제 구조는 HTML 요소 트리가 결정하기 때문에 CSS에서 상위 요소가 무엇이고 크 폰트 사이즈가 얼마인지 파악하기 쉽지 않다. 이런 이유로 em 보다는 rem의 사용이 추천된다. root 요소의 폰트 사이즈는 웹 브라우저의 기본 폰트 사이즈가 결정하며 대부분의 웹브라우저는 16px로 정해놓고 있다. (참고: 웹브라우저의 기본 폰트 사이즈가 16px인 이유)

 

반응형 웹은 디바이스의 화면 크기에 따라 CSS를 달리 적용한다. 여기서 디바이스의 크기를 나누는 기준은 보통 px이다. 아이폰 12프로 맥스의 너비는 414px이다. 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각하면 좋다.

 

vw 혹은 vh는 화면 너비나 높이에 다른 상대적인 크기가 중요한 경우 사용된다. 웹사이트의 보여지는 영역을 viewport라고 하며 vw는 viewport width, vh는 viewport heigth를 의미한다. 100vw, 100vh는 화면을 가득 채우며 딱 떨어지게 스크롤이 되는 사이트를 구현한다. 

 

기타 스타일링에 필요한 속성들: 굵기(font-weight), 밑줄/가로줄(text-decoration), 자간(letter-spacing), 행간(line-height)

 

정렬: 가로 정렬은 text-allign 속성을 이용하며 center, left, rigtht, justify(양쪽 정렬) 값을 사용한다.

세로 정렬은 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자의 높이보다 큰 경우에는 적용하며 line-height 를 통해 박스 크기에 맞추서 적용할 수 있다.

 

CSS 단위에 관한 추가 자료는 여기!!

 

8. CSS 박스 모델을 이해할 수 있다.

 

9 .박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.

박스 모델에서 바깥/안쪽 여백 등을 고려하지 않고 박스의 크기를 디자인하게 되면 처음에 생각한 레이아웃에서 벗어나는 경우가 있다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 한다. 그렇기 때문에 CSS 디자인 초기에 흔히 박스 계산법을 여백과 테두리 두께 포함한 방식으로 설정한다.

* {
  box-sizing: border-box;
}

'*' 선택자는 모든 요소를 선택하는 것이다. 이렇게 모든 요소에 border-box를 적용하며 모든 박스에서 여백과 테두릴 포함한 크기로 계산이 된다.  border-box 외에 content-box는 CSS 크기 조정시에 content를 기준으로 박스의 크기를 계산하는 것이다. 일반적으로 border-box를 권장한다.