시선을 사로잡는 웹 - 중급

9강. 중급: auto와 %, Negative Margins

• 1강

• width (css, 중요)

• border, padding은 width에 추가된다.

• box-sizing: border-box  로하면 포함시키지 않는다.  합쳐서 지정된 width값을 이룬다.

• width:100%는 부모의 너비값을 말한다

• 여기서 100% 해놓고 margin 이나 padding을 넣으면 넘어간다.

•  

• 블록요소

• 활용하지 않은 마진값이 존재하므로 margin: 20px auto; 처리하여 가운데정렬할수 있다.

 

• 2강

• margin (css, 중요)

• 마진은 차지하는 공간을 의미한다  (이렇게 생각하면 편하다)

• negative (-) 처리하면  차지하는 공간이 줄어든다 (보여지는 공간은 그냥 껍데기다.)

• 가상요소

• 기본으로 inline 이기때문에 width, height가 처리되지 않는다. 바꾸고싶으면 display: block;

• li에 들여쓰기 하고싶으면

• .list li:before { margin-left: -15px}

• .list { padding-left: 15px}

• 글씨크기에 따라 다르게 하려면 em 단위써라.

• 3강

• negative margin (css)

• 블록요소에서의 width: auto  (매우중요)

• 부모의 크기만큼 꽉차게 된다. (중요)

• margin-left: -20px; margin-right:-20px;  // 네거티브 마진이 다르게 적용된다.

• 부모만큼 커지고 그다음에 더 넓어진다.
  

  

  

  
  

  

• position (css)

• 화면 꽉 채우기

• position: absolute; left:0; right:0; bottom:0; top:0;

• background (css)

• background-position: center;

• background-image: url(...);

• depth

• z-index: 10;

 

• 4강

• 자식 가상 선택

• .timeline-item:nth-child(even) { … }

• .timeline-item:nth-child(even):before { … }

• min-height

• 최소 높이

• box-sizing: border-box

• 크기를 유지해주면서 패딩과 보더를 가진다.

• margin

• margin-top: -200px; margin-bottom: 200px;

• position

• absolute; 

• transform: translateX(-50%)

• 자기자신의 가로 50% 만큼 뒤로간다.

 

• 5강

• 4강내용 반복

10강. 중급: 반응형 사이드바 레이아웃

• 1강

• max-width: 1200px

• 최대 너비 길이

• @media (css, 중요)

• 상황이 바뀌면 적용되는 css

• @media( max-width: 720px ) { … }

• margin 초기화

• margin: 0

• transform 초기화

• transform: none;

• 스마트폰은  980px width로 된다  우린 그걸 원하니 않는다   스마트폰 크기만큼으로 처리할거다(중요)

• <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

• http://screensize.es 

• 2강

• 먼저 레이아웃잡을(중요)때 식판처럼 생각하고 잡아봐라 ㅋㅋ 마크업

 

• 3강

• height 대신 padding-top으로 처리할수도 있다. (tip 팁)

• padding-top:100%

• 부모의 너비기준으로 높이게 잡이니  정사각형이 나온다.

• 부모의 크기가 달라져도 비율을 유지한다. 대박.(중요)

• 16:9 하려면 padding-top: 56.24%;

• 창크기의 따라서 되게하는거. 

• div의 margin: 20px줘도 마지막의 부모의 자식간의 (블록) 마진겹침 처리된다. (중요)

• 부모의 padding:1px를 주거나 boarder:1px를 하면된다.또는 overflow:hidden; 또는 display:flow-root;  또는 ::after 가상요소 추가.display: table 해도된다.

• 통상적으로 클래스 이름지을때 -(하이픈)은 아래 소속을 나타낸다. _(언더바)는 타입구분을 한다

 

• 4강

• 취소선

• text-decoration: line-through;

• 특정 순서에있는 곳에 margin주기 

• .mb_5 { margin-bottom:5px}  .mb_..등을 만들어서 유틸성으로 클래스 만들어서 추가해주자.

• CSS방법론 OOCSS 범용적으로 쓸수있게.

• 방법론은 BEM, OOCSS, SMACSS등이있다.

 

• 5강 

• 반복.

11강. 중급: float 기반의 그리드 시스템1

• 1강

• 반복.

• 2강

• 부모의 폰트 사이즈 그대로 받아오게 처리

• font-size: 100%

• 글씨 대문자로

• text-transform: uppercase;

• 배경안에 알파 값으로 톤다운시켜주기

• :after { content:’ ‘; background-color: blue; position: absolute; left:0; top:0; right:0; bottom:0; opacity: 0.5;}, 부모에 position:relative;

• 그라데이션으로 주기 (https://www.colorzilla.com/gradient-editor/) css 발취가능 background

•  

• 3강

• 반복.

• 4강

• 자식과 부모의 마진겹침 현상 제거.

• 부모의 padding:1px를 주거나 boarder:1px를 하면된다.또는 overflow:hidden; 또는 display:flow-root;  또는 ::after, ::before 가상요소 추가.display: table 해도된다.
  

  

  

• 화살표 넣기

• .curriculum-link:after {
  content : ‘ ‘;
  width:0;
  height:0;
  border-width:5px;
  border-style:solid;
  border-color: transparent transparent transparent currentColor;
  display: inline-block;
  }

• .curriculum-link:hover { color:white;}
  
  

 

• 5강

• 반응형 웹만들기

• max-width: 960px; 으로 처리 

• @media 처리

• @media (max-width:768px) {
    .l_sidebar {
      float:none;
      width:auto;
    }
  }

• font

• body { font-family: sans-serif; }

 

• 6강

• 그리드 시스템 grid system

• ul li로 하는게 좋겠다.

• 범용적인 class name으로 달아라.   .l_row, .l_col

• .clearfix:after { clear:both;}
  

  

  
  상하단 마진과 float 처리도 동시에 된다.

• .l_row {
    margin: 0 -10px;
  }

• .l_col {
    float: left;
    width:20%   // 5단
    padding: 0 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
  }

• @media (max-width:520px) {
    .l_col {
      width:33.33%;   //3단으로 바뀜
  
    }
  }

 

12강. 중급: float 기반의 그리드 시스템2

• 1강

• 반복.

• 2강

• 그리드로 margin 0 10px 주면  맨처음과 맨끝에도 마진이 들어간다 그걸 막기위해
  부모에게 width:auto 인상태에서 nagative margin을 줘 늘려준다 margin: 0 -10px; (중요)

• 시스템적으로 구분처리하기

• .l_col 에 width를 없애고 
  .l_col_half { width: 50%}
  .l_col_five { width: 20%}
  .l_col_1_12 { width: ..} // 이런식으로 이름을  12그리드중 1컬럼이다.
  등을 만들어서 복합 클래스 지정.

• img 최대 사이즈, 정렬 지정
  img { max-width: 100%; vertical-align:top}

• 3강

• 사이즈 반응형으로 처리
  @media (max-width: 780px) {
    .l_col_tablet_12_12 { width: 100%}
    ... 
  }
  @media (max-width: 480px) {  // width가 480px보다 클때! 중요
    .l_col_mobile_12_12 { width: 100%}
    ... 
  }
  @media (min-width: 1400px) { … }  // width가 1400px보다 작을때! 중요
  추가하여  정의한다 그리고
  class=”.l_col .l_col_12_12 .l_col_tablet_6_12 .col_mobile_1_12” 하여 사용한다.

• 4강

• dummy text 사이트있음 (https://www.blindtextgenerator.com/lorem-ipsum)

• 반복.

• 5강

• float하면 다른얘들이랑 썩이니 clearFix 클래스 먹혀라.
  

  

•  

 

13강. 중급: 모바일 우선 반응형 작업

• 1강

• float로 그리드 시스템을 만들면 안에 있는 내용물에 따라 높이가 달라지게된다 (한계)

• 글씨 자동 중바꿈 안되도록하기 

• white-space: nowrap

• overflow: hidden;

• text-overflow: ellipsis;     // 글뒤에 … 처리됨

• 높이를 강제로 지정

• 한줄의 높이를 알아내고  그수의 개수만큼 하게되면 높이지정되도록 처리

• line-height: 1.6;
  height: 8em         (1.6*5)

•  

• 2강

• 폰트사이즈는 최상 루트요소에 넣는다. (통상)

• font: 100% 하면 사용자 지정된 (브라우저) 의 기본값   

• 보통 좀 적게 보이고싶어서 font: 62.5% 이라고 많이 쓴다.

• font: 1.4rem;   r은 root 요소 (html) 요소의 1.4배

• 이렇게하면 반응형할때 html의 폰트사이즈만 바꿔주면 다같이 바뀐다.

• 자식과 부모 상하단 마진겹침 ..해결방법 :after{ content: ‘ ‘; display:table;}

• 3강

• 부모너비와 같이 높이하기

• padding-top: 100%

• 자식위치 

• position: absolute;
  left: 0;
  top: 0;
  width:100%

• 4강

• 모바일이 기준이니깐  사이즈가 커지면 이라고 media를 걸어야한다.

• @media( min-width: 768px) { … }

• 위치고정

• position: fixed;

• static // 기본값

• 글씨 자동 줄바꿈되는거 막자 (그룹핑)

• <span> aaa </span>  <span> bbb bbb </span>

• span { white-space: nowrap; }

• 5강

• 마우스 hover 효과

• :hover { transform: scale(1.1);}

• transition: all .5s;

• opacity: 0.3;

• overflow: hidden; // 하면 안쪽 컨텐츠 사이즈만 늘어나게 효과 

 

14강. 중급: 실전 예제 작업1

• 1강

• css 구조잡기

• /* reset */

• /* Typography */

• /* Commons */

• /* Layout */

• /* Components */

• 팁

• 레이아웃같은경우는 공통으로 사용중이니 레이아웃 클래스에 직접 디자인을 하지 말아라.

• 뎁스관계는 header-inside, header-menu 이런식으로 “-”하이픈으로.

• .clearfix:before,.clearfix:after { content: ‘ ‘; display: table; }
  .clearfix:after { clear: both;}

• 2강

• max-width 로 처리하면 모바일 처리하기도 좋아진다.

• 전반적인 타이포그래픽은 html쪽에 넣는다 html { … }
  

  

  em 단위로 가져갈수있다 아래에서

• 3강

• display: table;

• 태그는 <table> <tr><td></td></tr></table>

• css는
  .category-list {display: table;}
  .category-list li { display: table-cell;}
  .

• 4강

• 반복.

• 5강

• 넘친곳을 스크롤 처리

• overflow: scroll;

• 그림자(안쪽)

• box-shadow: inset 0 0 20px 10px red;

 

15강. 중급: 실전 예제 작업2

• 1강

• 반복.

• 2강

• box-sizing: border-box;

• margin: 0 -10px; width:auto;

• 

  

• 3강

• 간격적은 row
  .l_row_narrow { … }
  .l_row_narrow .l_col { … }

• 이미지 초기화

• img {vertical-align:top; width:100%}

• 4강

• 여백 넓게 화면 의 50%로 주기

• margin: 50vw;

• 5강

• 퍼센트에서 특정 px 빼기. (중요)

• 첫번째방법 

width: 100%
margin: -200px;
padding: -200px;

• 두번째 방법
  width: calc( 100% - 220px); // 중요

• 기능별로 스타일을 정하라

• 

  

  

 

16강. Outro

• 1강

• 반복.

• 2강

• 클래스명 정할때

• l_sidebar,  l_sidebar_right, l_sidebar_wide 이런식으로 알수있게

• grid system

• 3강

• float로 만든 grid는 높이가 다 같아야한다. 그래서 다른 flex나 그런걸 쓴다.

• overflow: hidden; text-overflow: ellipsis; // … 처리 

• 4강

• 폰트사이즈

• font-size: 2rem;  // root 의 폰트 사이즈의 비례

• 자식들은 em 해서 현재 폰트크기의 비례적으로.

• 5강

• 가상 선택클래스

• :last-child

• 부모요소만큼 커지긴하는데  max로는 자기자신으로만

• max-width:100%;