퍼블리싱을 위한 HTML5, CSS3, JQuery 필수구문 정리

퍼블리싱에는 자바스크립트의 클로저나 객체지향, 함수형 프로그래밍 등에 대해서 고민할 필요는 없습니다.

하지만 맨 바닥에서 시작 할 수는 없는 노릇..!

정말 기초적인 부분은 안다는 가정하에 퍼블리싱에 필요한 기술들을 리마인드 혹은 배워봅시다.

이번 포스트에서는 실무에서 많이 사용되며 꼭 알아둬야 하는 필수 구문들에 대해서 정리해 보았습니다.

HTML5

HTML5의 새로운 태그들

HTML5가 나오면서 시멘틱 태그들이 추가 되었습니다.

기존에 사용하던 div 태그에 의미를 부여한 태그입니다.
<div id="header"></div> 이와 같이 사용하던 부분들을 이제 시멘트 태그로 <header><header>와 같이 사용할 수 있게 되었습니다.

header : 문서의 헤더 부분
nav : 문서의 네비게이션 구조 부분
figure : 문서의 멀티미디어 요소 부분
section : 특정 콘텐츠 그룹화
article : 작은 의미 단위의 콘텐츠
footer : 문서의 푸터 부분의 구조
aside : 문서의 사이드 콘텐츠 즉 본문과 다른 서브 콘텐츠

video 태그

동영상을 웹브라우저에서 외부 플러그인을 사용하지 않고 사용할 수 있게 되었습니다.

<video>
    <source src="경로" type="video/mp4">
</video>

속성

preload : 해당 동영상 재생전 미리 불러오기
autoplay : 비디오 자동 재생
loop : 비디오 무한반복
controls : 비디오 컨트롤 패널 생성

위속성을 video태그에 넣어서 원하는 기능을 수행할 수 있습니다.

type은 동영상 파일 타입인데 다른 타입과는 다르게 mp4는 모든 브라우저에서 지원합니다.
웬만하면 위 소스처럼 mp4파일로 사용하시길 권장합니다.

CSS

CSS도 마찬가지로 너무 기본적인건! 생략하겠습니다.

너무 기초적이지 않으면서 많이 사용되는 구문위주로 알아봅시다.

nth-child()

css 선택자로 여러항목을 선택 했을 때 특정 순서에 값만 선택하는 선택자입니다.

<body>
    <ul>
        <li>1번</li>
        <li>2번</li>
        <li>3번</li>
    </ul>
</body>

위와같은 선택자가 있을때 2번만 파란색글씨로 하고 싶을때 아래와 같이 해줍니다.

ul li:nth-child(2) { color : blue; }

2번이 파란색 글씨로 노출되게 됩니다!

text-shadow, box-shadow

그림자에 추가해주는 요소입니다.

text-shadow: 가로길이, 세로길이, 퍼짐도, 색상;

위와같이 사용해 줍니다.

ul li:nth-child(1) { text-shadow:5px 5px 5px #ddd; }

box-shadow: 가로길이, 세로길이, 퍼짐도, 색상;

.box { width: 300px, height:30px; }
.box:nth-child(1) { box-shadow:10px 10px 10px #aaa; }

border-radius

모서리를 둥글게 해주는 구문입니다.

border-radius: 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래

.box:nth-child(2) { border-radius: 0px 10px 20px 40px; }
.box:nth-child(3) { border-radius:150px; }

nth-child(3)의 경우 모든 모서리에 150px을 줬는데 만약 .box의 width, height가 300px일 경우 원으로 보이게 됩니다.

gradient

그라디언트 색상을 지정할 수 있습니다.

종류는 원형과 선형이 있습니다.

background:그라디언트 모양(방향, 색상1, 색상2);

각도는 숫자의 deg를 붙여서 45deg와 같은 방식으로 표현하며 음수로 표현할 경우 반대방향 입니다.

div.nth-child(1) { background:linear-gradient(to right, blue, red); }
div.nth-child(2) { background:linear-gradient(to bottom, blue, red); }
div.nth-child(3) { background:linear-gradient(45deg, blue, red); }
div.nth-child(4) { background:radial-gradient(blue, red); }

background-size

css3은 배경 이미지의 크기를 임의로 변경할 수 있습니다.

원본이미지의 비율을 무시하고 크기 지정
background-size:넓이, 높이;
이미지가 잘리더라도 원래 비율로 해당 요소안에 빈 여백없이 채우기
background-size:cover;
빈여백이 생기더라도 원래 비율로 해당 요소안에 이미지가 잘리지않게 채우기
background-size:contain;

box-sizing

박스 사이징을 이용하여 border, padding으로 인해서 추가된 크기가 없게 합니다.

무슨말이냐 하면 넓이 높이 100px의 div에 border를 2px로 먹일경우 4px이 추가 되게 됩니다.
이런문제를 해결하기 위해 box-sizing을 사용하면 padding, border값을 빼주지않아도 브라우저가 ㅇ라아서 해당 수치를 제외한 넓이 값과 높이 값을 계산해줍니다.

box-sizing:border-box;

div.nth-child(1) {padding: 50px; border:20px solid #444; }
div.nth-child(2) {padding: 50px; border:20px solid #444; box-sizing:border-box; }

transform(2d 변형)

translate - x축, y축 이동

div.nth-child(1) { transform:translateX(100px); }
div.nth-child(2) { transform:translateY(100px); }
div.nth-child(3) { transform:translate(100px, 200px); }

위와 같이 X축, Y축, XY동시 이동이 가능합니다.

skew - x축, y축 기울임

div.nth-child(1) { transform:skewX(30deg); }
div.nth-child(2) { transform:skewY(30deg); }
div.nth-child(3) { transform:skew(30deg, 30deg); }

위와 같이 x축, y축 회전이 가능하며, 동시에 x, y축으로 기울일 수도 있습니다.

scale - x축, y축 확대 축소

div.nth-child(1) { transform:scaleX(1.5); }
div.nth-child(2) { transform:scaleY(0.5); }
div.nth-child(3) { transform:scale(2, 2); }

x축만 1.5배확대, y축만 0.5만큼 축소 그리고 동시에 x, y, 축으로 각각 2배 확대하는 예제입니다.

rotate - 평면상 회전

div.nth-child(1) { transform:rotate(30deg); }

시계방향으로 30도 회전하는 css입니다. 반약 반시계방향으로 하고 싶다면 -30deg같이 음수로 넣어주시면됩니다.

transform-origin - 해당요소 기준점 변경

위에 예제에서는 기준점이 모두 중심이었습니다.
하지만 아래와 같이 기준점을 변경할 수도 있습니다.

div.nth-child(1) { tranform-origin:right bottom; transform:rotate(15deg); }

위와같이 한다면 오른쪽아래를 기준으로 15도 회전하는 걸 확인 할 수 있습니다.

transform(3d 변형)

3d에서는 원근감이 추가됩니다.
여기서 원근감이라 함은 쉽게말해 모니터 안의 객체와 화면을 보는 나와의 거리라고 생각하시면 됩니다.(z축)

perspective로 원근감을 설정할 수 있습니다.

그리고 반드시 3d변형을 하려하는 요소의 부모태그에 설정해줍시다.

이 수치가 작을 수록 나와 모니터안의 객체의 거리가 짧아져 왜곡이 심해지며, 이 수치가 클수록 왜곡이 적어집니다.

<body>
    <div><p></p></div>
    <div><p></p></div>
    <div><p></p></div>
</body>

div { width:200px; height:200px; margin:150px 50px; border: 1px solid #000; float:left;}
div p {width:100%; height:100%; background:blue; opacity:0.3; transform:rotateY(50deg);}

div:nth-child(1) { perspective:150px; }
div:nth-child(3) { perspective:800px; }

1번째 객체는 z축 거리가 짧기때문에 왜곡이 심하게 일어납니다.
2번째 객체는 rotateY로 회전해도 z축이 없기때문에 왜곡없이 가로길이만 줄어든것 처럼 보입니다.
3번째 객체는 z축이 멀어서 왜곡이 적습니다.

translateZ : Z축으로 이동하기

해당 객체를 바라보는 나( 혹은 모니터, z축 )와 객체의 거리를 조절해봅시다.

div { width:200px; height:200px; margin:150px 50px; border: 1px solid #000; margin:100px auto; position:relative; perspective:1500px;}
div p {width:100%; height:100%; position:absolute; top:0px; left:0px; background:blue; opacity:0.3; }

div:nth-child(1) { transform:translateZ(-500px); }
div:nth-child(2) { transform:translateZ(0px); }
div:nth-child(3) { transform:translateZ(500px); }

각 객체가 크기가 다르게 보이지만 모두 같은 크기이며 가까이있냐 멀리있냐의 차이입니다.

x축 y축 회전

위 예제에서 본 rotateY()가 이것입니다. rotateX()도 있으며 입체적으로 표현할 수 있습니다.
rotateX(각도);
rotateY(각도);

transition

플래시를 사용하지 않고 모션 효과를 주는 CSS3의 꽃입니다.

transition: 속성명 전환시간 가속도 설정 지연시간;

위와같습니다.

div { width:400px; height:400px; background:red; margin:100px auto; transition:all 1s ease 0s; }
div:hover { transform:rotate(45deg); background:blue; }

위에 transition은 모든 css 속성 변경사항에 대해서 1초의 시간동안 가속도를 적용하여 지연시간 없이 전화효과를 구현하라! 는 의미입니다.

hover상태일때 위 명령과같이 움직이게 됩니다 wow

animation

@keyframes 모션이름 {
0% { 모션 시작점 css 설정 }
100% { 모션 끝 점 css 설정 }
}
animation: 모션이름호출 시간 가속도 지연시간 반복횟수 방향지정;

위와같이 사용합니다.
@keyframes로 먼저 실행할 명령을 입력해 놓고 animation구문을 통해서 해당 키프레임을 불러와서 실행하게 됩니다.

아래 예제와 같습니다.

@keyframes playani { 
    0% { transform:rotate(0deg);}
    100% { transform:rotate(360deg);}
}

div { width: 300px, height: 300px; background: blue; margin : 100px; animation: playani 2s linear 3 normal; }

mediaquery

반응형웹을 위해서 사용되는 구문입니다.

해상도별 적용가능한 css를 지정할 수 있습니다.
@media screen and (min-width:최소 넓이) and (max-width: 최대넓이) {
해당 조건에 사용할 css구문
}

div{ width:300px; height:300px; margin:100px auto; }

@media screen and (min-width:1024px){
    div { background:red; }
}

@media screen and (min-width:640px) and (max-width:1023px){
    div { background:blue; }
}

@media screen and (max-width:639px){
    div { background:green; }
}

화면 크기별로 색상이 변하는걸 확인하실 수 있습니다.

참고로 아래 사이트에서 스마트기기 해상도별로 확인해볼 수 있습니다.
다음 troy - 디바이스 해상도별 확인 지원

구글 웹 폰트

구글에서 무료로 제공하는 웹 폰트를 사용해봅시다
구글 웹폰트 바로가기
위에서 원하는 폰트를 선택 후 css import코드를 찾아서 css에 아래와 같이 사용합니다.

@import 'https://fonts.googleapis.com/css?family=Baloo+Tamma';

p { font-family: 'Baloo Tamma', cursive; }

로딩 속도 등으로 인하여 한페이지당 웹 폰트의 연결은 3개 이하로 하는게 좋으며 너무 많은 웹폰트는 사용하지 맙시다.

웹 폰트 아이콘

Font awesome
위 주소에서 웬 폰트 아이콘을 사용해 봅시다.
cdn주소를 포함해주고 위 사이트에 Icons로 가서 지정된 태그를 넣어주면 간단합니다.

이 또한 폰트이기때문에 font-size등으로 크기조절을 하거나 색을 변경하는게 가능합니다.

JQuery

기본적인 자바스크립트 구문이나 셀렉터등은 생략하고 기타 필수 기능들에 대해서 설명해보겠습니다.

hide(), show(), fadeOut(), fadeIn()

$('.button').hide();
$('.button').show();

$('.button').fadeOut();
$('.button').fadeIn();

순서대로 숨김, 보이기, 서서히 숨김, 서서히 보이기 입니다.

e.pageX, e.pageY

브라우저 상의 마우스커서 좌표입니다.
보통 마우스이벤트와 함께 사용됩니다.

$(document).ready(function(){
    $(window).on('mousemove', function(e){
        var x = e.pageX;
        var y = e.pageY;
        console.log('x:' + x);
        console.log('y:' + y);
    }
});

scrollTop();

화면을 스크롤 할 때의 사용자가 스크롤한 만큼의 거리를 계산해 줍니다.
보통 스크롤이벤트와 함께 사용됩니다.

$(document).ready(function(){
    $(window).on('scroll', function(e){
        var top = $(this).scrollTop();
        console.log(top);
    }
});

offset().top

문서가 아닌 선택자가 위치하고 있는 y축의 거리입니다.

$(document).ready(function(){
    var divtop = $('div').offset().top;
    console.log('divtop : ' + divtop);
});

load(), play(), pause()

html5 video태그의 영상 제어 구문입니다.

video 태그가 존재한다고 가정하에 아래와 같이 사용할 수 있습니다.

var vid = $('video').get(0);

//.load버튼 클릭시 동영상 불러오기
$('.load').on('click', function(){
    vid.load();
})

//.play버튼 클릭시 동영상 시작하기
$('.play').on('click', function(){
    vid.play();
})

//.pause버튼 클릭시 동영상 정지하기
$('.pause').on('click', function(){
    vid.pause();
})

위와 같이 동영상을 제어할 수 있습니다.

new Date()

new Date() 구문으로 현재 날짜와 시간관련 정보를 가져올 수 있습니다.

아래와 같이 시간을 가져올 수 있습니다.

$(document).ready(function(){
    //모든 날짜와 시간정보
    var now = new Date();
    console.log(now);

    //년도 표시
    var year = now.getFullYear();
    console.log(year);

    //월 표시(월의 경우 0이 1월, 1이 2월, 3이 3월... 이기 때문에 +1 해줌)
    var month = now.getMonth();
    console.log(month + 1);

    //일 표시
    var date = now.getDate();
    console.log(date);

    //요일 표시 (숫자, 0:일요일 1:월요일 ...)
    var day = now.getDay();
    console.log(day);

    //시간 표시
    var hr = now.getHours();
    console.log(hr);

    //분 표시
    var min = now.getMinutes();
    console.log(min);

    //초 표시
    var sec = now.getSeconds();
    console.log(sec);
})

setInterval()

일정구간마다 특정 구문이 실행되야 할때 아래 구문을 사용합니다.

var idx = 0;
var ab = setInterval(function(){
    console.log(idx++);
    if(idx > 10){
        clearInterval(ab);
    }
}, 1000) //1초마다 반복

setInterval로 할당하고 clearInterval로 반복문을 취소할 수도 있습니다.
취소하기 위해서 해당 인터벌이 할당된 변수를 넣어주시면됩니다.

참고

인터랙티브 웹디자인북 - 최성일 지음 한빛미디어
다음 troy - 디바이스 해상도별 확인 지원

마치며

퍼블리싱의 경우 기술보다는 디자인같은 만드는 사람의 센스의 문제라고 생각됩니다.
자신이 가지고 있는 기본기에 멋진 감각만 있다면 위의 필수 구문들을 참고하여 멋진 홈페이지를 퍼블리싱 하실 수 있으실 겁니다.

포스트를 끝까지 봐주셔서 감사합니다. 좋은 하루 되세요 :)

저작자표시

Kendrick's Blog

Kendrick B. Jungbumfoo@gmail.com

Tag Box

Admin