본문 바로가기

CSS33

CSS3의 박스모델 Box ModelCSS3는 HTML의 요소를 콘텐츠(content), 패딩(padding), 테두리(border), 여백(margin)으로 구성된 사각형 박스로 다룬다.컨텐츠(content)HTML태그의 텍스트나 이미지 부분패딩(padding)컨텐츠를 직접 둘러싸고 있는 내부 여백테두리(border)padding 외부의 외곽선외곽선(outline)border의 바깥쪽에 그려지는 여백선으로 크기에 영향을 끼치지 않는다. 여백(margin)박스의 맨 바깥 영역으로 테두리 바깥 공간으로 인접한 태그와 만나는 공간Box Style박스의 스타일을 width, height, padding, margin을 통해서 제어할 수 있다. width | heightwidth와 height은 컨텐츠 영역의 width와 heig.. 2024. 7. 7.
CSS에서 배경에 이미지를 넣어보자 이전 문서에서 배경에 그라데이션을 넣는 방법에 대해 작성했었다. 이번에는 배경에 이미지 혹은 색상을 넣어보는 방법에 대해 적어보고자 한다.  background-color배경에 색깔을 지정할 수 있다. 텍스트에 색깔을 지정하는 것과 같이 RGB, HSL 등을 통해 지정이 가능하다.background-image: url('이미지주소');배경에 이미지를 불러올 수 있다. 기본적으로 이미지를 삽입하게 되면 브라우저의 크기에 따라 이미지가 반복해서 출력이 된다.background-repeat: repeat-x | repeat-y | no-repeat;배경의 반복을 설정할 수 있다. repeat-x는 x축으로 반복, repeat-y는 y축으로 반복, no-repeat는 반복하지 않는다는 뜻이다.background.. 2024. 7. 4.
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.

티스토리툴바