홈페이지 만들기/2단계. CSS16 Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위 Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위 CSS는 Cascading Style Sheet의 줄임말입니다. Style Sheet는 스타일을 지정해주는 종이(?) 또는 페이지 정도로 이해하면 됩니다. 그러면 Cascading이란 무엇일까요? Cascading이란 '위에서 아래로 흐르는', '상속 또는 종속하는'의 의미를 갖고 있습니다. 따라서 Cascading은 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미하게 됩니다. 블라블라 위 설명이 분명 확 와닿지 않을 것입니다. 아래 예시를 통해 그 의미를 알아봅시다. 위와 같은 코드가 있다고 해봅시다. 그런데 만약 에서는 글자색을 빨간색으로 지정하고, 에서는 글자색을 파란색으로 지정하고, 에서는 글자색.. 2020. 12. 4. CSS 목록 스타일: list-style-type list-style-image list-style-position list-style CSS 목록 스타일: list-style-type list-style-image list-style-position list-style li 태그를 사용하면, 텍스트 리스트(목록)를 만들 수 있습니다. 이런 리스트에도 스타일을 지정해 줄 수 있는데요. 오늘은 list-style-type, list-style-image, list-style-position, list-style을 사용해 리스트 스타일을 지정해줘보겠습니다. list-style-type(순서가 없는 목록의 스타일을 변경할 때) - ul 태그를 사용하면 순서가 없는 목록을 만들 수 있습니다. - 순서가 없는 목록은 텍스트 좌측에 불릿(bullet)이라고 부르는 기호(?)가 들어갑니다. - 이 불릿의 모양을 list-style-type 속성을 사.. 2020. 12. 2. CSS 문단 스타일: line-height text-overflow CSS 문단 스타일: line-height text-overflow 대부분 한글 오피스로 작업을 하며 줄간격을 조절해 본 적이 있을 것입니다. 줄이 너무 다닥다닥 붙어 있으면 가독성이 떨어지지요. 그래서 한글 오피스에서는 ??%로 되어 있는 줄간격을 조절해서 줄의 간격을 조절해줍니다. CSS를 활용해서도 줄간격을 조절해줄 수 있습니다. 오늘은 줄 간격을 조절해보고, 넘치는 텍스트를 어떻게 표시할지 정해보도록 하겠습니다. line-height - 줄간격을 조절하기 위해서는 line-height 속성을 사용합니다. 기본형을 아래와 같습니다. - 선택자 { line-height: 크기 or 숫자 or 백분율; } - 먼저 크기 값을 넣어 줄 간격을 지정해줄 수 있습니다. - 크기 값은 전에 배운대로 px, p.. 2020. 11. 30. CSS 문단 스타일: direction text-align text-indent 오늘은 문단 관련 스타일을 배워 보겠습니다. 글자 쓰기 방향, 텍스트 정렬, 들여쓰기 등에 대해 배워봅시다. 1. direction - direction 속성은 텍스트를 어느 방향부터 쓰기 시작할지 지정해줍니다. - 선택자 { direction: 속성값; }과 같은 형식으로 작성해줍니다. - 속성값을 ltr로 설정하거나, direction 속성을 지정하지 않을 시 왼쪽에서부터 텍스트를 써줍니다. - ltr은 left-to-right의 줄임말입니다. 즉, '왼쪽에서 오른쪽으로'라는 뜻입니다. - 속성값을 rtl로 설정하면 오른쪽에서부터 텍스트를 써줍니다. - rtl은 right-to-left의 줄임말입니다. 즉, '오른쪽에서 왼쪽으로'라는 뜻입니다. 2. text-align - text-align 속성은 .. 2020. 11. 19. CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing 오늘은 텍스트에 그림자 효과를 주고, 텍스트의 간격과 공백을 조절해보겠습니다. 1. text-shadow - text-shadow 속성을 사용하면 텍스트에 그림자 효과를 줄 수 있습니다. - 선택자 { text-shaodw: 가로거리 세로거리 번짐정도 색상; }와 같은 형식으로 사용합니다. - 가로거리는 필수로 입력해야하는 값입니다. 텍스트부터 그림자까지의 가로 거리를 의미합니다. 양수 값은 글자 오른쪽으로 그림자를 만들고, 음수 값은 글자 왼쪽으로 그림자를 만듭니다. - 세로거리는 필수로 입력해야하는 값입니다. 텍스트로부터 그림자까지의 세로 거리를 의미합니다. 양수 값은 글자 아래쪽으로 .. 2020. 11. 16. CSS 텍스트 스타일: color text-decoration text-transform CSS 텍스트 스타일: color text-decoration text-transform 앞에서는 글꼴과 관련된 스타일을 배워보았습니다. 이번에는 글자의 색깔, 장식, 효과 등을 지정해주는 텍스트 스타일을 배워보겠습니다. 1. color - color 속성을 사용하면 글자 색을 지정할 수 있습니다. - 선택자 { color: 색상; } 의 형식으로 사용합니다. - 주로 세 가지 방법으로 색상을 지정해줍니다. - 첫 번째 방법은 색상의 이름을 써주는 것입니다. 위 예시에서 .blue { color: blue; }로 작성된 부분이 그것입니다. 파란색으로 색상을 지정해 준 것입니다. - 두 번째 방법은 rgb값을 써주는 것입니다. 위 예시에서 .red { color: rgb{255, 0, 0); }로 작성된 .. 2020. 11. 12. 이전 1 2 3 다음 반응형
