※제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. 현재는 제이쿼리의 의존도나 사용도가 점점 줄어드는 추세이나 기존에 개발되었던 것들은 제이쿼리 기반으로 구현되어 있기 때문에 알아두는 것이 좋을 것 같습니다.

목차

1. 제이쿼리(JQUERY)란?

2. 제이쿼리(JQUERY) 사용방법

 

1. 제이쿼리(JQUERY)란?

※제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다.

제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.

또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다.

 

@제이쿼리의 특징

  -웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다.
  -거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다.
  -네트워크, 애니메이션 등 다양한 기능을 제공합니다.
  -메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다.
  -관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있습니다.
  -공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.

 

2. 제이쿼리(JQUERY) 사용방법

※다운로드하여 설치하는 방식과 파일생성 후 사용방식 중 파일생성 하는 방식으로 진행하겠습니다.

 

1. 제이쿼리 공식 홈페이지에 접속 (https://jquery.com/)

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

2. 우측 Download jQuery v3.6.4 클릭 (버전은 변경될 수 있음)

3. Download 페이지에서 Download the compressed, production jQuery 3.6.4 클릭 (버전은 변경될 수 있음)

4. 클릭 후 아래 창이 뜨면 전체 내용 복사

 

5. VS CODE에 "해당버전. js" 파일 생성 후 내용 붙여 넣기 

 

6. 작성할 페이지 <head> 안에 <script> 작성 (5번에서 생성한 파일 이름)

 

 

7. 준비가 완료되었습니다. 이제 document문 안에 작업내용을 입력하면 됩니다.

 

저작자표시 비영리 변경금지 (새창열림)

※이번 시간은 해상도에 따라 레이아웃이 변형되는 반응형 레이아웃에 대하여 알아보겠습니다.

다양한 기술과 디바이스들이 나오면서 화면의 크기들도 천차만별로 늘어나고 있습니다. 레이아웃을 일반적인 모니터 해상도 크기에 맞춘다면 그보다 상대적으로 작은 태블릿이나 핸드폰으로 화면을 보기에는 불편함이 있을 수 있습니다.

화면해상도에 따라서 레이아웃을 변경해 줌으로써 편의성과 디자인을 확보할 수 있을 것입니다. 

목차

1. 반응형 웹

2. CSS

3. BODY

 

1. 반응형 웹

 

@반응형 레이아웃이란?

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법입니다.

최근에는 모바일 사용자가 증가함에 따라 모바일 퍼스트 개념을 중요시하는 추세입니다.

웹 개발 시 모바일에 맞게 디자인 후 타 해상도에 맞추어 추가 개발을 진행하는 방식을 선호하고 있다고 합니다.

간단하게 레이아웃을 구성해 보고 코드를 해석해 보겠습니다.

 

-일반적인 전체 해상도에 대한 레이아웃 화면입니다. 

 

-1025px이상, 1280px이하일 때에 보이는 레이아웃 화면입니다.

태블릿에 적합하도록 구현해 보았습니다.

 

-768px이상, 1024px이하일 때에 보이는 레이아웃 화면입니다.

모바일에 적합하도록 구현해 보았습니다.

 

 

2. CSS

  <style>
    * {box-sizing: border-box;}
    h1,h2,ul,li,p,div {
        margin: 0px;
        padding: 0px;
    }
    li {list-style: none;}
    .clear::after {
        content: '';
        display: block;
        clear: both;
    }
    a {
        text-decoration: none;
        color: #333;
        line-height: 1.5;
    }
    body {
        background-color: #f1f1f1;
        font-size: 13px;
    }
    header {background-color: coral;}
    h1 {
        color: white;
        padding: 10px;
        font-size: 25px;
    }
    .lnb li {
        margin: 10px;
        padding: 10px;
        background-color: lightgreen;
    }
    .content {padding: 20px;}
    h2 {font-size: 20px;}
    .ext {
        margin: 10px;
        padding: 20px;
        background-color: lightgreen;
    }
    footer {
        padding: 10px; background-color: #aaa;
    }

    @media (min-width:768px) and (max-width:1024px) {
        .lnb {
            float: left;
            width: 25%;
        }
        .content {
            float: left;
            width: 75%;
        }
        .aside {
            clear: both;
        }
    }
    @media all and (min-width:1025px) {
        .wrap {
            max-width: 1280px;
        }
        .lnb {
            float: left;
            width: 20%;
        }
        .content {
            float: left;
            width: 50%;
        }
        .aside {
            float: right;
            width: 30%;
        }
    }
  </style>

 

@1025px이상, 1280px이하 적용 레이아웃

    @media all and (min-width:1025px) {
        .wrap {
            max-width: 1280px;
        }
        .lnb {
            float: left;
            width: 20%;
        }
        .content {
            float: left;
            width: 50%;
        }
        .aside {
            float: right;
            width: 30%;
        }
    }

-media 태그를 사용하여 최소 1025px(min-width:1025px)로 최솟값을 지정하여 주었고 최댓값은 1280px로 지정하여 1025~1280px의 범위를 갖게끔 설정하였습니다.

그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하여 좌측 정렬이 되도록 하고 class aside는 float:right를 적용하였습니다.

 

@768px이상, 1024px이하 적용 레이아웃

    @media (min-width:768px) and (max-width:1024px) {
        .lnb {
            float: left;
            width: 25%;
        }
        .content {
            float: left;
            width: 75%;
        }
        .aside {
            clear: both;
        }
    }

-media 태그를 사용하여 최솟값을 768px로, 최댓값은 1024px로 지정하여 768~1024px의 범위를 갖게끔 설정하였습니다. 그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하고 class aside는 float 설정을 해제, 비율을 조정해서 세로로 보이도록 수정하였습니다.

 

3. BODY

<body>
    <div class="wrap">
        <header>
            <h1>Musee d'Orsay</h1>
        </header>
        <div id="container" class="clear">
            <div class="lnb">
                <ul>
                    <li><a href="#">작가의 작품</a></li>
                    <li><a href="#">작가의 시대</a></li>
                    <li><a href="#">작가의 일생</a></li>
                </ul>
            </div>            
            <div class="content">
                <h2>PICTURES</h2>
                <p><a href="#">피리부는 소년</a> <br><a href="#">고흐의 방</a><br><a href="#">황색 그리스도가 있는 화가의 자화상</a><br><a href="#">오페라좌의 관현악단</a><br><a href="#">만종</a><br><a href="#">제비꽃 장식을 단 베르트모리조</a><br><a href="#">피리부는 소년</a> <br><a href="#">고흐의 방</a><br><a href="#">황색 그리스도가 있는 화가의 자화상</a><br><a href="#">오페라좌의 관현악단</a><br><a href="#">만종</a><br><a href="#">제비꽃 장식을 단 베르트모리조</a></p>                
            </div>
            <div class="aside">
                <ul class="ext">
                    <li><h2>Workshop Go</h2><a href="#">Life drawing workshop</a></li>
                    <li><h2>Summer Exhibition</h2><a href="#">A-level Summer Exibition Online 2010</a></li>
                    <li><h2>RA Collection</h2><a href="#">RA Collections</a></li>
                </ul>
            </div>
        </div>
        <footer>
            <p>&copy;2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
        </footer>
    </div>
</body>
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

CSS에 자주 사용되는 속성(2)  (0) 2023.03.07
CSS에 자주 사용되는 속성(1)  (0) 2023.03.03
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24

※이번 시간은 CSS에서 자주 사용되는 속성 중 font와 border를 다루어 보려 합니다.

font 속성은 글자의 크기, 굵기, 글꼴 등을 정의하여 주는 속성이며 border는 테두리의 속성값을 정할 수 있는 속성입니다. 

저번 시간에 다루었던 width, height와 padding, margin과 같이 많이 사용되는 속성들입니다. 

목차

1. FONT

2. BORDER

 

1. FONT

※ font 속성은 글자의 크기, 굵기, 글꼴 등을 정의하여 주는 속성입니다. 

크게 6가지의 속성을 가지며 글자의 색상은 따로 font 속성의 하위가 아닌 color 속성으로 지정할 수 있습니다.

font-style 이탤릭체 등의 글꼴의 스타일 지정
font-weight 글자 두께
font-variant 글꼴 변형 (소문자를 대문자로 바꾸는 등의)
font-size 글자 크기
line-height 줄 간격
font-family 글꼴 (굴림, 돋움, …)

 

@font-style

※font-style은 폰트의 표시 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임 꼴로 표시하는 italic과 oblique가 있습니다.

 

@코드로 보기
    <title>font 예제</title>
    <style>
        #ex1 {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>기본</p>
    <p id="ex1">이텔릭체</p>
</body>
</html>

 

 

@font-weight

※font-weight는 폰트가 표시되는 굵기를 지정하는 속성입니다.

100~900 사이의 굵기 단계를 표시하는 수치값이나 normal, bold 등의 키워드로 선언할 수 있습니다. 

 

@코드로 보기
    <title>font 예제</title>
    <style>
        #ex1 {
            font-weight: 100;
        }
        #ex2 {
            font-weight: 700;
        }
        #ex3 {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>기본</p>
    <p id="ex1">굵기 100</p>
    <p id="ex2">굵기 700</p>
    <p id="ex3">bold 속성</p>
</body>
</html>

 

@font-variant

※font-variant는 영문 폰트의 소문자 표시 형태를 변경하는 속성입니다.

  • font–variant–position : 폰트의 표시 위치를 지정하는 속성, 화학식의 윗첨자, 아랫첨자 등과 같은 형태
  • font–variant–ligatures : 발음 기호 형태와 [æ] 같은 묶음 표시 형태를 표시하는 속성
  • font–variant–caps : 대소 문자 형태를 변경하는 속성
  • font–variant–numeric : 분수나 회계용 숫자 등의 표시 형태를 변경하는 속성
  • font–variant–alternates : 폰트의 장식 요소나 특수 문자의 표시 형태를 변경하는 속성
  • font–variant–east–asia : 한자나 일본어의 폰트를 약자 형식으로 변경할 수 있는 속성

 

@font-size

※font-size는 폰트의 크기를 지정하는 속성으로, xx-small, x-small, small, medium, large, x-large, xxlarge과 같은 절대 크기와 smaller, larger와 같은 상대 크기 등을 사용할 수 있습니다. (일반 웹 페이지에서는 px를 사용)

 

@font-family

※font-family는 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며 복수 지정 시에는 (,)로 구분합니다. 지정된 순서대로 표시할 수 있는 폰트를 찾게 됩니다.

저장되어 있는 폰트 이외에도 URL을 통하여 공유된 폰트를 사용할 수도 있습니다.

 

@코드로 보기
    <style>
        body {
            font-family: '궁서';
        }
    </style>

위 코드처럼 저장되어 있는 폰트를  사용하거나

 
@코드로 보기
    <style>
        @font-face {
            font-family: 'LOTTERIADDAG';
            font-weight: normal;
            font-style: normal;
        }
        body {
            font-family: 'LOTTERIADDAG';
        }
    </style>

URL을 통하여 공유된 폰트 사용이 가능합니다.

 

 

2. BORDER

※border는 테두리의 속성값을 정할 수 있는 속성입니다.

border-top, right, bottom, left 방식으로 방향마다 다른 속성값을 정하여 줄 수 있으며 축약형 명령어로 색, 두께, 스타일 등을 한 번에 지정하여 줄 수 있습니다. 

  • border-width : 선의 두께를 정합니다. 기본값은 medium입니다. 지정된 값 또는 px 등의 수치로 입력합니다.
  • border-style : 선의 모양을 정합니다. 기본값은 none입니다.
  • border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 색(color)입니다.
  • border-radius : 테두리의 굴곡정도를 정합니다. px, % 등의 수치로 입력합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

@border-width

-medium, thick, thin, length, initial, inherit의 기본값을 가지며 px 등의 수치로도 입력합니다.

 

@border-style

  • none  :  기본값 표시하지 않음
  • solid : 실선으로 표시
  • dotted : 점선으로 표시
  • double : 이중 실선으로 표시
  • ridge : 돌출된 선으로 표시
  • groove : 들어간 선으로 표시
  • inset : 보더 안쪽이 들어간 선으로 표시
  • outset : 보더 안쪽이 돌출된 선으로 표시
  • dashed : 파선으로 표시
  • hidden : 표시하지 않음

 

@코드로 보기
    <style>
        body {
            text-align: center;
        }
        #box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 5px;
        }
    </style>

 

200*200px 크기의 테두리, 2px굵기의 실선, 검은색의 테두리 속성값, 5px의 테두리 굴곡 적용

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 - 반응형 레이아웃 만들기  (0) 2023.03.14
CSS에 자주 사용되는 속성(1)  (0) 2023.03.03
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24

※CSS(Cascading Style Sheet)는 HTML 문서의 스타일이나 레이아웃 등 디자인 서식을 작성하는 언어

 

※공부를 진행하다 보니 CSS의 속성 중 사용빈도, 활용도가 높은 속성들이 정리가 되었습니다.

그래서 이번 시간은 자주 사용되는 속성들을 자세히 파해쳐볼까 하여 준비하였습니다.

이 부분도 내용이 많은 편이기 때문에 파트를 나누어 정리해 보도록 하겠습니다.

(1) 편에선 width와 height, margin과 padding 속성에 대하여 정리해 보았습니다.

목차

1. width와 height

2. margin과 padding

 

1. width와 height

※width와 height속성은 단어의 뜻처럼 가로, 세로의 길이를 의미합니다. 값의 단위는 % 와 px, vw와 vh가 있습니다. px는 픽셀 값을 말하며 % 는 상위 컨테이너에서 차지하는 비율, vw와 vh는 html, body에 대한 비율을 말합니다.

width, height 속성은 padding, borders, margins 가 포함된 길이가 아닙니다. padding, borders, margins과과 별개의 넓이와 높이 값을 가집니다.

 

@속성

  • auto : 브라우저가 너비와 높이를 계산한다. 기본값이다.
  • length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
  • %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다.
  • inherit : 부모 요소로부터 값을 상속받는다.
  • VW, VH : html, body의 너비와 높이값에 대한 비율로 적용한다.
  • max-width, max-height : 최대로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이하로만 사이즈가 적용됩니다.
  • min-width, min-heigth : 최소로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이상으로만 사이즈가 적용됩니다.

 

 

2. margin과 padding

※margin과 padding 속성은 각각 외부여백과 내부여백을 의미합니다. border를 기준으로 보면 border와 content 사이의 여백을 padding, border와 다른 요소와의 여백을 margin이라 합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

위의 코드처럼 content자체의 크기는 100*100이지만 1px크기의 border와의 내부여백 10px, border를 기준으로 한 외부여백이 20px로 적용된 것을 확인할 수 있습니다.

margin의 경우 위의 사진처럼 요소가 세로로 배치되어 있을 시 서로의 margin값을 공유하여 하나의 값으로 적용되며 두 요소의 margin값이 다르다면 더 큰 값으로 적용합니다. 

 

그러나 가로로 배치된 경우에는 요소 각각의 margin값이 적용되어 첫 번째 요소의 값과 두 번째 요소의 값을 합친 크기의 여백이 생기게 됩니다. 이점을 유의하여 배치해야 할 것입니다.

 

 

@margin을 이용한 가운데 정렬방법

            margin: 0px auto;

위 코드처럼 상단, 하단에 대한 값을 주고 우측, 좌측에 대한 값을 auto로 지정하면 좌, 우 여백을 같은 값으로 적용하여 요소가 가운데로 정렬됩니다.

 

 

 

@속성 값 입력 방법

            padding: 10px; /*top right bottom left 각각 10px로 적용*/
            padding: 10px 20px; /*top,bottom이 10px, right,left가 20px로 적용*/
            padding: 10px 20px 30px; /*top이 10px right,left가 20px bottom이 30px*/
            padding: 10px 20px 30px 40px; /*top right bottom left 순서로 적용*/

 

CSS에서 box형태의 속성값들은 거의 상단, 하단, 우측, 좌측의 순서로 값이 입력됩니다.

값이 하나일 때에는 전체 값이 적용되며 두 개일 경우 상단과 하단, 우측과 좌측으로 묶여 적용됩니다.

세 개일 경우는 상단, 우측과 좌측을 묶고 하단으로 적용되어 상단 10px, 우측, 좌측 20px, 하단 30px 값이 적용되는 것을 볼 수 있습니다. margin도 이와 같은 방식으로 적용되며 대부분의 box형태의 속성값들이 이와 같은 방식을 사용합니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 - 반응형 레이아웃 만들기  (0) 2023.03.14
CSS에 자주 사용되는 속성(2)  (0) 2023.03.07
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24

+ Recent posts

티스토리툴바