CSS13 CSS selector(선택자) 선언, 작성하는 방법 CSS Selector (선택자)란? CSS는 HTML문서를 화려하게 아름답게 만드는 언어라고 이전 글에서 설명한 적이 있습니다. [CSS] - HTML을 스타일리쉬하게 만드는 CSS HTML을 스타일리쉬하게 만드는 CSS CSS란? CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, ITMAKEEASY.COM 다시 한번 CSS 구조를 살펴보면 아래와 같습니다. P 태그에 대하여 (선택자 정의) color는 (속성) blue로 표시해라 (속성값) 을 나타낸거에요. 이 때 P가 selector (선택자) 입니다. CSS에서 선택자는 전체 .. 2023. 7. 17. CSS margin 요소 간 간격을 조절하는 속성 MARGIN이란? CSS에서 margin(마진)은 요소들 사이의 간격(여백)을 조절하는 속성입니다. 요소들이라고 하니 생소할 수 있는데요. 텍스트나 그림이나 특정 영역등 HTML 내의 모든 컨텐츠들을 말하는 겁니다. 마진은 가독성 뿐만 아니라 디자인 측면에서도 중요합니다. 사용법 - 기본적인 활용 .my-element { margin: 10px; } margin 뒤에 띄워야 하는 간격값을 넣습니다. px : 가장 일반적인 단위입니다. 고정된 픽셀 값으로 마진을 설정합니다 %(백분율) : 요소가 포함된 컨테이너의 크기에 대해 백분율로 마진을 설정합니다 em : 요소의 폰트 크기 대비 상대적인 크기로 마진을 설정합니다. 부모 요소의 폰트가 기준이 됩니다 rem : 최상위요소 (예를 들면 body에 달린 속성.. 2023. 6. 28. CSS font-style, 텍스트 스타일을 변경하는 속성 FONT-STYLE 속성이란? font-size는 텍스트 크기, font-family는 글꼴을 선택하는 속성입니다. font-style는 주로 폰트를 이탤릭체로 변경하는데 사용하는 속성입니다. 사용법 p { font-style: italic; } font-style 뒤에 속성값을 입력합니다 italic : 글꼴이 기울어집니다 normal : 기본값입니다. 기울어지지 않은 평범한 글꼴입니다 oblique : 마찬가지로 글꼴을 기울입니다 italic과 oblique의 차이점? italic도 글꼴을 기울이고, oblique도 같은 기능을 한다면 왜 이렇게 두개나 만들었는지 궁금해졌어요. 그래서 이번에도 검색해보았습니다 itatic을 사용한다는건 폰트 제작자가 명시적으로 디자인한 이탤릭체 스타일을 이용하라는 뜻.. 2023. 6. 24. CSS font-family, 웹 폰트를 정의하는 속성 FONT-FAMILY 속성이란? CSS의 여러 속성 중 color와 함께 많이 사용되는 속성 같아요. font-family는 웹페이지에서 사용할 폰트(글꼴)을 정하는데 사용합니다. 요즘 웹페이지는 디자인 요소가 중요하고 특히 텍스트는 Typography라고 할 정도로 중요합니다. 글꼴이 일반 돋움체나 맑은고딕을 사용할 때보다 산돌고딕이나 프리텐다드를 사용하면 더 예뻐보이잖아요. 사용법 body { font-family: Arial, Helvetica, "Times New Roman"; } 위에서는 body를 예시로 들었습니다. 대부분 body에 전체 글꼴을 정의하더라구요 font-family: 뒤에 글꼴을 입력합니다 폰트에 공백이 있을 경우는 따옴표로 묶어줘야 해요 예시 여러 폰트를 사용해본 예시입니다... 2023. 6. 23. 이전 1 2 3 4 다음
