본문 바로가기
반응형

분류 전체보기177

[CSS] Flexbox - Flex Containers 안녕하세요 냥장판 입니다 지난 게시글에서는 Flexbox에 대한 대략적인 개념에 대해서 설명했어요. 2020/02/24 - [놀고있네/HTML & CSS] - [CSS] Flexbox - 기본개념 [CSS] Flexbox - 기본개념 안녕하세요 냥장판 입니다 이번 게시글에서는 CSS Flexbox 라는 개념에 대해서 알아볼 거에요. 1. Flexbox Flexbox는 Flexible Box Layout을 말해요 Flexbox란 정렬, 방향, 순서, 사이즈 등 사용자 인터페이스 디.. miaow-miaow.tistory.com 이번 게시글에서는 좀 더 세분화해서 flexbox에 대해 접근해 보고자 합니다. 1. Flex container Flexbox 에는 Flex container와 Flex item이라.. 2020. 2. 26.
[CSS] Flexbox - 기본개념 안녕하세요 냥장판 입니다 이번 게시글에서는 CSS Flexbox 라는 개념에 대해서 알아볼 거에요. 1. Flexbox Flexbox는 Flexible Box Layout을 말해요 Flexbox란 정렬, 방향, 순서, 사이즈 등 사용자 인터페이스 디자인에 최적화된 Box model 라고 보시면 됩니다. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소 [CSS] Box Model - 기본 요소 안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념.. miaow-miaow.tistory.com.. 2020. 2. 24.
[CSS] Float 란? 안녕하세요 냥장판 입니다 이전에 Box model에서는 컨텐츠(contents)를 박스형으로 봤을 때, block 형인지, inline 형인지에 대해 알아봤고요. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - Block, Inline 개념 이해하기 이 contents 주변에 padding, margin, border 는 어떻게 구성이 되는지에 대해 알아봤어요. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - Block, Inline 개념 이해하기 이번 게시글에서는 CSS에 Float라는 속성을 살펴볼 거에요. 영어로 .. 2020. 2. 14.
[CSS] Box Sizing - content box, border box 목표: box-sizing 속성 파악하기 요약 content box: width를 content 크기로 지정 border box: width를 actual width 로 지정 안녕하세요 냥장판 입니다 지난 게시글에서는 CSS에서 많이 사용되는 Box moedel에 대해서 살펴봤어요. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소 [CSS] Box Model - 기본 요소 안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념.. miaow-miaow.tistory.com 이번에는 이 box.. 2020. 2. 7.
[CSS] Box Model - Margin 안녕하세요 냥장판 입니다😀😀 지난 게시글에서는 CSS에 box model의 기본 개념에 대해서 알아봤어요. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소 [CSS] Box Model - 기본 요소 안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념.. miaow-miaow.tistory.com Padding, Border에 대한 설명은 아래 게시글 참고하세요! 2020/01/31 - [놀고있네/HTML & CSS] - [CSS] Box Model - Padding [CSS] Box Mo.. 2020. 2. 6.
[CSS] Box Model - Borders (border-image) 안녕하세요 냥장판 입니다 이번 게시글에서는 이미지파일을 이용해서 테두리를 만들어 볼거에요. 기본적인 개념은 Border 를 참고하시면 됩니다. 2020/02/03 - [분류 전체보기] - [CSS] Box Model - Borders [CSS] Box Model - Borders 안녕하세요 냥장판 입니다 지난 게시글에서는 Padding에 대해 알아봤는데요. 2020/01/31 - [놀고있네/HTML & CSS] - [CSS] Box Model - Padding 이번 게시글에서는 Box model 에서 Border에 대해 알아볼거에요 보.. miaow-miaow.tistory.com 1. border-image 속성값 CSS에서 border-image는 테두리를 이미지로 적용하는 속성입니다. 속성 설명 b.. 2020. 2. 6.
[CSS] Box Model - Borders 안녕하세요 냥장판 입니다 지난 게시글에서는 Padding에 대해 알아봤는데요. 2020/01/31 - [놀고있네/HTML & CSS] - [CSS] Box Model - Padding 이번 게시글에서는 Box model 에서 Border에 대해 알아볼거에요 보더(Border)는 컨텐츠와 패딩(Padding)을 둘러싸는 테두리에요. 1. 보더 속성 보더의 속성은 아래와 같아요. padding과 마찬가지로 단돌그오 쓰일 수도 있고, top, bottom, right, left 값을 별도로 지정할 수 있어요. border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style.. 2020. 2. 4.
[CSS] Box Model - Padding 1. 패딩 속성 값 사용 방법 2. 패딩 속성 3. Padding 속성 사용하기 * Padding 에서 % 사용하는 방법 안녕하세요 냥장판 입니다 지난 게시글에서는 CSS에 box model의 기본 개념에 대해서 알아봤어요. 2020/01/30 - [놀고있네/HTML & CSS] - [CSS] Box Model - 기본 요소 이번 게시글에서는 기본 요소 중 Padding에 대해서 알아볼거에요. 패딩(padding)은 컨텐츠를 둘러싼 공간으로 안쪽여백을 말합니다. 1. 패딩 속성 값 사용 방법 패딩(padding) 속성값으로 사용할 수 있는 것들은 아래와 같습니다. length - 특정 길이 단위 사용(px, pt, cm, etc.) % - 컨텐츠 요소(content)의 넓이(width)를 기준으로한 비율.. 2020. 1. 31.
[CSS] Box Model - Block, Inline 개념 이해하기 안녕하세요 냥장판 입니다 이번 게시글에서는 CSS에서 가장 많이 사용되는 레이아웃 개념인 Box Model 에 대해 알아보기 전에! Display의 기본 개념인 Block, Inline에 대해서 알아볼게요 Display의 기본 개념 - Block, Inline 이전에 제가 다뤘던 display 요소라는 HTML 포스트가 있어요. 여기도 마찬가지로 block과 inline에 대한 내용을 다룹니다. 자세한 내용은 아래 게시글 참고하시고요. 2020/01/17 - [놀고있네/HTML & CSS] - [HTML] display 요소(p, div, span)의 차이점 [HTML] display 요소(p, div, span)의 차이점 목표: p, div, span 등의 차이점 요약 Display 요소의 특징(blo.. 2020. 1. 30.
반응형

티스토리툴바