웹 표준, CSS의 네이밍 방법론과 아웃라인 배치, 스타일,초기화 적용방식 및 웹 폰트(Web Font)

Minllagher·2021년 3월 17일

CSS html 웹 접근성

HTML / CSS

목록 보기

2/10

2020-07-14

CSS

1. 웹 표준 개발 단계

초안 -> 작업 초안 -> 권고 후보 -> 최종 권고안 -> 권고안

2. 네이밍 방법

아이디 사용법(Unique) : 폼에서 많이 사용, 한 개의 아이디는 단 한번만 사용 가능하다.(중복 불가)
클래스 사용법(중복, 복수적 사용가능) : div에서 많이 사용한다.
좋지 못한 네이밍 ex> box1, box2 직관적이지 못한 비효율적인 네이밍 기법..

다양한 네이밍 기법

기법	특징	ex
pascal case(PC)	단어의 첫 글자는 무조건 대문자로, 공백 x	MainContents
Camel case(CC)	첫 번째 단어는 소문자 두 번째 단어는 대문자로	mainContents
상수표기법	상수 일 경우에 사용, 문자를 모두 대문자로 적는다	NUMBER
kebab case(KC)	단어와 단어를( - ) 으로 연결한다.	main-contents
언더스코어(스네이크)	언더스코어(_) 로 연결한다.	main_contents

3. CSS방법론

상황이나 프로젝트에 맞춰서 유동적으로 사용한다.

SMACSS (Scalable & Modular Architecture for CSS)
OOCSS (Object Oriented CSS)
BEM (Block Element Modifier)

4. 레이아웃 배치 방법

Float: 대부분의 회사들에서 사용하고 잇는 방식, 원래 레이아웃 용도로 개발된 것이 아님. 따라서 버그가 많다. 컬럼형식을 레이아웃하려면 그루핑을 잘해야함

position: 움직이지 않아야 하는 곳 또는 부모가 움직일때 따라서 움직여야 하는 요소들에 사용(좌표값으로 모두 배치하여 사용) 레이아웃을 배치하기에는 가장 비효율적인 방식.

flex: float배치와 비슷한 방식으로 개발한 아웃라인 배치방식이다. 1차원 레이아웃에 적합하다(Either 가로 or 세로) 따라서 2차원을 배치하려면 가로그룹과 세로그룹을 각각 그룹핑해 줘야 한다.

Grid: IE11에서는 일부만 지원하는 것이 단점이다. 2차원 배치를 쉽게할 수 있다.

컨텐츠 블록만 만들고, 메인영역의 템플릿에 배치위치만 바꾸어 주면 된다.

->위치 바꾸기 쉬움. 반응형 페이지에 아주 적합하다.

5. CSS 적용방식

external(외부 스타일시트 방식) : css파일 한개는 여러 개의 html과 연결 될 수 있다. 캐시에 저장되어 있기 때문에, 캐시가 있다면 서버에 다시 요청 할 필요가 없게 된다. 따라서 퍼포먼스가 좋고 합리적이다. 그러나 캐시를 지우지 않고 사용 할 경우 업데이트 된다면 페이지 스타일 최신화가 어려울 수도 있다는 단점이 있다.
embedded(internal) : 페이지 head영역에 직접적으로 기입하여 적용하는 방식이다. 다른 종류의 html파일이어도 같은 css를 사용하는 경우가 있는데, 이러한 경우에는 같은 내용을 반복적으로 가져와야 한다는 단점이 있다.
inline : 꼭 필요한 경우나 환경이 아니면 사용하지 않는 것이 좋은 비효율적인 방식이다.

6. Normalize 프로젝트

normalize.css파일을 적용시킨다. 브라우저 파편화 때문에 발생할 수 있는 여러 레이아웃 이슈들을 방지하기 위해서 집단으로, 사전에 문제를 차단하기 위한 css 초기화 파일을 제작.

모던브라우저들은 많이 평준화 되었기 때문에, 문제가 덜하고 초기화 파일 커스터마이징을 위해서 쓰지 않는 사람들도 있다.

7.font-size

body에서 기본값은 16px을 갖는다.

<html>영역에서 font-size:10px, <body>영역에서는 font-size:1.6rem으로 지정.

단위 ( em, rem, %, px, vw, vh...)
- em :상속 이슈가 있다. 부모요소로 부터 영향을 받는다.
- rem: em의 상속이슈를 방지하기 위해서 나온 단위, Root요소부터로만 상속을 받게 된다.
  
  Rem to Px : rem으로 디자인 작업을 하고 배포시에 px로 변환해주는 도구이다. 이렇게 하므로써 rem으로 작업을 하여도 구형 브라우저에서 문제 없이 렌더링되게 해준다.

웹 폰트(Web Font)

웹 폰트란?

: 기존에는 운영체제마다 폰트가 달랐기 때문에, 같은 웹 페이지가 다른 디자인으로 렌더링 되는 경우가 많았다. 그것을 없애기 위해서 웹에서 폰트로 텍스트를 표시하는 대신 아예 이미지로 대체하여 게시하였다. 그러나 이는 화면의 축소/확대와 밀도 등에 따라서 노이즈의 문제가 발생한다. 노이즈 이슈를 해결하기 위해서는 같은내용의 여러 이미지가 필요하였다. 벡터 형식의 파일은 이러한 문제에서 자유롭기 때문에 모두를 해결할 수 있는 수단인 웹폰트가 나오게 되었다.

웹폰트는 CDN(외부서버에 있는 컨텐츠를 가져다 사용하는 것)으로 외부 서버에 문제가 생긴다면 내 페이지에도 문제가 생길 수 있다.

웹 폰트 선언
```
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
```
css의 최상단에 @import를 이용하여 url을 선언한다. 위의 url에는 사용하기로 한 폰트인 스포카 한 산스 폰트의 정보가 담겨있다.

해당 링크로 이동한다. 저작권 정보 밑에 @font-face로 시작하는 여러 코드들이 있다.

모두 같은 font-family값을 가지고 있다. (Spoqa Han Sans)

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@01ff0283e4f36e159ffbf744b36e16ef742da6d8/Subset/SpoqaHanSans/SpoqaHanSansBold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@01ff0283e4f36e159ffbf744b36e16ef742da6d8/Subset/SpoqaHanSans/SpoqaHanSansBold.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@01ff0283e4f36e159ffbf744b36e16ef742da6d8/Subset/SpoqaHanSans/SpoqaHanSansBold.ttf') format('truetype');
}

해당 코드를 살펴보자. font-family에는 font의 이름이 담겨있다.

font-weight으로 글씨의 두께를 조절 해 준다. 원하는 weight값을 적용하여 css문서 내부에 아래처럼 입력시켜주면 사용이 가능하다.

body{
  font-size:1.6rem; 
  background-color: #ffF;
  color:#181818;
  margin:5px;
  font-family: 'Spoqa Han Sans';
  font-weight:400;
}

src:local(' ~~~')은 로컬기기에 해당 폰트가 있을경우 사용하도록 하는 코드이다.

아래의 url은 우선순위로써, 문제가 발생할경우 차례대로 아래의 폰트를 적용하도록 하는 코드이다.

Minllagher

Frontend Developer

이전 포스트

Git과 Git Bash 기초 명령어, visual studio code와 github의 연동, HTML(head태그 내부 태그들의 의미 파악

다음 포스트