반응형 CSS19 [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. [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. [CSS] CSS에서 Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 CSS와 HTML에 적용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 안녕하세요 냥장판 입니다 이번 시간에는 CSS에 Google Fonts를 적용하는 방법에 대해 알아볼거에요. CSS파일 없이 HTML에만을 사용해서 Google Fonts를 적용하고 싶다면 아래 게시글을 참고하세요 2019/11/21 - [기타] - [Font] Google Fonts 사용하기 [Font] Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 사용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 1. Google Fonts 접속 Google Fonts URL: https:.. 2020. 1. 23. [CSS] CSS 선택자 사용법 안녕하세요 냥장판 입니다 CSS는 HTML과 같은 마크업언어의 디자인을 위한 언어에요. CSS도 기본 문법이 존재하고, 그 문법을 기반으로 HTML과 연결됩니다. 이번 게시글에서는 선택자를 사용하는 방법에 대해서 알려드릴게요. 1. 선택자 사용 방법 기본 개념은 HTML의 태그 값을 선택자에 가져다가 쓰는 거죠. 이 선택자를 어떻게 가져오는지에 따라 사용 방법이 달라요. 선택자를 사용하는 방법은 크게 4가지입니다. HTML 태그/요소 그룹(group) 아이디(id) 클래스(class) style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785466884"> 2... 2020. 1. 22. [CSS] CSS 기본 문법, 사용방법 안녕하세요 냥장판 입니다 앞에서 CSS 개념에 대해 배웠었죠 이번 게시글에서는 CSS 문법에 대해서 살펴볼거에요. 1. CSS 기본 구조 CSS는 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자는 CSS를 적용하고자 하는 HTML Tag/elements가 오고요 선언부는 중괄호({ })안에 위치하고, 선언들은 세미콜론(;)으로 구분합니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. style=".. 2020. 1. 21. 이전 1 2 3 다음 반응형
