반응형 웹 페이지 를 위한 개념들과 설정을 알아봅니다. 다양한 아이콘 폰트 와 함께, 애니메이션을 구현하는 Animate.css 와 typewriterjs 등 다양한 부가기능을 정리 합니다

CSS 관련 내용을 잘 정리한 곳으로 w3schools.com 내용을 참고하면 좋습니다. 그리고 CSS 관련 이해를 돕는 동영상으로 추천할 내용은 다음과 같습니다.

1. 코딩하는 남자
2. 생활코딩 CSS 2016
3. 빔캠프 코딩가나다

CSS Setting Basic

Input Style

스타일을 입력하는 방법으로는 1) Internal 입력 방법과 2) Inline 입력 방법이 있습니다.

<style>
/* Internal Style Sheet */
body { color: #333333 }
</style>

<!-- Inline Style Sheet -->
<p> HTML <span style="width:100px; color:white"></p>

CSS 변수의 활용

Internal 작업시 동일한 값을 여러번 적용하는 경우, 변수명 을 활용하면 유지보수 편의성이 높아 집니다. :root{ } 에서 변수명과 값 을 입력하고 var() CSS 함수를 활용하여 변수내 값을 호출 합니다.

:root {
    --main-color: #ffffff;
    --icon-color: #fff;
}

.icon {
    color: var(--icon-color);
}

뷰포트

실제 화면을 표시하는 영역으로, 기기별 설정된 초기 화면 크기 값 입니다. 모바일 기기 에서도 지원 가능한 해상도가 높아지면서, 기기별 정보를 단일한 기준으로 처리하는 뷰포트 설정을 필요로 합니다.

< meta name=”viewport” content=”width-device=width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” >

1. width : 뷰포트의 너비값
2. initial-scale : 초기배율값
3. minimum-scale : 초기축소비율
4. user-scalable : 확대/축소비율

Clear Fix

clear: both 의 내용으로 Tag 의 기본적인 속성내용을 초기화 합니다. 사용가능한 설정 값 으로는 다음의 내용이 가능합니다.

1. none : 기본값으로 좌우 양측의 흐름을 유지
2. left : 좌측면 흐름제거
3. right : 우측면 흐름제거
4. both : 좌우 양측의 흐름을 제거
5. inherit : 부모 값 상속

.page ul {
  display: inline-block;
}
.page ul:after {
  clear: both
  display: block; 
}

position

객체 위치의 기준점을 정의 합니다. 속성값으로 입력가능한 값은 static, absolute, relative, fixed, inherit 총 5가지로 입력 가능합니다.

1. static : HTML5 태그의 default 값 적용
2. absolute : 절대 좌표값의 활용, CSS Normal-flow 흐름에서 배제.
3. relative : 상대값(offset)을 기준으로 객체를 배치. “left: 20px” 을 추가하면 원래 있어야할 좌측 위치에서 20px떨어진 곳 객체를 위치 합니다. offset을 지정하지 않으면 static과 동일한 결과를 출력 합니다.
4. fixed : 브라우저 창의 상대적인 위치(offset)에 출력 (화면 스크롤과 관계없이 화면의 정해진 위치에 출력)
5. inherit : 부모 객체의 값을 기준 (cf> 부모가 static인 경우에는 조상(ancestor) position 이 static이 아닌 값 까지 올라가 값을 상속. (단 IE7까지 미지원)

::after, ::front

tag #id .class ::after { display:block; clear:both; }

해당 태그/ 클래스/ Id 의 객체의 뒤에 ::after 또는 앞에 ::front 특정한 속성을 추가 합니다.

반응형 웹 디자인

CSS 기본 문법과 개념들을 알아 보았다면, 이제부터는 다양한 미디어 기기로 인한 화면변화를 자동으로 계산하고 변경을 도와주는 문법들에 대해 알아보도록 하겠습니다.

미디어 쿼리 (기본문법)

@media (min-width: 320px) and (max-width: 768px) { 실행문 }

전체적인 스타일을 정의한 뒤, 개별 크기변화에 따른 다양한 디자인을 추가 합니다. 모바일 에서 스타일을 먼저 정의한 뒤 확장시 적용할 크기별 스타일을 변경, 적용 하는 방법을 추천 합니다.

1. 우선 Mobile 템플릿 스타일을 정의 합니다.
2. 화면의 적용범위를 확장 하면서 변경 스타일을 추가 합니다.
3. 모바일, 태블릿, DeskTop 화면 템플릿을 추가하여 작업 합니다.

@ 는 미디어쿼리 시작을 알립니다. HTML5, CSS3 템플릿 문법은 대/소문자를 구분하지 않습니다. 그리고 head 본문에서 삽입시 <style>@media all and () {}</style> 의 문법을 활용하여 내용을 입력 합니다.

CSS Breakpoint 의 대표적인 값들은 다음을 참고 합니다.

@media (min-width: 640px){}
@media (min-width: 768px){}
@media (min-width: 1024px){}
@media (min-width: 1200px){}

@media only screen (min-width: 768px){}
@media only screen and (min-width: 768px) and (max-width: 959px){}

반응형 폰트 크기 설정

객체 크기를 정의할 때 px 도 있지만, 다양한 디바이스에서 서비스를 제공하는 경우에는 반응형 웹 에 대응 가능한 상대적 크기 값을 자동으로 계산하는 단위들을 제공 합니다.

w3school 등의 간단한 예를 살펴보면 15vw 을 사용하는 경우 윈도우 전체 너비(width) 를 100vm 을 기준 값으로 상대크기를 자동으로 계산 합니다.

em 의 경우 h2 태그의 폰트크기가 Default: 16px 이므로 1.5em 을 사용하면 24px 를 의미 합니다.

flex

태그들의 LayOut 의 다양한 설정효과를 가능하게 합니다. MediaQuery 와 함께 flex 설정을 사용하면 다양한 화면배치를 사용할 수 있습니다. 이러한 내용은 생활코딩의 flex 에서 자세하게 설명되어 있습니다.

Container 의 flex 설정 기초

flex 는 2개의 Tag를 필요로 합니다. container 와 item 으로 구분되고 이들에게 설정 가능한 속성들은 별개로 존재 합니다. 생활코딩 내용을 보면 전체적인 이해에 도움 됩니다.

.container {
  display: flex|inline|block|inline-block;
  /* flex-wrap : 아이템이 100% 넘을 때 정렬방법 */
  flex-wrap: wrap|wrap-reverse|nowrap|initial|inherit;
  /* flex-direction : .items 배열방향 기준 */
  flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
  /* align-items : .items 수평정렬로 위아래는 늘리지 않습니다 */
  align-items: center|stretch|flex-start|flex-end|baseline|initial|inherit;
  /* align-content : .items 각 줄단위 정렬 입니다 */
  align-content: center|stretch|flex-start|flex-end|space-between|space-around|initial|inherit; 
  /* justify-content : .items 의 수평정렬로 위아래 꽉 채웁니다 */
  justify-content: center|flex-start|flex-end|space-between|space-around|initial|inherit; 
}

부모 필드인 container 를 먼저 정의 합니다. display: flex 를 정의한 뒤, 내부 Item 들의 배치내용은 다음을 활용하여 정의 합니다.

1. flex-wrap : Block 을 겹칠지 배치기준
2. flex-direction : 전체 window 배치기준
3. justify-content : Block 내부 좌우 배치기준 으로 inline-block 에 적용
4. align-content : Block 내부 상하 배치기준으로 FullScreen 에 적용

.conB .container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-around;
}

부모 container 에서 두가지 설정을 함께 입력도 가능 합니다.

.conB .container {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: space-around;
}

자식 클래스인 item 에서는 flex 범위를 구체적으로 입력 합니다.

.conB .text {
  flex: 1;
}

Item 설정 내용인 flex 의 flex-grow, flex-shrink, flex-basis

일반적인 예제를 정리하면 다음과 같습니다.

a {
  font-size: 30px;
  line-height: 1.4em| normal| initial| inherit;
  margin-top: 0.8em;
}

flex : 내부비율 여백비율 분포비율%; 처럼 flex: 0 1 60%; 와 같이 3개의 설정값을 1줄로 입력하는 내용들을 예제로 볼 수 있습니다. 이를 풀어서 살펴보면 다음의 내용을 1줄로 입력한 것과 동일합니다.

.items:nth-child(2n) {
  order: 3;       /* 배치 순서를 지정 */
  flex-grow: 1;   /* 확장시(grow) 여백비율 n */
  flex-shrink: 1; /* 축소시(shrink) 고통분담 비율 n */
  flex-basis: 300px; /* 객체의 기본 값 */

  /* 위 내용을 1줄로 처리 */
  /* flex: flex-grow, flex-shrink, flex-basis;*/
  flex: 1 0 300px;
}

1. flex-grow : 0;
2. flex-shrink : 1;
3. flex-basis : 60%;

flex-grow 는 0 ~ n 의 값을 사용 가능하고 container 내부의 item 이 container 의 내부영역의 여백 을 1/n 씩 채우는 비율의 정수값 을 의미 합니다. cf) 0 인 경우 item 크기만큼만 사용하고 나머지 여백을 그대로 남깁니다. (여백을 채우는 작업을 하지 않습니다)

flex-shrink 는 0 ~ n 의 값을 사용 가능하고 container 내부 item 이 Basis 값보다 줄어들 때 축소비율의 값 을 의미 합니다. 0 인 경우에는 Basis 값을 유지하며 **축소시 고통분담을 하지 않습니다.

flex-basis 는 0, 0px ~ 100%, 1080px 의 값을 채울수 있는 것으로, flex-기본값 을 의미하는 것으로, flex-direction 의 크기값 (비율값) 을 의미 합니다.

@media (min-width: 768px) {
  footer .container {
    display: flex;
    flex-wrap: wrap;
  }
  footA {
    flex: 0 0 40%;
  }
  footB {
    flex: 0 0 60%;
    display: flex;
  }
  footC {
    flex: 0 0 100%;
  }
}

위에서 살펴본 내용은 flex: 1 등의 비율을 지정하는 방법인데 이보다 더 상세한 설정방법을 정리해 보겠습니다. 아래는 footer 태그내부에 continer 를 flex 모드로 설정을 한 뒤, footA 를 40%, footB 를 60%, 마지막 footC 를 100% 의 비율로 배치를 변경합니다.

footB 에서 display: flex; 설정으로 인해 또하나의 flex container 가 생성되었고, 내부 속성들의 flex 설정을 통해 내부요소들이 재배치 됩니다.

이와같이 flex box 설정시 container 와 객체 들의 상속을 명확히 설정하는 연습을 통해, 다양한 화면크기에도 유연한 재배치를 구현할 수 있습니다.

40% 와 60% 는 inline 배치에서 각각의 비율로 재정렬 되고, 마지막 footC 는 100% 값으로 인하여 다음줄로 넘어가게 됩니다. 그리고 flex-wrap: wrap 의 설정으로, 너비값의 합계가 100% 를 넘으면 자동으로 줄바꿈을 합니다.

content : 개별 객체들

위에서는 flex 배치 기준 과 개별 객체의 flex 값 의 설정방법을 알아 보았습니다. 부모와 자식 객체간 설정방법과 내용이 다름에 주의를 해야 되는 내용들 이었지만, 이번에 설명할 내용을 개별 아이템별 설정 가능한 내용 입니다.

div {
  color: 색 |inherit |currentColor;
  float: none |left |right |initial |inherit;
  display: block |inline |inline-block;
  overflow: hidden |visible |scroll |auto |initial |inherit;
  border-radious: 10px;
  vertical-align: length|top|middle|bottom|baseline|sub|super|text-top|text-bottom|initial|inherit;

  margin: top 간격값| auto(기본 설정값)| bottom 간격값;
  margin-left: length |auto |initial |inherit;
  padding: top 간격값| auto(기본 설정값)| bottom 간격값;
}

Font’s style

특정한 폰트를 사용하게 되면 몇몇 속성 값이 폰트에 내장된 기본 값으로 자동 적용 됩니다. 대표적인 내용이 line-height 이고, 스타일에 적용하는 경우 margin-top, margin-bottom 을 사용할 때에는 주의할 점들이 있습니다.

line-height

폰트크기를 정의시 em 을 많이 쓰는데, font-size 에서 임의의 값으로 특정을 한 뒤, 해당 값이 변경 되어도 1:1 또는 1:2 비율값을 자동 계산하여 입력해줌으로써 복잡한 효과에 적용시 유용 합니다.

.text {
  display: inline-block;
  color: inherit;  
  font-size: 40px; /* 기본 폰트크기 : 이를 기준으로 자동계산 */
  width: 2em;
  line-height: 2em;
  margin-top: -1em;
}

선택자

효과를 추가하기 위해선 대상을 특정할 수 있어야 합니다. 어떤 대상에게 효과를 주느냐에 따라 효과의 결과 및 대상과 적용범위등 모든것이 달라 집니다. 대상자 종류는 다음과 같습니다.

1. id, class, Tag 기본 선택자
2. > : 자식 선택자 (1가족까지)
3. : 자손 선택자 (후손까지)
4. + : 인접 선택자 (동등가족)
5. ~ : 형제 선택자 (동등가족 첫번째 객체)
6. element[ attr =”값”] {} : 속성 선택자
7. :nth-child(), :checked, :text, :hover, :target ::before ::after : 다양한 가상 선택자

:checked 는 상태에 관한 선택자, :text 는 Form 과 관련된 선택자등 다양한 가상선택자를 활용하면 보다 다양한 기능을 구현할 수 있습니다.

기본 선택자

#id .class tag { } 와 같이 대상의 조건을 나열하여 대상을 특정 합니다.

자식 선택자

div > li { } 는 <div> 부모와 바로 연결된 1촌 자식인 <li> 까지만 특정 됩니다.

자손 선택자

div li { } 는 <div> <li> 이후로도 연결된 모든 자손들 을 특정 합니다.

인접 선택자

input + label { } 와 같이 같은 부모들 이지만 인접한 태그들을 특정합니다. input 태그 와 연관된 label 이 그 예로써, 메뉴효과 등 다양한 작업에 널리 활용 됩니다.

형제 선택자

h3 ~ p { } 와 같이 같은 부모들 이고 인접한 태그들 중 처음으로 조건을 충족하는 1개의 객체만 특정 하는 방식 입니다. 위 인접하는 부모들 중 바로 붙어있는 1개를 형제사이와 동일하게 취급 합니다.

속성 선택자

div[class="home"] {} 내에 대해서는, lxml 에서 객체특정 문법과 상당히 유사한 내용으로 이해하면 됩니다. 약간식 차이는 class="home" 에서 특정하는 방식으로 정규식의 문법을 활용 하며 다음과 같습니다.

1. class = "home" 등가 규칙
2. href ^= "https://" 시작값 규칙
3. href $= ".pdf" 종료값 규칙
4. href *= "naver" 일부 포함값 규칙

가상 선택자

:hover :target :checked :active :visited :link ::before ::after 등과 같이 Tag 별 지원하는 이벤트 효과 전/후 를 특정하는 방법이 있습니다.

:first-child :last-child :nth-child(2n) 와 같이 동일한 조건의 다수의 (List) 객체들 중 특정한 하나 또는 여럿 을 특정하는 선택자가 있습니다. 예제중 2n 은 다른 정수로 바꿔서 적용 가능 합니다.

Font Awesome 사용법

Import Font Awesome

bootstap 에도 지원하는 Font Icon 가 있지만 비트맵으로 화면변화에 따른 대응 및 속도가 문제되고 있습니다. 벡터를 지원하는 Font Awesome 의 경우 더 낮은 리소스를 활용하여 다양한 크기에 적용이 용이한 장점이 있어서 널리 사용되고, 무료버젼 도 다양한 아이콘이 지원 합니다.

< link rel=“stylesheet” href=“css/font-awesome.min.css” >

link 는 닫는 태그가 필요 없습니다. 아이콘을 <span> 를 활용하기도 하지만 <i></i> 이탤릭 폰트 태그 와 같은 간단한 태그의 사용을 추천 합니다.

Import Icons

무료 Icon 갤러리 에서 필요한 내용의 아이콘을 선택하면 해당 내용의 활용방법을 복사하여 템플릿에서 활용 합니다. 아이콘들은 일반 font 와 동일하게 CSS 스타일을 적용하면 고유한 스타일로 변경 가능합니다.

Materialize Font

Import material Font

< link href=“https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet” >

안내설치 가이드 를 확인하면 최근에는 업데이트가 이루어 지고 있지는 않습니다. 위 링크를 첨부하면 바로 활용이 가능합니다. 관련 프로젝트는 2년 전까지 업데이트 되어 Git Source 를 참고하여면 안정적인 실행이 가능합니다.

Import Icons

아이콘 Theme 목록에서 사용자가 사용하고 싶은 아이콘을 클릭하면 해당 객체를 어떻게 활용 가능한지 태그 사용법이 설명되어 있습니다.

5 TypewriterJS

Document

MIT 라이센스를 갖는 GitHub 와 함께 TypewriterJS 공식문서 내용을 보면 이해하기 쉽게 구성되어 있습니다.

Example

텍스트의 타이핑 효과를 도와주는 모듈 입니다. D3.js 와 사용법이 유사하게 구현할 내용을 ChainReaction 으로 연결하면 됩니다. 때문에 설정 내용만 익히면 작업이 용이 합니다. 간단한 예제인 다음의 내용을 보면 다음과 같습니다.

<span id="typing"></span>
<script src="https://unpkg.com/typewriter-effect/dist/core.js"></script>
<script>
var typing = document.getElementById('typing');
var typewriter = new Typewriter(typing, {
    loop: true // true, false (Boolean)
});
typewriter.typeString('Address :')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Seoul in Korea')
    .pauseFor(2500)
    .deleteChars(14)
    .start();
</script>

Animate.css

웹 페이지에서 구현하고 싶은 대부분의 내용을 예제 와 개별 내용들을 정리된 페이지 를 요약 정리해 보도록 하겠습니다. Change Opacity On Scroll 등 에서 보다 자세한 내용을 확인할 수 있습니다.

MIT 라이센스 모듈로 업데이트가 아직까지도 활발하게 이루어 지고 있습니다. CDN경로 로써 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"> 를 활용하면 서버 부담이 줄어듭니다.

Introduction

class 로 animated 와 함께 추가할 효과 이름 을 붙여서 실행하면 됩니다. 적용 가능한 클래스는 animate.css 의 예제를 참고 합니다.

<h3 class="animated bounceIn">GooGle.Com</h3>

효과를 반복 하려면 설정값을 추가하면 됩니다.

<h3 class="animated bounceIn infinite">GooGle.Com</h3>

애니메이션의 타이머등 추가적인 설정이 필요한 경우에는 추가할 효과 이름 의 CSS 를 Overwriting 하면 됩니다. bounceIn 타이머를 추가해 보도록 하겠습니다. 여기서 입력하는 CSS3 Animation 설정의 자세한 내용은 CSS/애니메이션/Animation 블로그 및 모질라 재단 에 정리된 내용을 참고 합니다.

.bounceIn {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

delay 와 speed 설정은 Inline 방식으로도 추가 가능합니다. 자세한 내용은 GitHub README 에 설명되어 있습니다.

delay 설정으로 추가 가능한 값으로는, delay-2s : 2sec, delay-3s : 3sec, delay-4s : 4sec, delay-5s : 5sec 가 있습니다.

speed 설정 값으로는 slow : 2sec, slower : 3sec, fast : 800ms, faster : 500ms 가 있습니다.

<div class="animated bounceIn delay-2s">Example</div>
<div class="animated bounceIn faster">Example</div>

특정한 조건 및 사용자 Action 에 대응하는 CSS 를 추가하는 JavaScript 내용을 간단하게 살펴보면 다음과 같습니다.

const element =  document.querySelector('#위치')
element.classList.add('animated', 'bounceOutLeft')

Example

예제 사이트 를 살펴보면 어떤 방식으로 구현 가능한지를 알 수 있습니다. 자세한 내용은 Animate.css 애니메이션 블로그 에서 확인 합니다.

Interactive JS

자바스크립트를 활용한 동적 요소들을 정리해 보겠습니다.

Modal

Bootstrap 등을 사용하면 바로 구현가능한 기능으로, 버튼이나 링크를 클릭시 활성화 되는 대화창 을 띄우고 대화창 이외 요소들은 모두 비 활성화 합니다.

Pop Over

tooltip 과 유사한 기능으로 Bootstrap 에서 지원 합니다. 제목등을 별도로 표시할 수 있는 등 링크나 버튼 옆에서 간단한 정보를 표시 합니다.

Carousel

회전목마가 돌듯이 자동으로 슬라이드 Show 기능을 구현하는 내용 입니다. 자동으로 넘기는 기능만이 아닌 좌우 화살표 나 객체 아래 원형 네비게이션 을 활용하는등 사용자 편의를 높이는 부수적인 기능들도 지원 합니다

CSS Frameworks

Popular CSS 2019 내용을 바탕으로 정리한 내용 입니다. Bootstrap 은 가장 규모가 크고 유명하고, 그 다음으로 MaterializeCSS 과 같은 다양한 CSS 프레임 워크들이 제작되고 있습니다.

작업의 진행은 MaterializeCSS 를 중심으로 필요한 기능을 우선 구현하고, Pop Over 등 부족한 부분에 한정되어 다른 모듈을 보충하는 방식으로 진행하도록 하겠습니다.

Bulma

군더더기 없이 필요한 기능만 담은 소형 모듈로써 널리 사용되는 모듈 중 하나 입니다.

Spectre

GitHub 중국인 들이 만든 모듈로 필요한 기능은 모두 담겨있고, *문서 에서 필요한 내용들을 찾아서 활용하면 되도록 잘 정리되어 있습니다.

Tachyons

GitHub 에서 높은 주목을 받는 모듈로 문서 에도 내용이 잘 정리되어 있습니다.

Bootstrap

CSS 디자인 패키지 로써 아래에서 설명할 Bluma, Material 등등 다양한 도구를 활용하면 보다 빠른 작업이 가능합니다. 하지만 개별 패키지를 학습하려면 시간을 별도로 필요로 하는등 오히려 능률이 낮아지는 문제가 있습니다.

이들 중 가장 역사가 긴 Bootstrap 에 대해서 큰 뼈재를 익힌 뒤, 이를 골격으로 다양한 도구에서 방법의 차이점만 알면 되어서 보다 빠른 작업이 가능합니다.

지금 출간된 도서들이 Bootstrap 3 내용을 설명하는 부분이 많습니다. Bootstrap 4 가 출시된 지도 오래되었고 이부분으로 적용하는 부분도 많아서 이러한 차이점을 비교해 보도록 하겠습니다.

부트스트랩 3.2 버전은 IE8 을 지원하는 최종버전이고, 부트스트랩 3.3 부터는 IE9/IE10 이상을 지원 합니다. 부트스트랩 4 는 IE10/IE11 이상부터 지원을 해서 국내 오래된 시스템의 IE 사용자는 포기하는 한계가 있습니다. 이러한 점에 주의하며 작업 대상을 특정 합니다.

간단한 목차를 살펴보면 CSS 스타일, 부트스트랩 지원 컴포넌트, 부트스트랩 JavaScript 3개의 파트로 구분이 가능합니다

bs4 Component

Image Style

BS3 vs BS4 정리사이트로 여기를 추천하는 내용이 많았습니다. BS3 관련 내용들을 학습하면서 분류등 내용을 익히고, 자세한 소스는 위와 같은 비교정리 사이트를 참고 합니다.

Badge

텍스트 내용 중 특정 Badge 로 표시되는 표식 및 숫자로 표시를 표현하는 기능 입니다. bs3 에선 Label 로 이름을 사용하였는데, bs4 에서는 Badge 로 이름이 변경 되었습니다.

bs4 Categories

여기서 지원하는 기능들은 대부분 Jquery 모듈을 추가로 필요합니다. 대표적인 효과들을 언급하면 다음과 같습니다.

1. Transaction
2. Modal Window
3. Drop Down Menu
4. Scroll Spy (Bookmark Tag)
5. Tab
6. ToolTip
7. Pop Over
8. Warning
9. Collapse : 아코디언 효과
10. Carousel : 반응형 슬라이드 효과
11. Affix
12. Parallax : 시간차 슬라이드 효과