NOW OR NEVER

CSS CSS 꽃 : Flex box 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다. 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다. 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다. container level : 박스에 적용되는 속성들, container를 꾸며주는 속성들 display flex flex-direction flex-wrap flex-flow : flex-direct..

Vue.js 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크 특징 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식 MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리 리액트와 앵귤러의 장점을 흡수 설치 파일 vue.js devtools 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임 vs code 확장 프로그램 : vetur node-v , npm-v 설치 , nvm html body 태그 내에서 - https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑..

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지만 단축 속성일 때 사용시(명시적으로 적지 않았을 때) 기본 값은 ..

CSS 배경에 관한 속성 background : 요소의 배경 설정 1. 단축 속성 background : 색상 이미지경로 반복 위치 스크롤특성; 이미지 경로는 url()함수 사용 특정 값 사용하지 않아도 됨(누락 가능) 다중 배경 이미지 삽입시 하나의 background 단축속성, 이미지경로 반복여부 가로사이즈 세로사이즈, 이미지경로 반복유무; 로 작성 다중 배경 이미지는 IE8 이하 버전에서 사용 불가능 2. 개별 속성 background-color : 요소의 배경 색상 지정, 기본값은 transparent 투명 요소의 색은 기본적으로 투명하다. 단축 속성으로 더 많이 이용 background-image : 요소 배경에 하나 이상의 배경 이미지 삽입, 기본값은 none background-image :..

float : 요소를 좌우 방향으로 띄우는(부유하는) 개념(수평 정렬) 요소를 수평방향으로 정렬하는 용도로 많이 사용 flex box가 생기면서 수평 정렬하는 개념은 많이 퇴색됨 float : 방향; 기사처럼 요소 주변에 글(문자)이 흐르게 하는 용도로 사용 가능 1. 속성 값 none : 기본 값으로 요소 띄움 없음 left : 왼쪽으로 띄움 right : 오른쪽으로 띄움 2. 수평 정렬 float이 적용되기 전에는 위에서부터 아래로 쌓임 float이 들어간 요소들은 다 수평 정렬 float: left; 좌측부터 수평으로 쌓는 개념 float: right; 우측부터 수평으로 쌓는 개념 3. float 해제 거의 대부분 필수 적 float이 가진 문제점 : float 속성이 적용된 요소 주위로 다른 요소..

font 글꼴 - 글자 관련 속성들을 지정 1. 단축 속성 - font: 기울기 두께 크기 / 줄 높이 글꼴; - 일반적인 단축속성은 띄어쓰기로 구분하지만 font의 경우 /가 들어가는 이유는 크기와 줄높이 같은 경우 순서를 명확하게 하지 않으면 뭐가 뭔지 구분이 어렵기 때문이다. - 기본적으로 최소한 font-size(크기)와 font-family(글꼴)을 지정해야 다른 것들을 생략해도 사용 할 수 있다. 2. 개별 속성 - font-style : 글자 기울기 지정, 기본값은 normal normal : 기본 값으로 스타일 없음 italic : 보통의 경우에 글자를 기울일 경우에 oblique 말고 이걸 씀, 이탤릭 체 활자 oblique : 기울어진 글자 - font-weight: 글자 두께(가중치:..

상속(inheritance) - 조상요소로부터 하위요소로 css 명령들이 상속될 수도 있다. - 상속은 모든 css 속성에 적용되는 것은 아니다. - css의 특정한 속성들은 부모요소, 조상요소에 지정하는 것만으로도 그 안에 있는 하위요소에도 영향을 끼칠 수 있다. - 부모요소 값이 무엇이던간에 자식요소는 부모의 값을 그대로 물려받아서 사용해라 1. 상속이 되는 속성(대부분 텍스트를 다룬다.) - font 글자( font-size 글자 크기, font-weight 글자 두께, font-style 글자 기울기, font-height 줄 높이, font-family 폰트 설정) - color 글자 색상 - text-align 글자 정렬 - text-indent 글자 들여쓰기 - text-decoration ..

복합 선택자 - 앞쪽은 조건이고 뒷부분이 선택되는 개념 1. 일치 선택자(basic conbinator) - 기본 선택자 중 하나와 기본 선택자 중 하나를 동시에 만족하는 요소 선택자 - 기본 선택자 하나와 기본 선택자 하나가 붙여서 사용 - 선택자 첫번째와 두번째 선택자의 조건 다 만족하는 것을 찾는다 - 태그.클래스별명 { } -> 태그이면서 클래스 별명값이 있는 것을 찾아야 함 2. 자식 선택자(child combinator) - 부모와 자식요소는 상대적 - 부모를 기준으로 특정한 자식요소를 찾는 선택자 - 기준(부모)선택자 > 자식요소의 선택자 - >는 자식선택자를 지칭 - 기본선택자 > 은 조건 - > 뒤에 있는 기본 선택자는 검색 - 태그 > .클래스별명 ->태그의 자식이면서 클래스별명 값을 ..

HTML 전역속성 : 모든 html 요소에서 공통적으로 사용 가능한 속성 1. class 속성 - 태그에 별명 혹은 별칭 부여할 때 사용 - 공백으로 여러 개 별명 설정 가능 - css 혹은 js에서 요소를 선택하는 방법으로 쓰일 수 있다. - 동일한 class가 여러 태그에 동일하게 들어가도 상관없음 - 중복 사용 가능(중요한 부분이 아닐 때 사용) - css에서 .class이름으로 찾을 수 있다. - js에서 찾을 때 const 변수이름설정 = document.querySelector(‘.class이름’) ex) const section = document.querySelector(‘.section’) -> class가 section인 요소 검색 2. id 속성 - 하나의 태그에 고유한 식별자(이름)..