본문 바로가기

basic

 (173)
history모드 설정하기 https://router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6 HTML5 히스토리 모드 | Vue Router HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의 router.vuejs.org https://ekgoddldi.tistory.com/179 ha..
Vue CLI Manually select features Choose Vue Version Babel : ES5 이후 버전으로 코딩하면 ES5문법으로 자동변환해 줌 TypeScript Progressive Web App (PWA) Supports : 웹앱 개발 지원 Router : Vue-Router Vuex : 상태관리 CSS Pre-processors : CSS전처리기 SASS SCSS LESS Stylus 등 Linter/Formatter : 자바스크립트 코딩 표준 가이드 Unit Testing : 단위 테스트 플러그인 Mocha 등 E2E Testing : End to End 테스트, 통합테스트 플러그인 https://cli.vuejs.org/guide/creating-a-project.html Creatin..
sample Sample Vue Dummy Sample App Bring Dummy Data {{dummy.id}} {{dummy.title}} {{dummy.userId}} {{content.id}}{{content.title}} × {{content.body}} Close new Vue({ el: '#app', data() { return { dummies: [], content: {} } }, methods: { getData() { axios.get('https://jsonplaceholder.typicode.com/posts') .then(res => { this.dummies = res.data }) .catch(err => { alert(`error: ${err.message}`) }) }, getDet..
Transform http://tcpschool.com/css/css3_transform_2Dtransform 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 2D 속성 값 설명 none 변형 속성을 적용하지 않음 matrix(n,n,n,n,n,n) translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수 translate(x,y) 요소의 위치를 옮기는 속성 scale(x,y) 요소의 크기를 비율에 맞춰 확대/축소하는 속성 rotate(angle) 요소를 지정된 각도 만큼 회전시키는 속성 skew (x-angle, y-angle) 요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성 3..
@RunWith, @Before import안될 때 // assertThat junit4가 아닌 버전을 사용해서 그런다. testImplementation("org.junit.vintage:junit-vintage-engine") { exclude group: "org.hamcrest", module: "hamcrest-core" } Junit4 > vintage-engine Junit5 > jupiter-engine junit4 -> junit5 @BeforeClass -> @BeforeAll @Before -> @BeforeEach 로 변경되었다. import static org.assertj.core.api.Assertions.assertThat;
텍스트 말줄임 ... 한줄 말 줄이기... display:block; overflow:hidden; text-overflow:ellipse; white-space:nowrap; //ellipse는 ... 효과를 만들어 주고 nowrap은 줄바꿈이 안되게 해준다 여러줄 말 줄이기... overflow:hidden; text-oveflow:ellipse; 까지는 똑같지만 크롬계열 브라우저에서는 display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:줄 수; IE를 위해서는 max-height값을 설정해준다. 값은 line-height X 줄수 table에 적용한 예시 12345678910111213141516171819202122232425262728293031..
float 해제 하는법 1. float이 된 부모 요소에게 visible을 제외한 overflow를 부여하기(단, 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다면 그 팝업의 내용이 보이지 않는 현상이 일어난다.) 2. 가상요소를 이용해 clear속성 부여하기 부모요소에 가상선택자 after로 clear속성 부여하기{clear: both;display: block;content:"";} { https://www.boostcourse.org/web344/lecture/47666?isDesc=false 웹 UI 개발 부스트코스 무료 강의 www.boostcourse.org
Simple reset css body,h1, h2, h3, h4, h5, h6,ul, ol, dl, dd,p,fieldset, legend { margin: 0; padding: 0;}body, input, textarea, select, button { font-size: 14px; font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;}ul, ol { list-style: none;}table { border-collapse: collapse;}em { font-style: normal}a { color: inherit; text-decoration: none;}a:hover { text-decoration: underline;}img { vertical-alig..

티스토리툴바