본문 바로가기

분류 전체보기83

CSS margin 요소 간 간격을 조절하는 속성 MARGIN이란? CSS에서 margin(마진)은 요소들 사이의 간격(여백)을 조절하는 속성입니다. 요소들이라고 하니 생소할 수 있는데요. 텍스트나 그림이나 특정 영역등 HTML 내의 모든 컨텐츠들을 말하는 겁니다. 마진은 가독성 뿐만 아니라 디자인 측면에서도 중요합니다. 사용법 - 기본적인 활용 .my-element { margin: 10px; } margin 뒤에 띄워야 하는 간격값을 넣습니다. px : 가장 일반적인 단위입니다. 고정된 픽셀 값으로 마진을 설정합니다 %(백분율) : 요소가 포함된 컨테이너의 크기에 대해 백분율로 마진을 설정합니다 em : 요소의 폰트 크기 대비 상대적인 크기로 마진을 설정합니다. 부모 요소의 폰트가 기준이 됩니다 rem : 최상위요소 (예를 들면 body에 달린 속성.. 2023. 6. 28.
40대 코린이의 코딩 배우기 4주차 이야기 (23.06.19~23.06.25) 코딩 배우기 4주차 이야기 아마 4주차 때는 공부를 거의 안했을 겁니다. 6월 19일에서 25일 사이에 올리는 포스트는 모두 예약글입니다. 왜냐하면 제가 미국을 가서 6월 27일에 귀국하기 때문이죠. 가족들과 뉴욕, 보스턴, 버팔로 여행을 다녀온 뒤일 건데요. 그래도 4주차 실천내용은 기록하려구요. 아무래도 제가 공부한 내용을 정리하면서 적다보니 고수분들에게 도움이 될 컨텐츠는 아닙니다. 하지만 저같이 40대 후반도 코딩 공부를 열심히 하면서 배워가고 있다는 것이 다른 분들에게도 자극 내지는 희망(?)이 되면 좋겠어요. 4주차에 실천한 내용 HTML태그, CSS 속성 공부한 내용 5개 포스트 발행 6월이 가기 전에 또 열심히 공부해보겠습니다. 2023. 6. 25.
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.

티스토리툴바