반응형 Box Model5 [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 - 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. [CSS] Box Model - 기본 요소 안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념이에요. CSS box model은 위의 그림처럼 4개의 속성들로 이뤄져있어요 Content – The text, image, or other media content in the element. Padding – The space between the box’s content and its border. Border – The line between the box’s padding and margin. Margin – The space between the box and surroundin.. 2020. 1. 30. 이전 1 다음 반응형
