본문 바로가기

Frontend/CSS31

CSS에서 배경에 그라데이션을 넣어보자 점진적으로 색을 낼 수 있게 하는 그라데이션은 linear-gradient, radial-gradient, conic-gradient의 3가지 방법이 있다. 이 중에서 linear과 radial gradient에 대해 알아볼 예정이다.  background: linear-gradient (방향, 시작색, ... ,끝색); 색상이 수직이나 수평 또는 대각선 방향으로 색이 변하는 형태로 방향의 경우에는 각도를 사용해도되며 (0deg, 45deg, 90deg 등...) 방향을 나타내는 to down, to up, to left, to right를 사용해도 된다.background: repeating-linear-gradient(방향, 시작색 너비정도, ... , 끝색 너비정도); repeating을 사용하면 .. 2024. 7. 3.
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.

티스토리툴바