본문 바로가기

전체 글21

[Vue.js 기본] Vue.js 란? Vue.js란? 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. Vue.js 장점 배우기가 쉽습니다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있습니다. Vue.js 특징 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리 입니다. 컴포넌트 기반 프레임워크입니다. 리액트와 앵귤러의 장점을 가진 프레임워크입니다. 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크 입니다. 리액트의 가상 돔 렌더링 방식을 적용하여 빠른 화면 렌더링이 가능합니다. 2021. 11. 20.
[CSS 기본] CSS 레이아웃 box-sizing 박스 너비 기준 정하기 box-sizing: content-box | border-box content-box (기본 값) border-box width 속성 값을 콘텐츠 영역 너비 값으로 사용 width 속성 값을 콘텐츠 영역에 테두리까리 포함한 박스 모델 전체 너비 값으로 사용 float 왼쪽 or 오른쪽 배치 float: left | right | none clear float 속성 해제 - float 속성을 이용해 요소를 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유효하지 않다고 알려주기 위해 clear 속성을 사용한다. clear: none | left | right | both position 배치 방법 지정 posit.. 2021. 11. 16.
[CSS 기본] CSS 박스 모델 (3) [프로그래밍/HTML & CSS] - [CSS 기본] CSS 박스 모델 (1) [프로그래밍/HTML & CSS] - [CSS 기본] CSS 박스 모델 (2) margin 주변 여백 설정 - 요소와 요소 사이의 간격 조절 - 중앙에 배치할 때 margin: 0 auto 로 설정 margin-top: | | auto margin-right margin-bottom margin-left margin padding 콘텐츠 영역과 테두리 사이 여백 설정 padding-top: | | auto padding-right padding-bottom padding-left padding 2021. 11. 14.
[CSS 기본] CSS 박스 모델 (2) border-style 테두리 스타일 border-style: none | hidden | dashed | botted | double | groove | inset | outset | ridge | solid border-width 테두리 두께 border-top-width: | thin | medium | thick border-right-width border-bottom-width border-left-width border-width border-color 테두리 색상 border-top-color: border-right-color border-bottom-color border-left-color border-color border 테두리 스타일 묶어서 지정 border-top: border.. 2021. 11. 14.