박지연의 코딩이야기

오늘은 팝업창에 대해서 배워보겠습니다.

팝업창은 광고용으로 많이 쓰이기때문에 알아두면 좋아요

먼저 팝업창을 만들기 위해서 필요한 것은 html , css , js 입니다.

저는 버튼을 누르면 튀어나오는 팝업창을 만들어볼거예요

만드는 순서

1. 먼저 누르는 버튼을 만들어준다.

2. 튀어나오는 팝업창과 뒤에 어두운 검정배경을 만들어준다.

3. 튀어나와야하는 팝업창과 검정배경을 display: none;하여 안보이도록 한다.

4. js를 활용하여 버튼을 누르면 팝업창이 뜨도록 설정한다. 

** 자바스크립트 코드(괄호안에 요소만 바꾸어서 사용하시면 됩니다.)

//버튼을 클릭하면 팝업창과 검정배경이 dispaly:block이 되어나타난다.

$('button').click(function(){
    $('.popup-1,.popup-bg').css('display','block');
    $('html').addClass('no-scroll');
});

// btn-close를 누르면 팝업창과 검정배경이 다시 display:none;이 된다.

$('.popup-1 > .head > .btn-close').click(function(){
    $('.popup-1,.popup-bg').css('display','none');
    $('html').removeClass('no-scroll');
});

See the Pen 팝업창 by 박지연 (@qwer273) on CodePen.

안녕하세요 오늘은 애니메이션에 대해서 배워보겠습니다.

오늘은 오른쪽에서 갑자기 글자가 밀고들어오는 움직이는 애니메이션을 만들어볼게요

먼저 animation 속성에 대해서 알아보겠습니다.

애니메이션을 적용하는 방법은 먼저[ @keyframes: 지정한 이름] 를 활용해서 효과를 먼저 만들어주면 됩니다.

저는 옆에서 밀고 들어오는 애니메이션을 적용하기 위해서  animation을 이름으로 해서

magin-left 와 width로 설정해보겠습니다.

@keyframes animation{
    0%{
        margin-left:100%;
        width:300%;
    }
    100%{
        font-size: 300%;
        margin-left:0;
        width:100%;
    }

}

0% ~ 100% 는 내가 설정해놓은 애니메이션 시간이 만약 3초라면 3초가 되기까지를 퍼센트로 나타낸다고 보면됩니다.

만약 50%에서 width:100%로 설정했다면 1.5초 지점에서 width:100%효과를 나타내줘 라는 뜻입니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이제 애니메이션을 만들었다면 적용하고 싶은 태그에다가 적용시켜줘야합니다.

css로 스타일을 애니메이션으로 적용을 시켜주면 되는데 그러기 위해서 애니메이션 스타일을 지정해주는

css속성에는 무엇이 있는지 알아보겠습니다.

먼저 지정하기위해서 animation:지정된 이름 설정시간 ; 을 사용하여 지정해주면 적용이 되는 것을 볼 수 있습니다.

2s는 2초로 애니메이션을 실행하라는 뜻입니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

그런데 너무 매끄럽지않게 실행됩니다. 그래서 반대로도 실행되어 매끄럽게 왔다갔다 할 수 있게 

애니메이션이 끝났을 때 반대방향으로 이동하도록  animation-direction 속성을 alternate로 지정해보겠습니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이번에는 한번만 실행되기때문에 여러번 실행되도록 animation-iteration-count: 숫자 or infinite(무한)을

지정하여 적용해보겠습니다.

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

이밖에도 더 다양한 에니메이션 속성들이 있어서 다양한 에니메이션 지정이 가능합니다.

정말 간단하지않나요??

여기까지 에니메이션 효과를 알아보았습니다.

안녕하세요 오늘은 table 태그를 활용하여 간단하게 표를 만드는 방법을 알려드리겠습니다.

table태그를 사용하기 전 알아두어야하는 하위 태그들이 있는데요

* 헤더태그 : <th>

* 행태그 : <tr>

* 열태그 : <td>

이 세가지만 안다면 표는 간단하게 만들 수 있어요!

위 사진과 같이 css없이 표를 만들 수 있습니다.

먼저 table태그를 만들어 주고 만약 3x3표를 만들고 싶다 하면 먼저 헤더태그<th>를 3개 만들어줘야하겠죠?

그리고 행태그<tr> 안에 <td> 열 태그를 넣어주면 테이블 표 완성!

그 다음은 테이블 디자인을 변경하고 싶을 때 쓰는 속성인데요! 

총 8 개의 속성으로 이루어져있습니다.

1. border

테이블의 테두리

 2. bordercolor

테이블의 테두리 색상 

 3. width

테이블 가로 크기 

4. height 

테이블 세로 크기 

 5. align

정렬

 6. bgcolor

배경색 

 7. colspan

 가로 합병(열 합병)

 8. rowspan

 세로 합병(행 합병)

어떻게 쓰는지는 예시를 통해서 알아보겠습니다. 만약 첫행의 두번째 요소의 배경색을 바꾸고 싶다면

bgcolor속성을 넣어주면 됩니다.

다른 속성을 하나 더 해보겠습니다.  이번에는 병합하는 것을 해볼텐데

병합에는 가로병합colspan 세로병합 rowspan이 있습니다. 

저는 세로병합 rowspan을 적용해보겠습니다.

처음 시작점으로 rowspan을 적용시켜주면 적용한 태그 기준으로 병합된 모습을 볼 수 있습니다.

여기까지 table에 대해서 알아보았습니다.

안녕하세요 오늘은 HTML 태그의 기초에 무엇이 있는지 알아보겠습니다.

1. &nbsp; 

&nbsp; 는 non breaking space의 약자로 태그는 아니지만 문자사이에 공백을 넣어주는 기능을 합니다.

예를들어서 <div>제목</div>를 입력했을때 출력은 기본으로 "제목"으로 되지만 제목 사이에 &nbsp;를 넣어주면

<div>제&nbsp;목</div>

출력은 "제  목"

제목 사이에 일정한 공백이 생기게됩니다.

더 띄우고 싶다면 여러개를 넣어주면 됩니다.

<div>제&nbsp;&nbsp;목</div>

출력은 "제    목" 

<div>제&nbsp;&nbsp;&nbsp;목</div>

출력은 "제       목" 

2. br

<br>태그는 line break의 약자로 줄바꿈을 해주는 기능을 가집니다.

<br>태그는 다른 태그들과 다르게 닫는 태그를 갖고 있지않습니다.

<div>안녕하세요</div> 

<div>안녕<br>하세요</div> 안녕하세요 사이에 <br>을 넣어주게되면

출력 

"안녕

하세요" 

br을 넣어준 기점으로 줄바꿈이 되어 출력됩니다.

3. pre

<pre>는 performatted text의 약자로 입력한 대로 화면 출력되는 태그입니다.

즉 코드자체를 표시할때 프로그램 소스를 표현하는데 많이 사용합니다.

그리고 원하는 만틈의 공백이나 문단을 바꿀 때에 <br>과<p>태그가 필요하지만 <pre>태그를 이용하면

입력한 그대로를 반영하여 출력해줍니다.

pre태그는 이해가 쉽도록 코드펜을 아래 캡쳐화면을 활용해보았습니다.

4. p

<p>태그는 paragraph 약자로 문단을 구분할 때 씁니다.

즉 p태그는  br태그가 두번 들어간 것과 같은 결과가 나옵니다.

<p>안녕하세요</p>

<p>안녕하세요</p>

<p>안녕하세요</p>

출력 

"

안녕하세요

안녕하세요

안녕하세요

"

안녕하세요!

오늘은 HTML 태그에서 많이 쓰이는 div 와 span의 차이에 대해서 알아보겠습니다.

* div 와 span의 공통점 : 특정영역에 스타일을 주는 태그

* 스타일을 지정할때 inline 과 block 두가지방식이 있습니다.

1. 문자의 일부분만 선택지정(inline)

2. 넓은 범위를 묶어서 지정(block)

* inline 요소 : <span><b><a><img>

* block 요소 : <p><div><ol><ul><table>

즉 span 과 div 의 차이점은

문자열을 선택해서 지정할때는 span

비교적 넓은 범위에 지정할때는 div를 

사용합니다. 

예를 들어서 span은 문자열에서 원하는 부분만 선택해서 색을 바꾸는 등 스타일을 지정해 줄 수 있습니다.

<span class="hi">안녕</span>하세요 (입력)

-> 안녕하세요 (출력)

** span 으로 묶어준 안녕만 다른 색상으로 스타일 적용이 가능합니다.

div는 문자열이 아닌 태그로 묶인 형태로 스타일을 지정할 때 사용합니다.

(입력)

<div class="hi"> 

<p>가</p>

<p>나</p>

<p>다</p>

</div>

div와 p는 block요소로 브라우저 너비 100%를 가져가기때문에 마치 블록처럼 쌓입니다.

(출력)

가                                                                                                         

나                                                                                                         

다                                                                                                         

여기까지 span 과 div의 차이점에 대해서 알아보았습니다.

▶ 오늘은 position 속성에 대해서 알아보겠습니다.

먼저 position을 이해하기 위해서 position의 4가지 속성에는

◎ position 속성 4가지

1. static
2. relative
3. absolute
4. fitxed

이렇게 4가지가 존재하는데요.

position을 쓰는 이유는 대표적으로 임의로 offset 값을 주기 위함입니다.

* offset : 페이지 전체를 기준으로 위치값을 반환한다. = 즉 ,절대좌표

어떤 범위가 지정된 것의 위치를 바꾸게 되면 자동적으로 같이묶여있는다른 개체들 한테도 영향을 미치게 됩니다.

그렇기때문에 어디에도 영향을 받지않는 독립적인 개체로 만들어 주고 위치값을 자유롭게 주어 배치하면 편리하므로

position 속성은 아주 유용하고 자주 쓰이게 됩니다.

● 하지만 4가지 속성도 사용하는 상황이 다르기때문에 적재적소에 쓰는 것이 중요합니다.

1. static : 브라우저기준으로 좌 상단 좌표가 0 , 0 ( 기존자동으로 static이 됩니다)
2. relative : 부모기준으로 좌 상단 좌표가 0, 0에서 상하좌우로 이동 가능 , 현재 위치에서 유령화됨
3. absolute : 처음 위치는 static을 따라감(위치 지정 시에 브라우저 기준으로 좌 상단 좌표가 0, 0 )
4. fitxed : 무조건 브라우저를 기준으로한 좌표를 따른다 ( but fixed는 화면에 고정되어 스크롤 무시하고 따라다님)

* position 4가지 속성 공통점

: 유령화 시킴( 부모에서 탈출 자유롭게 이동 가능)

: 자유롭게 임의로 위치 조정가능

아래에 이해를 더 돕기 위해 코드펜을 참고하겠습니다.

* 4개의 박스가 inline-block 된 상태

1. relative

* 4개의 박스가 inline-block 된 상태에서 position : relative 만 추가

-달라진점은 없어보입니다. 여기에 위치값을 줘보겠습니다.

- top:200px; / left:20%;를 입력하였더니 개체 하나하나가 기존 위치를 0 , 0 으로 각각 기준삼아

  아래로 200px , 오른쪽으로 20% 이동한 것을 볼 수 있습니다.

2. absolute

* 4개의 박스가 inline-block 된 상태에서 position : absolute 만 추가

- absolute를 추가하였더니 크기가같은 박스 4개가 하나로 겹쳐진 것을 알 수 있습니다.

- absolute는 개체 하나하나가 유령화가 되면서 같은 위치가 되어 서로 겹쳐진 것을 알 수 있습니다. (relative와 다른점)

- 여기에 위치값을 줘보겠습니다.

- top:200px; / left:20%;를 입력하였더니 4개의 박스가 서로 겹쳐진 상태로

  아래로 200px , 오른쪽으로 20% 이동한 것을 볼 수 있습니다.

3. fixed

* 4개의 박스가 inline-block 된 상태에서 position : fixed 만 추가

- fixed를 추가하였더니 크기가같은 박스 4개가 하나로 겹쳐진 것을 알 수 있습니다.

- fixed는 absolute와 같은속성인 것처럼 보이나 fixed는 보이는화면에 박제 한 것처럼 고정되어

  스크롤을 무시하고 오로지 자기의자리를 지키려고 하기때문에 스크롤를 해도따라 다니게 됩니다.

- fixed는 박제되어 상단에 nav를 추가하여 높이를 500px주어 스크롤시에도 따라다니는 것을 구분할 수 있게 하였습니다.

▼ 아래는 스크롤된 화면

여기까지 position 4가지 속성에 대한 위치설정의 차이점에 대해서 알아보았습니다.