본문 바로가기

Frontend145

CSS로 list-style을 변경해보자 list-style목록을 작성할 때 항목의 마커들의 스타일을 변경하는 방법 중 하나다.  list-style-type: disc | circle | square | none;마커들의 모양을 ●(disc, 기본값), ○(circle), ■(squar), none으로 변경할 수 있다. list-style-position: inside | outside;마커들의 위치를 목록의 안쪽에(inside) 포함할지, 안의 컨텐츠와 분리해서 앞쪽에 위치시킬지(outside, 기본값) 설정할 수 있다.list-style-image: url('이미지주소'); 이미지를 사용하여 마커를 변경 할 수 있다. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요.. 2024. 7. 3.
CSS의 overflow 기능에 대해 알아보자 Overflowoverflow의 경우 너비를 컨텐츠가 넘었을 경우에 사용하는 방법으로 요소를 잘라내거나 말 줄임표(...)를 사용하거나 스크롤바를 추가하거나의 방법을 통해 요소의 크기에 맞출 수 있다. overflow는 블록 태그에만 적용되며, 요소가 너비를 넘었을 경우 사용하는 방법이기때문에 width 혹은 height가 설정되어야 한다. overflow: visible | hidden | scroll; 프로퍼티 종류visible정해놓은 블럭의 너비를 넘어서 컨텐츠가 보인다. (디폴트 값)hidden블럭의 너비를 넘은 컨텐츠는 숨겨서 보이지 않게 한다. scroll블럭의 너비를 넘은 컨텐츠를 스크롤을 통해서 컨텐츠를 볼 수 있게 한다. scroll을 숨기고 싶을 경우에는 overflow-x: hidde.. 2024. 7. 2.
CSS3에서 텍스트를 정렬하는 방법 이전에는 direction: ltr; / direction: rtl; 을 사용하여 왼쪽에서 오른쪽, 오른쪽에서 왼쪽 정렬방식을 사용했으나 현재는 text-align을 통해 정렬이 가능하고,  white-space를 사용하여 텍스트 출력을 그대로 가능하게 할지 선택이 가능하다.  text-align: left | right | center | justify;left는 왼쪽정렬, right는 오른쪽정렬, center는 중간정렬, justify는 균등하게 정렬한다. white-space: normal | nowrap | pre | pre-line | pre-wrap;공백을 어떻게 처리할지 정의한 내용으로, white-space: pre의 경우 연속된 공백과 줄바꿈을 그대로 사용할 수 있다. 들여쓰기를 하고싶은.. 2024. 7. 2.
CSS에서 텍스트에 색과 그림자를 입혀보자 CSS3에서 색상을 지정하는 방식은 RGB, HSL, HWB, LAB, LCH가 있다. 이 중에서 우선 RGB와 HSL 방법에 대해 설명할 예정이다.  RGBRGB에서 색을 표현하는 방법은 3가지 방법이 있다. 색상 이름을 통한 컬러 지정 방식, 16진수를 활용한 컬러 지정방식 그리고 10진수와 RGB()코드를 활용한 컬러 지정방식이다. color: 색상명;CSS3 표준에서는 총 140개 색의 이름을 정하고 있어, 이름을 사용하여 색을 표현할 수 있다. color: #RRGGBB;16진수(0~0xFF)로 표현하는 방법이다. red성분, green성분, blue성분을 16진수로 표현하여 표시한 것이다.color: rgb(RR,GG,BB) | rgba(RR,GG,BB, opacity); r,g,b의 성분을 .. 2024. 7. 2.
CSS에서 폰트를 꾸며보자 폰트 지정웹 문서에서 사용할 글꼴을 지정할 수 있다. 윈도우에서 기본적으로 제공하는 글꼴이 있지만 그것들로는 폰트를 설정하는 것에 한계가 있다. CSS3에서는 웹 폰트를 도입해서 웹에서 태그 혹은 @import를 이용하여 받아 사용이 가능하다.font-family:"글꼴이름"; 글꼴의 글씨체를 바꿔보자 구글의 웹폰트를 사용해보자 (기본)구글의 웹폰트를 사용해보자 font-size글자 크기를 지정하는 스타일로, px(픽셀) 등의 절대크기로 지정하거나 medium, xx-small등의 상대크기 혹은 백분율을 사용했으나 이런 방법은 반응형 웹에서 유동적이지 않아서 최근에는 em, rem(배수)을 많이 사용한다. em의 경우 픽셀값으로 변환할 때에 사용된 요소의 폰트 크기에 따라 결정되며 상위 .. 2024. 7. 1.
CSS3의 기본 문법에 대하여 CSS(Cascading Style Sheets)는 HTML 문서의 글꼴이나 색상, 정렬 등 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 함께 웹 문서의 기본 개념으로 디자인과 내용을 분리 목적으로 등장했다.선택자{속성:속성값;}스타일의 기본 형식은 스타일 규칙이 어디에 적용될지를 정하는 선택자(selector)와 어떤 항목을 어떻게 변경할지에 대해 적어놓은 속성:속성값;으로 기본적으로 이루어져 있다.  선택자(selector)의 종류선택자는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다. 셀렉터에는 여러 유형이 있다. *{}전체선택자는 웹 페이지 전체에 적용되는 스타일을 설정한다. 각 브라우저에서 제공되는 디자인을 초기화하기 위한 방법으로 사용되는 경우가 .. 2024. 7. 1.

티스토리툴바