강디너의 개발 일지

Scss 사용한 유동적인 넓이 구하기 Vue.js 에서 작성된 스타일 입니다. $main_width 는 유동적인 넓이입니다. id 값이 router_view 인 dom -> width = 전체넓이 - sidebar_width;

전체 선택자* {color:green;} 페이지 안 모든 요소 선택 타입 선택자h1 { color:green;} 모든 h1 요소 선택 아이디 선택자#special { color:green;} id가 special 인 요소를 선택 클래스 선택자.class { color:red;} class가 class 인 요소를 선택 자식 선택자h2 > p {border:1px solid #000} h2 자식인 p 태그 요소 선택 속성 선택자h1[title] {color:red;} title 속성을 가지고있는 h1 요소 선택p[class="example] {color:red;} class 속성이 example 인 p 요소 선택 의사 선택자a:link {color:red;} 아직 방문되지 않은 링크의 색상을 빨강으로a:vi..

수평 중앙 정렬 1. text-align 을 이용한 가운데 정렬 inline 요소는 text-align 속성을 이용해서 가운데 정렬 가능 2. margin을 이용한 가운데 정렬 넓이가 정해져있는 경우 margin 값을 이용해 가운데 정렬 가능margin 속성 값이 2개일 경우margin: (위,아래) (왼쪽,오른쪽); margin 속성 값이 4개일 경우margin: (위) (오른쪽) (아래) (왼쪽); 3. Position을 이용한 가운데 정렬 position: absolute 는 position: static 속성을 가지고 있지 않는 부모를 기준을 잡습니다.그래서 상위 div에 relative 속성값을 부여했습니다. 수직 중앙 정렬과 수직, 수평 가운데 정렬 1. Postion을 이용한 수직 정렬 to..