본문 바로가기

CSS

[CSS] letter-spacing 자간조정 / line-height 행간조정
CSS 2021. 11. 9. [CSS] letter-spacing 자간조정 / line-height 행간조정 [CSS] letter-spacing 자간조정 / line-height 행간조정 행간은line-height속성에서 지정합니다. 값 지정 방법에는 몇가지 있지만 가장 추천한 것은 px등의 단위를 쓰지 않고 수치만으로 지정하는 방법입니다. line-height: 1.5같은 식입니다. 수치만으로 지정하면 문자의 높이를 1로 폰트 크기에 따라서 행간을 계산할 것입니다. 예를들어 line-height:1.5로 하면 문자 높이의 1.5배의 행간이 됩니다. 추천은 line-height:1.5-2 사이 1.5-2.0사이로 하면 읽기 쉬운 행간에 됩니다. 이 범위에서 취향에 따라 행간을 설정하면 될 것입니다. 자간(글자 간격)은 letter-spacing라는 속성으로 설정합니다. letter-spacing속성이 문자와 ..
Font Awesome의 사용법: 웹 아이콘 폰트를 사용
CSS 2021. 11. 8. Font Awesome의 사용법: 웹 아이콘 폰트를 사용 Font Awesome의 사용법: 웹 아이콘 폰트를 사용 이번에는Font Awesome라는 초편리한 서비스의 사용법을 정리합니다.후반에서는 아이콘으로 다양한 애니메이션 효과를 붙이는 방법도 설명합니다. 1. Font Awesome이란? 웹 사이트나 블로그에서 웹아이콘 폰트를 표시할 수게 하는 서비스입니다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 웹 아이콘 폰트란? 웹 페이지상에서 문자와 같이 표시할 수 있는 아이콘입니다. 화상에서 아이콘을 붙이는 것..
[CSS]max-width와 min-width사용법 모음
CSS 2021. 11. 7. [CSS]max-width와 min-width사용법 모음 [CSS]max-width와 min-width사용법 모음 스마트 폰에서도 PC에서도 어떤 크기의 단말로 봐도 적당한 크기에 표시되는 Web디자인을 만들려면 min-width와 max-width를 피할 수 없습니다. 이는 각각 width의 최소값과 최대값을 결정하는 편리한 것입니다. 2021.11.05 - [CSS] - 1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터 1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터 CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터 CSS 기본부터 천천히 배워 나갑니다. 개념이 명확해야 응용이 가능하므로 하나씩 착실하게 익혀나갑시다. 1. 기본지식 연습중입니다. yyjily.tistor..
[CSS] display 사용법을 총정리! inline이나 block의 차이점은?
CSS 2021. 11. 6. [CSS] display 사용법을 총정리! inline이나 block의 차이점은? [CSS] display 사용법을 총정리! inline이나 block의 차이점은? 1. display는? 'display'란 속성 1개로 하나의 요소의 표시형식을 정하는 것입니다. 예를 들어 p {display:block} 이나 span {display: inline} 처럼 쓰입니다. 1-2. 속성은? display에 대한 값으로 아래와 같이 4가지 속성을 사용할 수 있습니다. block
1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터
CSS 2021. 11. 5. 1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터 CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터 CSS 기본부터 천천히 배워 나갑니다. 개념이 명확해야 응용이 가능하므로 하나씩 착실하게 익혀나갑시다. 1. 기본지식 연습중입니다. 요소라는것은 , 의 덩어리 전체를 말합니다. 예를들어 ' 연습중입니다. '는 1개의 요소입니다. 위와 같이 태그의 경우 'p의 부모 요소는 div' 이며 'div의 자식 요소는 p' 입니다. 2. CSS의 height와 width는? height는 '요소의 높이'를 정하고 width는 '요소의 너비'를 결정하는 것입니다. 2-1. 글쓰기 html코드 예시입니다. CSS코드 p{width:100px; height:100px; background: orange;} 위와 같이 height와 width의 값..

티스토리툴바