CSS outline5 CSS outline-offset CSS outline-offset outline-offset 속성은 아웃라인과 요소의 가장자리/테두리 사이에 공간을 추가한다. 요소와 요소 윤곽선 사이의 공간은 투명하다. 다음 예제에서는 테두리 가장자리 바깥쪽의 윤곽선 15px를 지정한다: outline-offset 속성 이 단락의 테두리 바깥쪽 윤곽선은 15px입니다. outline-offset 에 15px를 설정한 결과는 아래 그림과 같다. CSS outline-offset 속성을 간단히 실습하고 개념을 살펴보았다. 꼭 실습하기를 추천합니다. 모두 화이팅입니다.!!! 출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다. 2023. 7. 27. CSS outline 단축 속성 CSS outline - 단축 속성 outline 속성은 다음과 같은 개별 outline 속성을 설정하기 위한 단축 속성입니다: outline-width outline-style (required) outline-color outline 속성은 위 목록에서 하나, 둘 또는 세 개의 값으로 지정된다. 값의 순서는 중요하지 않다. 다음 예제에서는 단축 개요 속성으로 지정된 몇 가지 개요를 보여 줍니다: CSS outline - 1개 값 outline 속성 outline 단축속성-1개의값. - 파선 outline 속성에 dashed 값을 설정하여 아웃라인에 파선을 설정한다. 결과 화면은 아래 그림과 같다. CSS outline - 2개 값 outline 속성 outline 단축속성-2개의값. - 점선, 빨강색.. 2023. 7. 26. CSS outline-color CSS outline-color 속성 outline-color 속성은 윤곽선의 색상을 설정하는 데 사용된다. 색상은 다음과 같이 설정할 수 있다: name - "빨간색"과 같은 색상 이름을 지정합니다 HEX - "#ff0000"과 같은 16진수 값을 지정합니다 RGB - "rgb(255,0,0)"와 같은 RGB 값을 지정합니다 HSL - "hsl(0, 100%, 50%)"과 같은 HSL 값을 지정합니다 invert - 색상 반전을 수행합니다(색상 배경에 관계없이 윤곽선을 볼 수 있음) CSS outline-color name p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } outline-color를 이름 red로 설.. 2023. 7. 25. CSS outline-width CSS outline-width outline-width 속성은 아웃라인의 너비를 지정하며 다음 값 중 하나를 가질 수 있다: thin(일반적으로 1인치) medium(일반적으로 3인치) thick(일반적으로 5인치) 특정 크기(px, pt, cm, em 등) CSS outline-width thin p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } CSS outline-width를 thin으로 설정한 예제는 아래 표와 같다. outline-width 속성 A thin outline. outline-width를 thin으로 설정한 결과 화면은 아래 그림과 같다. CSS outlin.. 2023. 7. 24. 이전 1 2 다음
