본문 바로가기

front-end50

[css] 반응형 레이아웃을 위한 flexbox 알아보기 (브라우저별 flexbox 사용하기) display:flex 는 기존 방식에서는 구현하기 어려운 레이아웃을 쉽게 구현할 수 있게 해주는 css 요소이다. 특히 반응형 레이아웃을 만들 때 효과적인데 단점이라면 최근에 나온 요소이기 때문에 과거 버전의 브라우저에서는 동작을 하지 않을 수도 있다. 특히 IE11에서는 부분적으로 지원하기 때문에 display:-ms-flex 라고 추가적으로 명시해 주어야 한다. display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex; 만약 다음과 같은 화면이 있다고 생각해 보자. 1 2 3 4 여기에서 부모 요소(parent)에 display:flex를 주면 바로 아래의 자식 요소를 flex context로 만들 수 있다. .parent{.. 2020. 4. 23.
[javascript] 자바스크립트의 sort( )는 문자정렬이구나... (문자, 숫자 ,Object 정렬법) sort() 함수가 있다. 보통 문자에다 이 함수를 쓰면 알파벳 순으로 정렬을 해 줄 것이고, 숫자에다 쓰면 123의 순서대로 정렬을 해 줄 것이다. (적어도 첫 언어를 python으로 시작한 나한테는 그렇다.) 그런데 자바스크립트에서 sort는 문자정렬이다. 기본기가 부족하다는 건 예전부터 알고 있었는데 이런 것도 모르고 개발을 했다니 충격이긴 하다. 이게 반드시 문자정렬인 자바스크립트한테도 충격이고. 혹시나했는데 역시나구나. 문자 정렬을 했을 때의 모습이다. 당연하게 첫머리 글자 순서대로 정렬해준다. 만약 숫자를 정렬하려고 한다면? 문자처럼 정렬이 된다. 만약 내가 숫자를 숫자답게 정렬하고 싶다면 어떻게 해야할까? 바로 함수를 사용해야 한다! 바로 요렇게!!!! 만약 reverse()를 사용하고 싶다.. 2020. 4. 21.
[CSS/JS] 테이블 행열(가로세로) 위치 바꾸기 API에서 데이터를 어떻게 주느냐에 따라 테이블 요소의 행과 열을 바꿔야 할 순간이 올지도 모른다. 테이블 행/열을 바꾸는 방법은 다음과 같다. col col col col row Dolor Dolor Dolor row Dolor Dolor Dolor row Dolor Dolor Dolor table{ display:flex; display: -webkit-box; display: -ms-flexbox; overflow-x: auto; overflow-y: hidden; } tbody {display:flex} th,td{display:block} thead와 tbody를 포기한다면 css를 요렇게만 사용하면 된다. col col col col row Dolor Dolor Dolor row Dolor D.. 2020. 4. 19.
[IE8 대응] opacity 대응방법 / border-radius 대응방법 IE8까지 지원해야 하는 경우 기존에 아무생각없이 되리라 생각하고 사용하던 CSS를 사용할 수 없는 경우가 발생한다. opacity 같은 경우가 그렇다. IE8에서는 opacity를 사용할 수 없다. 이게 뭔 소리냐... 혹시 내가 사용하는 CSS 클래스가 해당 브라우저에서 사용이 가능한지 알고 싶다면 다음 사이트에서 확인할 수 있다. Can I use... Support tables for HTML5, CSS3, etc Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on deskt.. 2020. 4. 3.
[css] 사이즈 단위 px, rem, em, vh, vw 차이 (반응형 화면 제작에 유용) CSS를 공부하다 보면 사이즈가 하나가 아니라는 것을 알게 됩니다. 포토샵 좀 써보신 분이라면 가장 기본이 되는 px 단위에 대해서는 대충 알고 계시겠지만, 오늘은 이 CSS의 자주 쓰이는 단위에 대해 제대로 정리해 보고자 합니다. PX 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. em em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다. .parent{ font-size:12px } .child{ font-size:1.2em } 다음과 같이 부모 요소를 12px로 정의했을 .. 2020. 3. 20.
[html] form 태그에 대해 알아보자 / POST와 GET 차이 태그는 웹 페이지에서의입력 양식을 말한다. 로그인 창이나, 회원가입 폼 등이 바로 태그를 사용하고 있습니다. 이 태그는 입력된 데이터를 한 번에 서버로 전송합니다. 백엔드를 공부하시는 분들도 이 태그에 대해서는 자세히 알아두는 것이 좋습니다. 폼 태그의 기본적인 구성은 다음과 같습니다. First name: Last name: 여기서 을 구성하는 요소들을 하나씩 살펴보도록 하겠습니다. action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름 method : 서버에 전송할 http 메소드 (GET 또는 POST) input의 type : 입력받을 요소의 종류를 정한다. number, text, password 등. 반드시 맞는 것으로 입력해 둘 것! label : 폼.. 2020. 2. 15.
[HTML/CSS] display 속성 알아보기 (display:none과 visibility:hidden 차이) display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있습니다. 최신 웹에선 flex나 grid와 같은 새롭고 편리한 속성들이 등장하지만 브라우저 호환도가 떨어지는 등의 이슈가 있어, 나중에 다루도록 하겠습니다. display : block display : inline-block display : inline display : none display : block 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지합니다. width 또는 height 지정을 통해 가로 세로폭을 조절할 수 있습니다. 태그가 기본적으로 block을 기본 display 설정으로 갖습니다. 아래 그림의 배경이 빨갛게 된 부분은 영역으로 기본적으로 display .. 2020. 2. 11.
[Vue.js TIL] 중첩 라우트 / 데이터 바인딩 / computed methods watch의 차이 중첩 라우트 라우터 index.js 에서 다음과 같이 설정해 중첩 라우트를 만들 수 있음. 한 path 아래에 children 속성을 사용하여 다른 Path를 연결함 DATA ={path: '/b/:bid', component: Board, children : [ {path: '/c/:cid', component : Card} ]}, } 그러나 이렇게만 만들고 지정된 화면으로 이동하면 Board 화면만 보이게 됨. Card는 Board의 하위 컴포넌트이기 때문에 Board 컴포넌트에서 Card 컴포넌트가 보일 위치를 지정해 주어야 하기 때문임. 데이터 바인딩하기 데이터는 화면이 created() 된 후에 담을 수 있음. 이 상태에서는 데이터 속성과 메소드 속성은 정의되어 있지만 template의 Dom .. 2020. 2. 3.
[javascript] 자바스크립트 es6 map es6에서 우리는 key-value쌍을 저장하는 Maps라는 데이터 구조체를 사용할 수 있게 되었다. 우리는 어떤 객체든 key 또는 value로 저장할 수 있다. Maps를 사용하기 이전에는 키 값은 string만 사용 가능하지만 value는 무엇이든 들어갈 수 있었다. Maps를 사용하는 것은 간단하다. Maps는 아래 코드와 같이 정의할 수 있다. const superHero = new Map(); superHero.set('Superman', 'Clark Kent'); superHero.set('Batman', 'Bruce Wayne'); 하지만 set을 사용하여 키와 벨류 값을 넣는 대신에 nested array를 사용하여 각 배열의 첫번째 값을 key에 두번째 값을 value에 매칭시킬 수 있.. 2020. 2. 2.

티스토리툴바