ASH_Blog 전체보기
-
[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서html, css/css-display속성들 정리 2020. 5. 11. 22:34
01. display:grid에 대해서 (grid 소개) display: grid 라는 속성이 있습니다. (※ subgrid를 검색 해서 오신분은 본문 내용 하단 04번 내용을 바로 보시길 바랍니다.) display: grid를 처음 접하는 사람들에게 쉽게 이해를 할 수 있게 좀더 직관 적으로 설명을 해보면 grid는 다음과 같은 장점들이 있습니다. 1) grid를 사용 하면 아래의 형태의 레이아웃을 고민 안하고 쉽게 만들 수 있습니다. 2) 리스트 아이템 끼리 사이의 간격을 간단히 줄 수 있습니다. 보충설명을 하면 일반적으로 위에 이미지처럼 간격이 있는 카드 리스트 형태의 레이아웃을 코딩을 하기 위해서는 아래의 css 처럼 작성해야 합니다. float 속성을 사용한 css / grid 속성을 사용한 c..
-
비 전문가들을 위한 html,css, 웹퍼블리셔에 대한 설명html, css 2019. 6. 2. 21:57
보통 웹에 관련 일을 한다거나 웹을 공부 하는 분들을 제외한 일반 웹 사용자들은 크롬, 익스플로러 같은 브라우저 정도만 알 것입니다. 저 같은 경우도 웹 퍼블리셔 하기 전에는 크롬도 몰랐었는데요.;; 다른 사람들에게 제 직업을 소개 할 때 웹 퍼블리셔라고 소개 하면 함께 보충으로 설명을 해야 하는 것이 html 과 css 인대 이것 또한 웹에 관한 배경 지식이 없는 분들에게 이해가 가도록 설명을을 하는 것도 어려운대요. 그래서 html 과 css, 웹퍼블리셔에 대해서 웹에 관련 지식이 없는 분들도 이해가 가도록 포스팅을 하려고 합니다. 하나 하나 씩 천천히 설명을 해 보겠습니다. 우리가 즐겨 가는 쇼핑몰이나 포털 사이트, 그밖의 사이트 들은 그 사이트 만의 디자인이 있습니다. (사이트들이 레이아웃이나 폰..
-
display : flex 에대해서 - 2.flex-grow, flex-basishtml, css/css-display속성들 정리 2019. 4. 9. 13:29
지난 포스팅에는 ul에 display: flex를 적용 시켰을 때의 결과를 확인 하였습니다. 요번에는 display: flex를 적용시킨 태그(플렉스 컨테이너) 의 자식 태그(플렉스 아이템)들도 flex관련 속성을 적용 시킬 수 있는데 flex-grow, flex-shrink, flex-basis를 적용 시켰을때의 결과를 확인 하겠습니다. 현재 예제코드에서의 ul의 width는 560px 입니다. 먼저 li 에 flex-basis : 180px를 적용 시키겠습니다. 위에 이미지를 보면 li에 width가 180px로 적용된 것을 확인 하였는대요, flex-basis에대 대한 설명은 조금 미루고 이상태에서 flex-grow : 1을 더 추가 적용 해보겠습니다. flex-grow:1을 적용하였더니, li에 ..
-
display : flex 에대해서 - 1.flex-wraphtml, css/css-display속성들 정리 2019. 3. 9. 19:13
flex : 1 을 검색 해서 오신 부은 아래 링크의 글을 보시기 바랍니다. https://sh-sida.tistory.com/66?category=672722 display : flex 에대해서 - 2.flex-grow, flex-basis 지난 포스팅에는 ul에 display: flex를 적용 시켰을 때의 결과를 확인 하였습니다. 요번에는 display: flex를 적용시킨 태그(플렉스 컨테이너) 의 자식 태그(플렉스 아이템)들도 flex관련 속성을 적용 시 sh-sida.tistory.com display 속성중에 flex 는 익스플로러는 10부터 적용이 가능하며 최근 최신 브라우저만 대응 하는 프로젝트에서는 사용 할 수가 있습니다. flex는 관련 속성들이 많아서 천천히 하나씩 포스팅 할 계획입니..
-
책 - 새로운 CSS 레이아웃Book/새로운 CSS 레이아웃 2019. 2. 24. 13:22
레이철 앤드루 지음 / 이미령 역/ 웹액츄얼리코리아 일단은 작년 5월에 나온 최근 css 책이고 서점에서 우연히 봤는데, 좀 보다가 유용한 정보가 많아 바로 산 책 임. 짧은 후기를 쓰자면 이책에서 주로 다루는 내용은 css 속성중에 flex 와, grid에 대해서 설명 해 주고 있는데, 기존 float 과 absolute를 사용한 레이아웃들의 부족한점, 불편한점들을 보여주고, 똑같은 레이아웃을 flex와 grid드를 사용하여 기타 편하고 새로운 추가 기능 등을 보여줌으로써 좀 더 쉽고 유연하고 완벽한 레이아웃 만들 수 있는 것을 보여주고 있습니다. 각 각 해당 설명의 레이아웃의 예제들도 있어서 좀더 플렉스와 그리드를 배우는데 있어서 w3schools의 설명보다 쉽게 다가 왔고, 이 책을 보면서 내가 몰..
-
3.6 객체 -모든객체의 모형 - Objectjavascript/javascript마스터북(책) - 내용 정리 2019. 2. 9. 12:26
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. Object객체는 자신을 인스턴스화 할 수 있는 것 뿐만 아니라 다른 객체에 대하여 객체의 공통적인 성질/기능을 제공 한다. Object객체는 모든 객체의 기본 객체라고도 말 할 수 있다.'객체'라고 이름 붙은 모든것은 Object 객체에 정의된 프로퍼티나 메소드를 공통으로 이용 할 수 있다. 관련 메써드는 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object 이곳에서 확인 할 수 있다. assign 메소드로 기존의 객체를 결합할 수 있다.구문 : Object.assign(t..
-
3.3 객체 -값의 집합 관련(Array/Map/Set)javascript/javascript마스터북(책) - 내용 정리 2019. 2. 4. 14:07
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. javascript 는 값의 집합을 조작 하기 위해 Array, Map, Set 객체를 제공한다. Array : 배열형의 값을 취급하며, 배열에 대한 요소의 추가/삭제, 결합, 정렬등을 행하기 위한 기능 제공Array 관련 메소드는 https://www.w3schools.com/jsref/jsref_obj_array.asp 에 정리 되어 있음. Map : ES2015에서 추가 , 키/값의 세트 - 연상배열(해시)을 관리 하기 위한 객체Map 관련 메소드는 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/..
-
3. 객체 관련 개념 정리(객체, 인스턴스, 인스턴스화, 생성자, 인스턴스변수)javascript/javascript마스터북(책) - 내용 정리 2019. 2. 4. 13:05
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. 객체는 프로퍼티와 메소드로 구성 되어 있다. 프로퍼티와 매소드 관점에서 봤을때 객체란 데이터를 조작하기 위해 여러가지 기능을 가진 고기능의 그릇 객체의 원본에는 손을 대지 않고 원본을 복제한 복사본을 조작함으로써 데이터의 병합을 방지 하도록 되어 있다.객체의 복제를 만드는 것을 인스턴스화 라고 하며, 인스턴스화에 의해 만들어진 복제본을 인스턴스 라고 부른다. 인스턴스화를 하기 위해서는 new 연산자를 사용한다.var 변수 = new 객체명([인수,...]) 분홍색으로 칠한 부분( ) 을 생성자(constructor) 라고 부른다.new 객체명은 생성자명 이라고 할 수 있다..