Skip to content

Latest commit

 

History

History
292 lines (230 loc) · 9.25 KB

0725.md

File metadata and controls

292 lines (230 loc) · 9.25 KB
Raw

오늘배운내용 # Day7_0725_화요일

출처 > poiemaweb, learnlayout

에버노트 정리 > Nayoung's Evernote_0725

  1. 웹디자인 타이포그래피
  2. [ CSS3 Layout ] 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬 (실습위주)
  3. [ CSS3 Responsive Web Design ] 디바이스별 반응형 설정방법 (실습위주)

아침

  1. title은 head태그에서 (웬만하면)마지막에 써준다.
  2. 복습 + 실습 
    float없이 translate프로퍼티로 위치 이동시키기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    
    .container{
    position: relative;
    width: 100%;
    height: 400px;
    background-color: whitesmoke;
    /* 부모를 기준으로 상대값을 잡는데, 현재 부모인 body에 height가 없으므로 적용되지 않는 것이다. */
    }
    .box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    color: #fff;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
    }

</style>
</head>
<body>
<div class="container">
    <div class="box"> text </div>
</div>
</body>
</html>

start !

1.웹디자인 타이포그래피

  • 이전에는 로컬 폰트를 사용하여 텍스트를 이미지로 만들어 사용했다.
  • 많은 트래픽을 유발하고 웹크롤러가 정보를 수집할 수 없어서 SEO관점에서도 바람직하지 않다.

1. CDN(Content Delivery Network) 링크 방식

  • 웹폰트 사용
  • 단점은 해당 제공하는 서비스가 먹통일 경우 내 사이트에도 영향이 있다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

뒤에 있는 sans-serif 나눔고딕이 없을 경우 사용하는 폰트이며, 브라우저에서 기본 제공하는 산세리프체를 사용한다는 뜻이다.

2. 서버 폰트 로딩 방식

  • CDN의 단점은 속도가 느리다.
    • 여러개의 폰트를 사용할 경우 로딩시간이 더 길어진다.
  • @font-face 규칙으로 폰트를 등록하고 font-family 프로퍼티로 폰트를 선택하여 사용할 수 있다.
  • @font-face 커스텀 폰트를 만드는 것이다.
  • 로컬 폴더에 폰트도 있어야 한다.
/* IE 9~ & all browsers */
@font-face {
  font-family: myFontName;
  src: url("myFont.woff");
}
myFontName이라고 네이밍할 수 있다.

* { font-family: myFontName, sans-serif; }
  • 브라우저 마다 지원하는 폰트 파일 형식이 다르기 때문에 아래 코드를 사용한다.
  • 가장 권장하는 방법
@font-face {
  font-family:"Nanum Gothic";
  src:url("NanumGothic.eot"); /* IE 9 호환성 보기 모드 대응 */
  src:local("☺"),             /* local font 사용 방지. 생략 가능, X로 써도 된다.. 방지를 하기 위해 무의미한 글자 넣은 것. */
      url("NanumGothic.eot?#iefix") format('embedded-opentype'), /* IE 6~8 */
      url("NanumGothic.woff") format('woff'); /* 표준 브라우저 */
}
* { font-family: "Nanum Gothic", sans-serif; }
  • 영문과 한글을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글 폰트를 지정하여야 한다. 한글 폰트부터 지정하면 영문에도 한글 폰트가 지정된다.
font-family: 'Lora', 'KoPub Batang', 'Times New Roman', serif;

2.CSS3 Layout

웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬

실습위주로 진행

##3.CSS3 Responsive Web Design

브라우저의 크기에 반응하는 웹사이트를 위한 기술

1. Responsive Web Design 개요

  • 데스크탑보다 모바일의 유입률이 높다.
  • html/css/javascript으로 네이티브 앱 제작이 가능하다.
1.1 viewport meta tag
  • ux면에서 가로 스크롤은 추천하지 않는다.
    • 익숙하지 않고, 마우스를 쓰는 유저에게는 불편하다.
    • 모바일에서는 가로스크롤이 스와이프와 혼동될 수 있으며, 익숙하지 않아서 혼란을 줄 수 있다.
  • viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다.
    • meta tag에서는 px를 생략한다.
    • 일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
1.2 @media
  • 여러 미디어 타입에 따라 각각의 스타일에 지정이 가능하다.
  • @media screen : 화면스크린
  • @media preint : 인쇄 미리보기
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    @media screen {
      * { color: red; }
    }
    @media print {
      * { color: blue; }
    }
    // 인쇄 미리보기에서는 파랗게 나온다.
  </style>
</head>
<body>
  <h1>@media practice</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

  • 반응형 웹디자인에 사용되는 핵심 기술은 @media이다.

  • @media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

  • 다음은 Media Query의 문법이다.

규칙 //
@media not|only mediatype and (expressions) {
  CSS-Code;
}

예시

  • 일반화면에서 볼 때(screen), 그리고 (최소폭이 480px일면)
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
  • 대부분 expressions에는 프로퍼티와 값이 온다.
    • 거의 width가 온다.
    • min-width나 max-width가 온다.
프로퍼티 Description
width viewport 너비(px)
height viewport 높이(px)
device-width 디바이스의 물리적 너비(px)
device-height 디바이스의 물리적 높이(px)
orientation orientation 디바이스 방향 (가로 방향: landscape, 세로방향: portrait)
device-aspect-ratio 디바이스의 물리적 width/height 비율
color 디바이스에서 표현 가능한 최대 색상 비트수
monochrome 흑백 디바이스의 픽셀 당 비트수
resolution 디바이스 해상도

Mobile First Method

/*==========  Mobile First Method  ==========*/
/* All Device */

/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {

}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {

}  
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {

}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {

}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {

}

Non-Mobile First Method

  • Mobile First Method과 차이점은 min-width냐, max-width냐.
  • max-width는 최대
  • min-width는 최소
  • 순서에 영향을 받는다.
    • 아래 코드에서 width가 1000일 경우 첫번째 해당된다.
    • width가 900일 경우 첫번째와 두번째 둘다 해당된다.
      • 이때는 순서에 영향을 받으므로 마지막에 선언된 두번째꺼에 해당해서 적용된다.
    • 큰 숫자부터 나열한다.
/*==========  Non-Mobile First Method  ==========*/


/* All Device */

/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {

}
/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {

}
/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {

}
/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

}
/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}

2. Responsive Navigation Bar

2.1 Responsive Navigation Bar - Tablet

실습위주로진행

2.2 Responsive Navigation Bar - Smartphone
  • 햄버거 메뉴 버튼을 css만으로 애니메이션 만들 수 있다.
    • checkbox로 작동을 시킨다.
    • checkbox를 생성 후 display:none;으로 애니메이션을 조정하면 된다.
    • 스닙챗 햄버거 네비게이션
    • display:none을 많이 사용한다.