html, 스타일시트(css, scss)41 [html/css] 투명도(opacity, alpha)의 차이 투명도를 조절하는 opacity 와 alpha 컨텐츠에 투명도를 적용하고 싶을 때, opacity와 alpha를 이용한다.투명도는 0부터 1까지의 값을 입력하며, 소수점 단위로 투명도를 조절할 수 있다. (0=투명, 1= 불투명) opacity의 경우 속성명에 쓰이며 적용한 선택자의 border, 컨텐츠 등 모든 내용을 투명하게 만들고,alpha의 경우 색상에 rgba로 속성값으로 쓰이며 적용한 해당 속성만 투명하게 만든다. /* opacity는 '속성명'이다. */선택자{opacity: 숫자;}/* alpha는 '속성값'이다. */선택자{속성명: rgba(red, green, blue, alpha);} 예시로 test01~03을 만들어 적용해 보았다. 아무것도 적용하지 않은 상태 배경색상에만 alph.. 2024. 6. 14. [html/css] 배경 속성(Background) 배경 속성Background 웹 문서를 꾸미기 위해 이미지나 여러 속성들을 적용하는 속성이다.1. background-color배경에 색상을 지정한다. (색상명, #hex, rgb, rgba... 등)background-color : #fff;2. background-image배경에 이미지를 넣을 수 있다. url(이미지경로)속성을 사용한다.여러 이미지를 넣을 경우 컴마(,)로 구분하여 불러오고 앞(좌측)에 있는 이미지가 가장 앞으로 나온다.background-image: url(이미지주소), url(이미지주소);3.background-repeat배경을 반복할 것인지 여부를 지정한다. 기본값은 바둑판 배열로 되어있다.[속성값] ① no-repeat : 반복X, 불러온 이미지를 1번만 보여준다. .. 2024. 6. 14. [html/css] 선택자 뿌수기!!(후손선택자 / 자손선택자 / 동위선택자 / 속성선택자 / 반응선택자 / 구조선택자 / 형태구조선택자 / 상태선택자 / 시작문자선택자 / 가상요소 선택자) 후손선택자후손 선택자는 부모안의 자식들을 선택하는 선택자를 말한다. 부모 안의 자식들을 선택할 때, 공백으로 표기한다.부모태그 자식태그{속성명: 속성값;}ex) div p{color: blue;}더보기 후손선택자의 사용방법을 보기 위해 예시를 하나 만들어 보겠다. 박스1 /박스1-스판태그/ /박스1-첫번째-P태그/ /박스1-두번째-P태그/ 박스2 /박스2-스판태그/ /박스2-첫번째-P태그/ /박스2-두번째-P태그/ (예시1) 박스1 /박스1-스판태그/ /박스1-첫번째-P태그/ /박스1-두번째-P태그/.. 2024. 6. 11. [html/css] 목록 스타일 속성 꾸미기 / List-style-type 목록 스타일 속성 목록 태그 앞에 붙는 불릿이나 숫자의 모양을 바꿔주거나 들여쓰기를 제어 할 수 있다. list-style 속성을 쓰면 type과 position을 한꺼번에 선언할 수 있다. 목록 태그를 들여쓰기 혹은 내여쓰기하는 속성이다. List-style-position : 목록태그의 들여쓰기 부분List-style-position: inside; (불릿이나 숫자를 안쪽으로 들여쓰기)List-style-position: outside; (불릿이나 숫자를 바깥쪽으로 내여쓰기) ul의 불릿이나 ol의 숫자를 다양한 형태로 바꿀 때 사용한다. List-style-type: disc (●)List-style-type: circle (○)List-style-type: square (■)List.. 2024. 6. 11. [css] 드레그 했을 때 글자 배경과 글자 색 바꾸는 방법 드레그 했을 때 글자 배경과 글자 색 바꾸는 방법보통 전체선택자 밑에 작성한다. 배경색과 글자 색을 지정해주면 색이 변한다.::selection{속성값;} 2024. 6. 11. [html/css] Overflow와 Scrollbar 꾸미기 overflow 박스 안의 컨텐츠가 많아 범위를 넘어갈 때 사용하는 속성이다.hidden, scroll, visible, auto, initial, inherit 과 같은 속성값을 사용해 범위밖을 보여줄 방식을 정한다.overflow: hidden; ★★★ height 속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다. 만약 height 속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.overflow: scroll; ★★★영역을 벗어나는 부분은 스크롤 바가 나타나게한다.overflow: visible;기본값으로, 영역에서 벗어난 부분을 그대로 보여준다.overflow: auto; ★박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다.overflow: initi.. 2024. 6. 11. 이전 1 2 3 4 5 6 7 다음
