0630 회고

0629 실시간 강의, 0630 온라인 강의의 내용 정리

• 약간의 web, 서버 이론
• css transition, animation
• 미디어쿼리를 사용한 반응형 제작
• git 입문

서버

서버로 내보내려면?

• 127.0.0.1:5000
  - 127.0.0.1 === localhost
  • 5500은 포트번호
  • 다른 사람에게는 보이지 않는 로컬 서버

CSS

padding

• 패딩을 입으면 두꺼워지듯이 기존의 콘텐츠는 크기를 유지한채 그 바깥으로 더 두꺼워지는 경우 존재

부모자식 마진 병합 현상

• 자식이 부모의 최상단 or 최하단인 경우, 자식의 마진이 부모에 영향을 미침

CSS 우선 순위

1. 속성값 뒤에 !important가 붙어있는 속성
   (ex) p {color: red !important;}
2. 인라인 스타일
3. id
4. class, attribute, pseudo-class
5. 태그 이름
6. 부모 요소에 의해 상속된 속성

Vendor prefix

• css 표준에 대한 속성 구현이 특정 브라우저마다 다른 경우, 해당 브라우저를 위한 별도의 속성값을 지정해야 할 때 사용
• 다른 버전의 브라우저에서의 실행을 원할 경우: 가장 최신 버전이 아닌 하위의 버전들을 위해 작성

<style>
 .box {
  	-webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
  	-moz-transform: translate(100px, 200px); /* 파이어폭스 */
  	-ms-transform: translate(100px, 200px); /* 익스플로러 9.0 */
  	-o-transform: translate(100px, 200px); /* 오페라 */
  }
</style>

👉 prefix 작성 시 유의사항: animation 진행시 @keyframes는 물론 transform, animation에 도 모두 prefix를 각각 붙여줘야 한다.

.box1 {
	-webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(-10deg)}
  	to {-webkit-transform: rotate(10deg)}
}

Navigation bar

• GNB (Global Navigation Bar): 우리가 생각하는 기본 네비게이션 바
• LNB (Local Navigation Bar): GNB를 눌렀을 때 소제목 형식으로 아래로 뜨는 네비게이션 바
• SNB (Side Navigation Bar): 사이드에 존재하는 네비게이션 바
• FNB (Foot Navigation Bar): 푸터에 존재하는 네비게이션 바

transform

• scale(2,3) width 2배, height를 3배 확대. 축소하고 싶다면 0.5등의 소수 사용

animation

• animation-iteration-count 애니메이션 반복 횟수
• animation-direction 애니메이션 진행 방향
  1. alternate from > to > from
  2. normal from > to, from > to
  3. reverse to > from, to > from
• animation: rotation 3s linear 1s 6 alternate; 으로 작성시, 나머지 값들의 순서는 상관 없으나 앞에 있는 숫자가 duration, 뒤의 숫자가 delay라는 점 인지하기. 만약 숫자가 하나라면 duration이다.
• 1000ms === 1s

Media query

미디어쿼리

• PC뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 사용
• 모바일에 대응되는 반응형(스크롤해서 창 크기를 서서히 줄였을때) 또는 적응형(확확 줄였을때) 웹사이트를 만들 때 사용되는 CSS 구문

@media (min-width:320px) and (max-width: 800px) {
	.main {
      //변경할 속성 적용
    }
}

👉 미디어쿼리 정상적으로 출력되는지 확인하는 법
1. 크롬 개발자 도구 내의 핸드폰 모양 클릭
2. 다음에서 개발한 Troy Labs 사용. 단, 결과물이 서버에 등록되어 있어야 한다.

viewport

• 뷰포트: 화면이 보이는 영역에 대한 설정
• 미디어 쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로, 뷰포트로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

• width=device-width 너비를 장치 너비로 설정
• initial-scale=1.0 초기 화면 배율을 100%로 설정

CSS 속성 상속

• 미디어쿼리 외부 영역에 있는 css 속성을 상속 받는다.
• 만약 상속을 받지 않고자 한다면 속성값을 none으로 직접 입력해줘야한다.
• 따라서 미디어쿼리 작성시에는 어떤 css 속성이 있는지 하나씩 따져볼 필요가 있다.

.media {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

@media (min-width:320px) and (max-width:800px) {
  width: 300px;
  height: 300px;
  // background-color: none 작성하지 않으면 yellow인채로 그대로 적용됨
}

git 입문

git 적용 순서 참고 이미지

해당 폴더를 쉽게 터미널에서 오픈 하는 법

• 올리고 싶은 폴더를 우클릭 후 'Open in Integrated Terminal(통합 터미널에서 열기)' 클릭
  
• 혹은 터미널에서 cd 해당폴더드래그

그 외 참고

• VSCode에 lorem을 작성하고 엔터를 누르면 임의의 문장이 적힌다. 만약 특정 단어수를 포함한 문장을 만들고 싶다면 lorem100과 같이 작성한다.

• 미디어쿼리 사용 시 참고 할 평균 화면크기 (예시이므로 상황마다 확인 후 적용)
  

• github은 개인 냉장고, gitlab은 업소용 큰 공용냉장고

• 코드정리: 전체선택 후 command(ctrl) + k + f

갈무리

미디어쿼리에 대해 확실히 정리할 수 있어서 너무 좋았다. git은 다양한 방법이 있는 것 같으니 다 시도해보기.