'Front-End'에 해당되는 글 53건

  1. 2019.06.01 JavaScript - 함수
  2. 2019.05.30 미디어 쿼리와 뷰포트
  3. 2019.05.29 픽셀을 %로 바꾸기 - 가변그리드
  4. 2019.05.28 웹 호스팅 설정 정보
  5. 2019.05.27 반응형 웹 기본 개념 이해하기
  6. 2019.05.25 javaScript 반복문
  7. 2019.05.24 javascript 조건문
  8. 2019.05.23 javascript 연산자, 비교문

JavaScript - 함수

Front-End/javascript 2019. 6. 1. 11:08

함수

 

하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

함수의 장점은 재사용성, 유지보수의 편리성, 가독성이 있다.

 

 

 

함수의 형식

 



  function 함수명 ( [인자....[,인자] ] ) { 
코드
return 반환값
  }

 

 

함수 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type ="text/javascript">
 
function numbering(){ //1~19까지 출력 하는 함수를 4번 호출 , <br/>은 줄바꿈
    var i = 0;
    while(i<20){
        document.write(i+"<br/>");
        i += 1;
    }
}
numbering();
numbering();
numbering();
numbering();
 
 
</script>
</body>
</html>
 cs

 

 

 

함수의 다른 정의 방법

출력값은 동일함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type ="text/javascript">
 
numbering = function (){ //function numbering()과 동일한 방법
    var i = 0;
    while(i<20){
        document.write(i+"<br/>");
        i += 1;
    }
}
numbering();
numbering();
numbering();
numbering();
 
 
</script>
</body>
</html>
 cs

 

 

함수의 다른 정의 방법

출력값은 동일함.

익명함수 (함수의 이름이 없고, 생성하자마자 호출함)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type ="text/javascript">
 
(function (){
    var i = 0;
    while(i<20){
        document.write(i+"<br/>");
        i += 1;
    }
})(); //함수의 이름이 없고 생성하자마자 ();로 호출함.. 이름이 없어서 익명함수라 한다. 일회성으로 호출할때 사용
numbering();
numbering();
numbering();
numbering();
 
 
</script>
</body>
</html>
 cs

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 객체  (0) 2019.06.09
javascript - 배열  (0) 2019.06.01
javaScript 반복문  (0) 2019.05.25
javascript 조건문  (0) 2019.05.24
javascript 연산자, 비교문  (0) 2019.05.23
:

미디어 쿼리와 뷰포트

Front-End/반응형 웹 2019. 5. 30. 22:19

 

 

 

-미디어 쿼리-

 

화면의 크기나 환경에 따라 웹 사이트를 변경하는 기술

 

 

 

-미디어 쿼리의 기본 문법-

 

  @media [only 또는 not] [미디어 유형] [and 또는, 콤마] (조건문) {실행문} 

 

미디어 쿼리 구문은 대, 소문자를 구별하지 않습니다.

 

  
  @media


  미디어 쿼리 문법의 시작을 알리는 부분입니다.




  [only 또는 not]


  only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 입니다.
  not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 입니다.
  예를 들어 'not tv' 일 경우 tv를 제외한 모든 미디어 유형에만 적용합니다.

 

 

 

-미디어 유형-

 

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하는 것이므로 @media 속성 다음에 미디어 유형을 알려줘야 합니다.

미디어 유형은 생량이 가능하며 생략 시에는 all 키워드처럼 작동합니다.

 

 기기명 설명 
all  모든 장치 
 print 인쇄 장치 
 screen 컴퓨터 화면 장치 또는 스마트 기기의 화면 
 tv 영상과 음성이 동시에 출력되는 장치 
 projection 프로젝터 장치 
 handheld 손에 들고 다니는 소형 장치 
 speech 음성 출력 장치 
 aural 음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치) 
 embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치) 
tty 디스플레이 기능이 제한된 장치 
 braille 점자 표시 장치 

 

 

 

  
  [and 또는,콤마]


  and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다.
  ,콤마는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것을 해석하라는 의미입니다.
  and 또는 ,콤마 선언 역시 생략할 수 있습니다.


  @media A and B {실행문}


  @media A, B {실행문}

 

 

 

 

 

 

 

 

 

 

  
  (조건문)
 
  (조건문)은 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다.
  (조건문)은 and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략할 수 있습니다.
  (조건문)에 들어올 수 있는 조건문은 다음 표를 참고 하세요.
 
  @media (min-width:320px) {실행문}    -> 가로 너비가 320px 이상일 때 실행문을 실행합니다.
 
  @media (min-width:320px) and (max-width:768px) {실행문}    => 가로 너비가 320px 이상이고 768px 이하 일 때 실행문을 실행합니다.
 

 

 

 

 

 

조건문  설명  조건값  min/max 사용 여부 
width   웹 페이지의 가로 너비값 width 속성에서 사용할 수 있는 모든 속성값  사용함 
 height  웹 페이지의 세로 높잇값
 device-width 기기의 가로 너빗값 
device-height  기기의 세로 높잇값 
 orientation 기기의 화면 방향  portrait (세로) 
landscape (가로)		 사용 안 함 
aspect-ratio 화면 비율 브라우저 화면 비율 (1),
브라우저 종횡비 (16/9),
브라우저 해상도 (1280/720)		  사용함
device-aspect-ratio 단말기의 화면 비율    기기 화면 비율 (1),
기기 종횡비 (16/9),
기기 해상도 (640/320)
 color 기기의 비트 수  8 (bit 단위) 
color-index 기기의 색상 수  128 (색상 수 단위) 
 monochrome 기기가 흑백일 때 픽셀당 비트 수  1 (bit 단위) 
resolution 기기의 해상력  300dpi / dpcm 
 scan  TV의 스캔 방식 progressive / interlace   사용 안 함
 grid 기기의 그리드 / 비트맵  0 (비트맵 방식) / 1 (그리드 방식)

 

 

 

  
  {실행문}


  {실행문} 은 앞의 조건들이 모두 사실일 때 실행되는 실행문 입니다.
  {실행문} 에는 일반적으로 사용하는 CSS 코드를 작성합니다.


  @media {실행문}

 

 

 

미디어 쿼리 적용 - 링크 방식 -

 

미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를

작성해서 <link> </link> 태그로 CSS 파일을 연결하여 적용해야 합니다.

 

<link rel = "stylesheet" href = "mediaqueries.css">

 

이 방식은 HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적 입니다.

 

미디어 쿼리를 적용할 수 있는 기타 방식들

 

 

링크 방식 2

 

  <link rel = "stylesheet" media = "all and (min-width:320px)" href = "style320px.css"> 

 

링크 방식 2sms <link> , </link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS 파일을 연결하는 방식인데,

이 방식은 되도록 사용하지 않는 것이 좋다.

조건이 여러 개로 나눠지게 되면 그 만큼 CSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와야 하므로 웹 사이트의 속도도 느려지기

때문입니다.

 

 

문서 내에 작성하는 방식

 



  <head>
  <style>
  @media all and (min-width:320px) {실행문}
  </style>
  </head>
  <body>


  </body>

 

문서 내에 작성하는 방식은 HTML 문서 내에 미디어 쿼리를 작성하는 방식인데, 이 방식은 피하는게 좋다.

그 이유는 CSS 코드를 문서 내에 작성하게 될 경우 문서의 용량이 커지고, 이렇게 커진 용량 때문에 속도가 느려져 웹 사이트를 방문하는

사용자가 웹 사이트를 빨리 볼 수 없기 때문입니다.

 

 

 

-미디어 쿼리 사용시 주의 사항-

 

 

띄어 쓰기 주의하기

 

예를 들어 논리 연산자 중 하나인 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄워줘야 합니다.

만약 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않습니다.

 

 

접두사인 min/max 사용 시 작성 순서 주의하기

 

미디어 쿼리를 사용할 때는 min/max 와 크기 조건문 (width) 을 사용해서 해상도별로 웹사이트를 다양하게 보여줄 수 있습니다.

그런데 min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, max를 사용할 때는 반드시 크기가 큰 순서대로

작성해야 합니다.

min을 사용할 때 크기 (width)가 작은 순서대로 작성해야 하는 이유는 min은 최소 또는 그 이상이라는 뜻으로,

점차 커지는 것을 의미하기 때문에 반드시 작은 순서부터 큰 순서로 작성해야 합니다.

반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에 max를 사용할 때는 반드시 큰 순서부터 작은

순서로 작성해야 합니다.

 



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


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


  @media all and (min-width:1024px) {실행문}

 

 

미디어 쿼리로 브라우저 크기 감지 시 주의하기

 

미디어 쿼리를 이용해서 크기를 감지할 때는 보이는 영역을 뜻하는 뷰포트 크기를 기준으로 감지한다.

 

 

 

  
Inline 속성


Inline 속성이란, 쉽게 말해서 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 입니다.
대표적인 Inline 속성을 가진 태그로는 <a> 태그가 있습니다.
상, 하단 외부 여백 속성을 정의해도 적용되지 않습니다.
인라인 요소의 상, 하 여백은 magin이 아니라 line-height 속성에 의해 발생합니다.
아래 예문을 보면 <a> 태그들이 줄을 넘기지 않고 한 줄에 연속해서 붙는 결과를 볼 수 있습니다.




 링크 링크 링크 링크






Block 속성


Block 속성은 Inline 과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다.
대표적인 블록 요소로 <p> 태그가 있습니다.




 첫번째 문장입니다.


 두번째 문장입니다.
 




Inline와 Block의 합친 속성


inline-block 라는 속성은 인라인과 같이 한줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다.
 

 

 

 

 

-미디어 쿼리 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 
<!-- meta 태그를 이용해서 화면의크기나 배율을 조절 -->
 
<title>Document</title>
<style>
*{margin:0; padding:0;}
 
 
#wrap{
width:90%; //아이디가 wrap인 <div> 태그에 가로 너빗값을 90%로 설정하고, 마진값과 선값도 설정한다.
margin:0 auto; 
border:4px solid #000;
}
 
 
 
#wrap div{
display:inline-block;
height:100px;
}
 
 
#wrap div:first-child{
background:#f45750; //자식 태그들인 <div> 태그에는 공통적으로 display 속성의 값을 inline-block으로 설정하고,
} //높잇값을 100px로 설정합니다. 마지막으로 각각의 배경색을 설정합니다.
 
 
#wrap div:nth-child(2){
background:#40b0f9;
}
 
 
#wrap div:nth-child(3){
background:#00d2a5;
}
 
 
#wrap div:nth-child(4){
background:#ff884d;
}
 
 
#wrap div:last-child{
background:#464646;
}
 
 
@media all and (min-width:320px){
 
#wrap div{
width:100%; //브라우저의 크기가 320px 이상일 때 모든 박스의 가로 너빗값을 100%으로 설정합니다.
}
}
 
 
 
 
@media all and (min-width:768px){
#wrap div{
width:50%; // 브라우저의 크기가 768px 이상일 때 첫 번째 박스부터 네 번째 박스까지는 너빗값을
} // 50%로 설정합니다.
 
 
 
 
#wrap div:last-child{
width:100%;
} //마지막 박스만 너빗값을 100%로 설정합니다.
}
 
 
 
@media all and (min-width:1024px){
#wrap div{ //브라우저의 크기가 1024px 이상일 때는 첫 번째 박스부터 네 번째 박스까지는
 
width:20%; //너빗값을 20%로 설정합니다.
}
 
 
 
#wrap div:last-child{
width:20%; //마지막 박스의 너빗값을 20%로 설정합니다.
}
 
 
}
    
</style>
</head>
<body>
    <div id="wrap">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
</body>
</html>
 cs

 

 

 

 

 

-뷰포트-

 

화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고,

스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.

그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는

문제가 발생할 수 있습니다.

이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다.

 

반응형 웹을 제작할 때 사용하는 뷰포트의 기본 메타 태그



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

 

 

-뷰포트 속성-

 

속성명 속성값  속성 설명 
width device - width, 양수  뷰포트의 너비를 지정합니다. 
height  device - height, 양수  뷰포트의 높이를 지정합니다. 
initial - scale  양수  뷰포트의 초기 배율을 지정합니다.
기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시 
user - scalable yes, no  뷰포트의 확대/축소 여부를 지정합니다.
기본값은 yes입니다.
반대로 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다. 
mininum - scale 양수  뷰포트의 최소 축소 비율을 지정합니다.
기본값은 0.25 입니다. 
maximum - scale 양수 뷰포트의 최대 확대 비율을 지정합니다.
기본값은 5.0 입니다. 

 

 

스마트 기기의 뷰포트 영역 확인하기

http://dnsdk300.dothome.co.kr/viewport

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > 반응형 웹' 카테고리의 다른 글

픽셀을 %로 바꾸기 - 가변그리드  (0) 2019.05.29
웹 호스팅 설정 정보  (0) 2019.05.28
반응형 웹 기본 개념 이해하기  (0) 2019.05.27
반응형 웹 학습 일정  (0) 2019.05.22
:

픽셀을 %로 바꾸기 - 가변그리드

Front-End/반응형 웹 2019. 5. 29. 23:02

가변 그리드 공식

 

가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다.

 

  (가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 % 값

 

예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px 이고, 가변 크기로 만들 박스의 가로 너비가 300px 이라면 노란 박스를 가변

크기로 만들기 위한 공식은 다음과 같습니다. (곱하기 100은 백분율을 표현하기 위함)

 

  (300px ÷ 960px) X 100 = 31.25%

 

 

서로 다른 크기의 박스를 가변 크기로 변환하기

 

-예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
 
//모든 태그를 감싸고 있는 박스를 만들기 위해 'wrap' 라는 아이디를 가진 <div> 태그를 작성
wrap 또는 wrapper이라는 요소로 박스 전체를 감싸면 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있을 뿐만아니라
브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수도 있기 때문.
 
#wrap{ //wrap 박스는 가장 상위의 박스이므로 가변 그리드 계산기 기준이 될 박스가 없기 때문에 (가장크기 때문)
    width:90%; //임의로 설정한 값인 90%로 설정
    /*960px*/
    height: 500px;
    margin:0 auto;
    border:4px solid #000;
}
 
 
본래 크기인 900px를 가변 크기로 변환하기 위해 container 박스의 부모 박스인 wrap 박스의 가로 너비를 900px ÷ 960px 공식을
이용해서 얻은 값인 93.75%로 설정한다.
 
 
.container{
    width:93.75%;
    /*900px ÷ 960px*/ //공식을 주석으로 적어놓으면 나중에 코드를 확인할 때 편하다.
    height: 492px;
    margin:0 auto;
    border: 4px solid #000;
}
 
.container div{
    display: inline-block; //자식 박스의 가변 크기 설정, inline-block는 display 속성의 값 중 inline 속성값처럼
    height: 100%; //요소들이 한 줄로 보이고, <block> 태그에 적용할 수 있는 속성들도 사용할 수 있는 속성값입니다.
}
 
.container div:first-child{
 
첫 번째 <div> 태그의 가로 너비인 300px를 가변크기로 변환합니다.
300px ÷ 900px 공식을 이용해서 얻은 값인 33.3%를 가로 너비로 설정 900px는 자신을 감사고 있는 부모 박스의 가로 너비
    
width:33.3333333%;
    /*300px ÷ 900px*/
    background:#e75d5d;
}
 
두 번째 <div> 태그 역시 가로 너비인 600px에 동일한 공식을 이용해서 가변 크기인 66.6%를 가로 너비로 설정합니다.
 
 
.container div:first-child+div{
    width:66.66666667%;
    /*600px ÷ 900px*/
    background: #2dcc70;
 
}
 
</style>
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div></div><div></div>
        </div>
    </div>
</body>
</html>
 cs

 

 

 

 

-웹 사이트의 요소에 마진과 가변 패딩 이해하기-

 

 

 

 

 



  마진이란?


  어떠한 물체와 물체 사이의 빈 공간을 말합니다.

  웹 사이트를 만들 때도 이러한 여백이 필요합니다.
  예를 들어 웹사이트 구조를 보면 사이 사이 벌어져 있는 공간들이 잇는데, 이것을 여백 또는 간격이라고 합니다.




  패딩(두께)이란?


  면과 면 사이가 물체나 공간 등으로 채워져 있는 것을 말하며, 속 또는 충전재라고도 합니다.
  우리가 겨울에 입는 패딩 점퍼의 면과 면 사이가 오리털로 채워져 있듯이 패딩은 면과 면 사이에 어떠한 것이
  채워져 있는 상태를 말합니다.
  웹 사이트에서도 특정 요소에 두께를 만들거나 빈 공간 또는 간격을 만들 때 마진과 패딩이 사용 됩니다.

 

 

 

반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다.

기존의 고정되어 있는 마진 (여백) 을 변할 수 있게 설정해줘야 합니다.

가변 마진은 가변 그리에서 사용했던 공식과 같습니다.

 

  (가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 마진값

 

 

-가변 패딩을 적용하는 두 가지 방법-

 

 

-기본 방법-

 

가변 그리드 공식을 이용해서 가변 패딩으로 적용

 

  (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값

 

 

-제한적인 조건이 있을 때-

 

박스에 패딩을 적용하더라도 박스의 정해진 너빗값 이상이 되지 말아야 하는 경우에 이용하는 방법입니다.

 

  (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값

 

 

-가변 패딩 예제-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{ /*wrap라는 아이디를 가진 태그를 만든다.*/
    width:90%;   /*너비는 90%로 한다.*/
    /*960px*/
    height:500px; /*높이는 500px로 입력해 스타일을 지정*/
    margin:0 auto; //마진값과 선값을 입력한다.
    border:4px solid #000;
}
 
#wrap div{
    width:31.25%; //300px를 가변 크기로 설정한다.
    /*300px ÷ 960px*/ //공식을 이용해 31.25값을 얻음
    display: inline-block;
}
 
#wrap div:first-child{ //자식박스 중 첫번째 박스에 50px크기의 가변 패딩을 적용, 50px ÷ 960px 공식을 이용해서
    padding:50px 5.208333%; //얻은 값을 패딩값으로 설정, 왼쪽과 오른쪽 패딩값이 실제로는 50+50이 되서 총 100px크기가 된다.
    /*50px ÷ 960px*/
    background:#1f518b;
}
 
#wrap div:first-child+div{ //자식박스 중 두번째 박스에 130px 크기의 가변 패딩을 적용한다. 130px ÷ 960px 공식을 이용해서
    padding:130px 13.541666%; //얻은 값을 패딩값으로 설정, 그러면 왼쪽과 오른쪽 패딩값이 130+130이 되어 총 260 크기의
    /*130px ÷ 960px*/ //가변 패딩이 적용됨
    background: #f7e041;
}
 
</style>
</head>
<body>
    <div id="wrap">
    <div></div><div></div>
    </div>
</body>
</html>
 cs

 

 

 

 

 

-가변 폰트 이용-

 

기존의 웹사이트를 개발할 때는 고정 단위인 픽셀(px)를 많이 사용했습니다.

하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다.

웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문입니다.

따라서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다.

em의 단위는 대문자 M의 너비를 1em으로 표현한 것으로, 16px이 1em에 해당합니다.

 

반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때 상속 문제를 해결해주는 방법을 가변 폰트라고 합니다.

가변 폰트는 지금까지 이용한 가변 그리드 공식을 이용해서 적용할 수 있다.

 

  (가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값 

 

 

-rem 단위-

 

em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다.

그래서 자식 박스의 글자 크기를 지정할 때 공식을 이용하여 글자 크기를 지정해야 하는 등 복잡해집니다.

rem 단위는 최상위, 즉 웹 문서의 시작인 <html>, </html> 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않아

유용하게 사용할 수 있는 단위 중 하나입니다.

 

 

- vw(viewport width) 단위 -

 

vw 단위는 웹 브라으저의 너비를 100을 기준으로 하여 크기를 결정하는 단위입니다.

 

 

 

  (vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) ÷ 100 = 크깃값

 

 

 

 

- vh(viewport height) 단위 -

 

vh 단위는 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위입니다.

 

  (vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값) ÷ 100 = 크깃값

 

 

- vmin (viewport minimum) 단위 -

 

vmin 단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위입니다.

만약 글자 크기를 5vmin으로 설정하면 글자 크기는 웹 브라우저의 너비, 높이 중 작은 쪽을 100을 기준으로 해서 결정합니다.

 

 

- vmax (viewport maximum) 단위 -

 

vmax 단위는 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위입니다.

만약 글자 크기를 5vmax로 설정하면 글자 크기는 브라우저의 너비와 높이 중 큰 쪽을 100으로 하고, 기준으로 해서 결정합니다.

 

 



  
  - width와 max-width의 차이점 -


  width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있습니다.
  width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 속성값을 100%로 설정할 경우
  요소의 기본 크기 이상으로는 크기가 조절되지 않습니다.

 

 



  - 상/하 퍼센트 패딩값의 기준 - 


  상/하 퍼센트 패딩 값은 해당 요소의 부모 요소 가로 너비를 기준으로 합니다.
  보통은 부모 요소의 높이를 기준으로 할 것으로 생각하지만, CSS 스펙을 살펴보면 상/하 퍼센트 패딩 값은 부모 요소의 너빗값을
  기준으로 한다고 명시되어 있습니다. 헷갈릴수도 있으니 반드시 기억!!

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > 반응형 웹' 카테고리의 다른 글

미디어 쿼리와 뷰포트  (0) 2019.05.30
웹 호스팅 설정 정보  (0) 2019.05.28
반응형 웹 기본 개념 이해하기  (0) 2019.05.27
반응형 웹 학습 일정  (0) 2019.05.22
:

웹 호스팅 설정 정보

2019. 5. 28. 20:58

보호되어 있는 글입니다. 내용을 보실려면 비밀번호를 입력하세요.


반응형 웹 기본 개념 이해하기

Front-End/반응형 웹 2019. 5. 27. 21:31

 

 

-반응형 웹-

 

PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다.

예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로

변경하여 보여주고, 큰 화면을 가진 기기에서는 웹 사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줍니다.

이처럼 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다.

 

 

 

-반응형 웹의 장점-

 



  유지보수가 간편


  모바일 점유율의 증가


  마케팅에 유리


  검색엔진 최적화가 가능하다.


  미래 지향적 기술이다.

 

 

예제 파일 다운로드

http://www.easyspub.co.kr/Main/PUB

 

 

 

 

-호스팅 서버 준비하기-

 

호스팅 서버는 인터넷 속 저장 공간으로, 이 저장공간을 사용하려면 호스팅 서비스 업체에 돈을 지불하고 일정 용량을 빌려야 한다.

인터넷을 통해 이 호스팅 공간과 내 컴퓨터가 연결되며, 이 공간에 이미지나 동영상을 올려놓을 수 있습니다.

 

 

무료 호스팅 신청 사이트

http://www.dothome.co.kr

 

 

 

-서버의 종류-

 

1. 직접 운영하는 서버

 

개인이 컴퓨터를 구매하거나 빌려서 직접 저장공간을 만들어 서버를 운영하는 것.

이 서버는 개개인이 서버를 관리하고 자유롭게 수정할 수 있다는 장점이 있지만 그만큼 서버에 관한 지식이 없는 사람은 관리하기가

까다롭다는 단점이 있습니다.

 

 

2. 호스팅 서버

 

호스팅 서버는 특정 업체에서 웹 서버를 준비해 놓고 웹 서버의 일부 공간을 월 사용료를 받고 빌려주는 서비스 입니다.

호스팅 서버는 특정 업체에서 이미 기본적으로 모든 설정을 끝낸 상태이므로 월 사용료만 내면 바로 서비스를 이용할 수 있습니다.

단점은 개개인이 서버를 관리하거나 수정하기가 어렵고 서비스에 따라 다르긴 하지만 한정된 공간만 제공되므로 여러 가지 제약이 따른다는 점입니다.

 

 

3. 클라우드 호스팅

 

클라우드 호스팅이란 웹 서버와 호스팅 서버의 결합 서비스로, 웹 서버처럼 서버의 관리를 자유롭게 할 수 있고

월마다 사용한 공간만큼의 비용만 내면 됩니다.

클라우드 호스팅의 가장 큰 장점은 서버의 확장과 축소가 간편하다는 점입니다.

필요에 따라 일시적으로 저장공간을 확장할 수도 있고, 저장 공간이 필요 없게 되면 바로 축소하면 됩니다.

 

 

 

-FTP 프로그램-

 

호스팅 서버나 웹 서버에 파일을 자유자재로 옮기기위해서 사용하는 프로그램

 

 

FTP 프로그램 준비 (파일질라)

http://www.filezilla-project.org

 

 

 

-가변 그리드-

 

가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다.


-예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
 
#wrap{
width:90%px; // 가변형 크기의 박스로 변경하기위해서 %를 사용한다.
height:500px;
margin:0 auto;
background:#e65d5d;
border:4px solid #000;
}
</style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>
 cs

 

가로 너비가 넒을 때는 차이가 없지만 가로 너비를 줄이면 폭에 맞게끔 박스의 크기가 줄어든 것을 확인할 수 있다.

이것을 가변 그리드 기술이라고 한다.

 

 

 

 

  
  미디어 쿼리


  화면의 크기와 환경 감지 및 웹 사이트를 변경하는 기술.
  컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을
  제작할 때 반드시 필요한 기술이다.

 

 

  
  뷰 포트


  화면을 제어하는 기술.
  미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다.
  스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서
  화면의 크기를 정확하게 감지하지 못하기 때문에 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여
  미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용한다.

 

 

-미디어 쿼리 예제-

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
 
<style> 
@media all and (min-width:320px){
    body{
        background:#e65d5d; // 웹 브라우저의 크기가 320px 이상일 때 배경색을 빨간색으로 변경
}
}
 
@media all and (min-width:768px){
    body{
    background:#2dcc70; // 웹 브라우저의 크기가 768px 이상일 때 배경색을 초록색 계열로 변경
}
}
 
@media all and (min-width:960px){
    body{
    background:#6fc0d1; // 웹 브라우저의 크기가 960px 이상일 때 배경색을 파란색 계열로 변겅
}
}
 
 
</style>
</head>
<body>
</body>
</html>
 cs

 

 

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > 반응형 웹' 카테고리의 다른 글

미디어 쿼리와 뷰포트  (0) 2019.05.30
픽셀을 %로 바꾸기 - 가변그리드  (0) 2019.05.29
웹 호스팅 설정 정보  (0) 2019.05.28
반응형 웹 학습 일정  (0) 2019.05.22
:

javaScript 반복문

Front-End/javascript 2019. 5. 25. 20:35

반복문

 

어떤 문장을 반복해서 실행시키는 구문

 

 



  -while문 문법-


  while (조건) {
  반복해서 실행할 문장
  }

 

 



  document.write('Conding everybody <br />');      //화면에 출력되게 하는 구문 ( = 아무것도 쓰지않고 그냥 문자만 사용한 형식과 동일)
 
  = Condig everybody; <br /> 과 동일하게 출력됨

 

 



  -for문 문법-


  for (변수 초기값 지정, 조건문, 증가연산자){
        반복해서 실행할 문장 
  }
 

 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javascript - 배열  (0) 2019.06.01
JavaScript - 함수  (0) 2019.06.01
javascript 조건문  (0) 2019.05.24
javascript 연산자, 비교문  (0) 2019.05.23
javascript 주석, 줄바꿈, 여백  (0) 2019.05.23
:

javascript 조건문

Front-End/javascript 2019. 5. 24. 22:09

-조건문-

 

주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것이다.

 

 

 

-조건문의 문법-

 

조건문은 if로 시작한다.

if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 Boolean 이다.

Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

 

-예제-

 

1
2
3
if(true){
    alert('result:true'); //true 이므로 실행
}
 cs

 

 

1
2
3
if(false){
    alert('result:true'); //false 이므로 실행이 되지 않음
}
 cs

 

 

 

-else-

 

if 만으로는 좀 더 복잡한 상황을 처리하는데 부족하기 때문에 if가 거짓일 때 실행되는 구문

 

-예제-

 

1
2
3
4
5
if(false){
    alert('result:true');
}else{
    alert(2); //false 이므로 이 구문이 실행됨
}
 cs

 

 

 

-else if-

 

else 만으로는 좀 더 복잡한 상황을 처리하는데 부족하기 때문에 if가 거짓일 때, else로 다시 참,거짓을 판별하는 구문

 

-예제-

 

1
2
3
4
5
if(false){
    alert('result:true');
}else if(true){
    alert(2); //if가 false이고, else if가 true이기 때문에 2가 출력됨
}
 cs

 

 

-prompt-

 

경고창 대신 프롬프트 창이 출력되고 어떠한 값을 넣을 수 있게 하는 구문

 

-예제-

 

1
prompt('당신의 나이는?');
 cs

 

 

 

 

-예제 및 출력결과-

 

1
2
3
4
5
6
7
8
9
10
11
var id = prompt('아이디를 입력해 주세요.');
if(id=='egoing'){
    var password = prompt('비밀번호를 입력해주세요');
    if(password == '111111'){
        alert('로그인 하셨습니다.');
}else {
    alert('비밀번호가 다릅니다.');
    }
}else{
    alert('아이디가 일치하지 않습니다.');
}
 cs

 

 

 

 

-논리연산자-

 

  
  AND (&&)


  좌항과 우항이 모두 참(true) 일때 참이된다.
 

 

 

  
  OR ( ||  )


  좌우항 중에 하나라도 참(true) 라면 참이 되는 논리 연산자다.

 

 

 

-NOT 연산자-

 

  
  !


  부정의 의미로, Boolean의 값을 역전 시킨다.
  true를 false로 false를 true로 만든다.
 

 

 

조건문에 사용될 수 있는 데이터 형이 꼭 Boolean만 되는 것은 아니다.

관습적인 이유로 0은 false, 0이 아닌 값은 true로 간주된다.

아래의 예제는 2를 출력한다.

 

-예제-

 

1
2
3
4
5
6
if(0){
    alert(1)
}
if(1){
    alert(2)
}
 cs

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

JavaScript - 함수  (0) 2019.06.01
javaScript 반복문  (0) 2019.05.25
javascript 연산자, 비교문  (0) 2019.05.23
javascript 주석, 줄바꿈, 여백  (0) 2019.05.23
JavaScript 변수  (0) 2019.05.23
:

javascript 연산자, 비교문

Front-End/javascript 2019. 5. 23. 23:18

== 

 

 

 

 





  동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다.


  '=' 가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.

 

 

 

1
2
3
alert(1==2) //false
alert(1==1) //true
alert("one"=="two") //false
 cs

 

 

 

===

 



  일치 연산자로 ===좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다.
  '==='은 숫자 1과 문자 1을 다르게 인식한다.
  반면에 '=='은 양쪽의 값을 같다고 판단한다.
  바로 이것이 '정확'의 의미이다. 즉 ===은 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만
  같다고 판단하기 때문이다. 
  ==연산자 대신 ===연산자를 쓰는것을 강력하게 권한다.

 

1
2
3
alert(1=='1') //true
alert(1===1) //false
 cs

 

 

 

!=

 



  '!' 는 부정을 의미한다. '같다'의 부정은 '같지 않다' 이다.
  이것을 기호로는 '!='로 표시한다.
  아래의 결과는 '!=' 의 결과인데 ==와 정반대의 결과를 보여준다. 

 

 

1
2
3
4
alert(1!=2);   //true
alert(1!=1);   //false
alert("one"!="two");  //true
alert("one"!="one");  //false
 cs

 

 

 

!==

 

  
  '!==' 는 '!=' 와 '=='의 관계와 같다. 정확하게 같지 않다는 의미이다.

 

 

 

>

 



  좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자.

 

 

 

>=

 



  좌항이 우항보다 크거나 같다. '<='는 반대의 의미이다.
 

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

토비의 스프링 3.1 세트:스프링의 이해와 원리 + 스프링의 기술과, 에이콘출판

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

javaScript 반복문  (0) 2019.05.25
javascript 조건문  (0) 2019.05.24
javascript 주석, 줄바꿈, 여백  (0) 2019.05.23
JavaScript 변수  (0) 2019.05.23
JavaScript 숫자와 문자 -2  (0) 2019.05.22
:
◀ PREV : [1] : [2] : [3] : [4] : [5] : [6] : [7] : NEXT ▶

티스토리툴바