NOW OR NEVER

Github 랜딩페이지 클론 코딩 Header header가 아닌 header 안 inner 클래스를 가진 요소에서 header 높이를 지정하는 이유는 header 자체에 높이를 주게 되면 header 안 inner는 높이를 갖지 못한다. 그래서 높이를 두번 지정하게 되는 번거로움을 겪을 수 있다. 하지만 header 안 inner에 높이를 주게 되면 header는 height:auto가 기본값으로 자동으로 동일한 높이를 가질 수 있어 한번만 높이를 입력해도 되기 때문이다. 화면 가운데 정렬로 굉장히 많이 쓰는 방법: margin: 0 auto; 로 header inner 영역(메뉴 들어있는 영역 화면 가운데 정렬, 이 속성을 쓸 때는 이 속성을 쓰는 요소에 기본적인 가로사이즈(max-width, wid..

Github 랜딩페이지 클론 코딩 반응형, 동영상 삽입, 수평 예제, 지도api 방법 배움 반응형: 사이즈가 줄 때마다 어떻게 변환되는지 수평이 어떻게 줄바꿈 되는지 모바일에서도 잘 나오게 github 예제 완성본 코드 : https://github.com/HeropCode/Github-Responsive head 태그 구성 1. viewport, IE 랜더링 정보 구성 작성자 외부적으로 보이진 않고 브라우저 내부 상 확인하는 정보 : viewport : 화면 상에 우리가 작성한 레이아웃이 나오는 전체 영역 반응형 웹사이트를 만들기 위해서는 viewport 세팅(meta name="viewport" content =”뷰포트에 세팅할 내용”)해줘야한다. 뷰포트 세팅 content= “” 안에 세팅할 내용 ..

Bootstrap Bootstrap 이란 bootstrap.css를 불러와서 다른 사람들이 작성해놓은 버튼이나 레이아웃을 가져와서 간단한 클래스 값만 넣으면 만들 수 있다. 활용시 사이트를 좀 더 빠르고 쉽게 만들 수 있다. 트위터에서 개발했고 만든지 오래되었다. bootstrap 시작하기(v3.4.1) 다른 사람들이 만들어놓은 css(웹에 지정된 주소)를 외부에 있는 주소로 불러오는 방법 https://getbootstrap.com/docs/3.4/getting-started/#download or http://bootstrapk.com/ => 부트스트랩 cdn 코드를 html에서 link 태그로 불러오기 다른 사람들이 만들어놓은 css를 다운로드 받아서 적용 그 css를 저장해서 link 태그로 hr..

SASS/SCSS 문법 함수(functions) @mixin과 굉장히 유사하지만 차이점 존재 @mixin은 믹스인 이름을 정의하고 믹스인 안에서 처리될 매개변수를 정의하고 그 매개 변수는 스타일 안에서 사용할 수 있다. 믹스인 안에 특정 스타일을 정의해서 사용하는 개념 @function은 믹스인처럼 함수이름을 먼저 정의하고 매개변수가 특정한 값을 받아서 @function 내부에서 처리하게 됨 @mixin과 다른 점 : 믹스인은 내부에서 처리되는 것이 어떠한 스타일(속성:값;)이다. 속성:값; 세트로 이루어진 전체적인 스타일을 재활용하기 위해 사용하는 개념이 믹스인이다. @function이 처리하는 것은 결과적으로 특정한 값이다. @function은 스타일이 아닌 특정한 값을 재활용하기 위한 개념이다. 항..

SASS/SCSS 문법 변수 1. !global(전역 설정) 값 뒤에 사용하는 개념 이 플래그를 사용해서 선언해놓은 변수를 유효범위에 종속되지 않고 전체 영역에서 쓸 수 있는 형태로 정의 가능 기존에 선언된 전역변수가 덮어 써질 수 있다.(변수를 재정의하지 않는 이상) 변수가 적용되는 곳을 기준으로 해서 가장 가까운 곳에서 마지막에 선언된 값이 마지막으로 들어간다. 2. !default(초기값 설정) 할당되지 않은 초기값을 설정 할당된 변수에는 새롭게 정의되는 값을 적용하지 않고 기존 할당 값(전역변수 등) 사용 변수와 값을 설정할 때 기존 변수가 있을 수도 있으니 현재 설정하는 변수의 값은 기존에 변수가 있는 경우에는 사용하지 않는다는 의미로 사용 Bootstrap, 기타 CSS, SCSS 상뇽하는 라..

Grid item 함수 grid에서 사용하는 주요 함수 인수: 함수의 괄호 안에 들어가는 것, 함수에 들어가는 일종의 데이터 1. repeat( ) 함수 행과 열의 크기 정의를 반복할 때 사용 반복하는 횟수를 첫번째 인수로 활용하고 행과 열의 크기 정의를 두번째 인수로 사용 두번째 인수에 반복패턴 입력 가능 선의 이름도 정의 가능 fr 단위 사용 가능 grid-template-rows와 grid-template-columns에서 사용 grid-template : grid-template-rows 정의 / grid-template-columns 정의; ex) grid-template : repeat(2, [row-start] 200px [row-end] / repeat(3, [col-start] 100px..

Grid 2차원(행이라는 차원과 열이라는 차원 제공)의 레이아웃 시스템 제공 flexible box: 1차원의 레이아웃을 위하며 grid보다 쉽고 빠르게 제공 가능하지만 다차원의 레이아웃 잡는데는 무리가 있다. 그래서 복잡한 레이아웃을 위해 grid 사용 예전부터 핵(hack)이라고 불리는 다양한 레이아웃 대체 방식 해결 위해 만들어진 특별한 css 모듈(예전에 레이아웃을 잡기 위해서는 table 코딩, float 이용한 정렬방식, position 방식, flexible box를 많이 사용했었는데 그것들을 다 대체할 수 있게 완벽히 해결할 수 있는 레이아웃 잡는방식이 grid이다.) grid를 통해 고차원적으로 레이아웃 완성 가능 대치의 개념과 정렬의 개념을 동시에 가지고 있다. 파이어 폭스 브라우저 사..

Flex flex item 속성 1.order : flex item의 순서 결정 각각의 item의 순서 설정 item에 순서를 지정하고 숫자가 클수록 순서가 밀림 음수가 허용(더 작을수록 순서가 앞으로 오게 됨) html 구조와 상관없이 순서 변경 가능해서 css만으로 순서 변경시 유용 order 값 같을 시 html 구조(먼저 작성된 순서대로)대로 나열 됨 숫자 : 기본값은 0으로 item 순서 결정 2. flex : flex-grow, flex-shrink, flex-basis를 아우르는 단축속성 flex: flex-grow flex-shrink flex-basis; 주의사항: flex basis 개별 속성 사용시 기본 값은 auto지만 단축 속성일 때 사용시(명시적으로 적지 않았을 때) 기본 값은 ..

애니메이션 animation 요소에 애니메이션을 설정/제어 애니메이션은 기본적으로 프레임으로 이루어져 있다. 이 속성을 통해 실질적인 애니메이션 프레임을 만들어내는 것이 아니라 만들어낸 프레임을 제어하는 데 사용 애니메이션을 직접적으로 만들어주는 것이 아니라 keyframes규칙에 설정된 애니메이션의 정의를 설정하고 개별 속성들을 통해 제어하는 개념 실질적으로 애니메이션을 선언하는 것은 keyframes 규칙이다. 다양하고 풍부한 내용들을 움직이게 만들 수 있다. See the Pen Animation by ssoyuni (@sssoyuni) on CodePen. 1. 단축 속성 animation : 애니메이션이름(keyframes 규칙으로 만들어져 있는 이름) 지속시간 [타이밍함수 대기시간 반복횟수 반..

CSS 변환 효과(Transform) Transform 2D 변환 함수 애니메이션에 특화되어 있는 이런 함수들을 애니메이션 만들 때 쓰는 것이 좋다 transform: 함수(값) 함수(값); 함수는 띄어쓰기 통해 다중 입력 가능 1. 전체를 아우르는 함수 matrix matrix(n,n,n,n,n,n): 2차원 변환 효과 translate, scale, rotate, skew 등의 함수가 matrix를 대신한다. 이동, 크기, 회전, 기울임을 한번에 제어해주는 함수 이 함수 사용시 일반적인 상식에서 벗어난 방식으로 해서 사용이 어렵다. 직접적으로 사용할 필요는 없다. 브라우저가 알아서 해주기 때문 [실질적 쓰는 함수] 1. 이동 함수 translate 이동 관련 제어해주는 함수[ position과 다른 ..