'Frontend' 카테고리의 글 목록 (24 Page)
본문 바로가기

Frontend

(196)
[css] div를 상하좌우 중앙정렬 html에 기본박스를 생성하고 중앙 이를 상하좌우 중앙정렬하는데 여러방법이 있다. div안에 '중앙'글씨를 정가운데로옮긴것은 flex를 이용하였고 이포스팅에서는 div만 다룰예정이므로 생략. 해결1 - 모든브라우저상에 표현이가능하나 고정적인 w,h값필요 body div{position:absolute; top:50%; left:50%;} 해결 2 - 쉽고빠르지만 익스플로어9이상에서만 - 모바일용 body div{position:relative; left:50%; top:50%; transform: translateY(-50%);} 해결3 - IE8이상 중첩구조필요(table>table-cell>inline-block) 이때는 html에서 div가 여러개야함 blablabla blablabla blabla..
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 3회차 미션 패스트캠퍼스 프론트엔드 인강 3일차. 자바스크립트 배열 내장함수들을 공부해보았다. 배열내장함수가 많은데 1차는 6가지정도를 소개하고 2차에서 더 정리할 예정이다. forEach map indexOf findIndex find filter 1. forEach const superheroes = [ '아이언맨', '캡틴 아메리카', '토를', '닥터 스트레인지' ] //위의 원소들을 모두출력해보자 for(let i = 0; i{console.log(hero);}) 2.Map 배열안의 모든 원소를 변환하고싶을때 사용한다. 예를들어 다음과 같은 숫자를 가진 배열의 모든원소를 제곱해 새로운 배열을만들고싶다면? 먼저 빈배열, 빈방을 만들어주고 const array = [1,2,3,4,5,6,7,8]; const s..
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 2회차 미션 패스트캠퍼스 프론트엔드 인강 2일차. 자바스크립트 배열기초, forEach를 공부해보았다. 기존에 배웠던 객체가 하나의 변수 혹은 하나의 상수안에 여러가지 정보를 담기위함이었다면 배열은 여러개의 항목이 들어있는 리스트라고 할수있다. 배열안에 넣고싶은 원소들 예를들어 숫자, 문자, 객체 등등을 넣을 수 있다. const array = [1,'blabla', { name : '멍멍이'}, { name : '야옹이'} ]; console.log(array); //배열들 보여줌 배열에서 원하는 항목, 방을 조회하려면 배열명[숫자]를 입력하면된다. [0]부터 시작 //알고싶은 방 조회하기 console.log(array[0]); //1 console.log(array[4]); //undefined 배열에서 원하는..
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 1회차 미션 패스트캠퍼스 프론트엔드 인강 1일차. 자바스크립트 함수부분을 공부해보았다. 함수는 특정코드를 하나의 명령으로 실행할수있게하는 기능. 그외에도 파라미터값이 주어졌을때 파라미터를 처리해서 결과를 만들어낼수있다. 예시 //파라미터값 숫자 function add(a, b) { return a + b; } const sum = add(1, 2); console.log(sum) //파라미터값 문자 function hello(name){ console.log('hello '+name+'!'); } hello('dubaiyu'); 파라미터값이 숫자로들어간 add함수의 결과는 3이 나오고 파라미터값이 문자로 들어간 hello함수의 결과는 hello dubaiyu!가 나온다. 문자열을 이으려면 + 를 사용해야하는데 es6..
[css] ellipsis로 multiple lines '...'처리 1줄일 경우 딱 4개만 정해주면된다. width값; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 여러줄일경우 -display: -webkit-box; -webkit-line-clamp: 3; //원하는 라인수 -webkit-box-orient:vertical 가 추가되고 만약 line-height값이 설정되어있다면 height은 line-height의 값의 *3배로 정해준다 .mainModule li .substance { overflow: hidden; margin-top: 5px; font-size: 16px; color: #bfbfbf; text-overflow: ellipsis; display: -webkit-box; -webkit-..
[css] height:100% vs height:auto 나는 평소 이미지에 width:100%를 주면 height값이 자동주어진다고생각해 꼭 필요한경우가 아니라면 별도의 값을 지정해주지않았다. 사수가 width값이랑 height:auto를 주라는 조언을 해줘서 100%하면안되나? 문득 궁금해졌다. height:100%와 height:auto의 차이는 무엇인지궁금하여 구글링해보았다. 쉽게말해 100%는 부모태그의 값에 영향을 받고 auto는 자식태그의 값에 영향을 받음! difference between css height : 100% vs height : auto I was asked a question in an interview that "what is the difference between the css height:100% and height:aut..
[총정리] 변수, 함수에서의 hoisting 현상과 해결 hoisting은 쉽게말해 아래에있는 선언을(만) 끌어올린다. 먼저 변수의 hoisting에 대해 알아보자 //var hoisting age = 6; age++; console.log(age); //7로 정상적으로 실행됨 var age; 아래에있는 선언인 var age; 가 올라가는 hoisting현상으로인해 정상적으로 실행된다. 하지만 여기서 문제가 있다. //var의 문제 console.log(name); //선언부인 var name; Bark이던뭐든지간에 undefined name='Mark'; console.log(name); //Mark var name = 'Bark';//name = 'Bark'가 되기때문에 혼란야기 초기화부분이 있던 없던 선언부 var name; 만올라가서 혼란을 야기한다. ..
<a><li></li></a>는 가능할까? (li태그에 링크걸기) li 태그에도 링크가 걸리게하고 싶어서 문득 궁금해졌다. 답은 불가능. 는 의 자식이기때문에 불가능하다고한다. 그 반대인 li>a 구조는 가능하다. a태그안에 block지정하거나 lnline-block을 지정하면된다고한다. 나같은 경우는 추가로 width:100%도 같이 지정해주니까 적용된다. 출처:스텍오버플로우 https://stackoverflow.com/questions/9627683/a-tag-around-li-tag tag around tag I always want to ask this question: Is this validate Or should always have Is the first way wrong or you are... stackoverflow.com