[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리배경 이미지 속성종류설명background-color배경색을 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경 이미지를 지정background-repeat배경 이미지의 반복 방법을 지정background-position배경 이미지를  배치할 기준을 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절선형 그라데이션 속성종류설명방향끝 지점을 기준으로 to 예약어 2개까지 사용 가능 (left, rignt, top, bottom)각도그라데이션이 끝나는 각도 지정 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 27.
• textsms

[기본 개념] 3 | (3.2) 그라데이션

[기본 개념] 3 | (3.2) 그라데이션1 배경색과 배경 범위 지정하기2 배경 이미지 지정하기3> 그라데이션 효과로 배경 꾸미기3 그라데이션 효과로 배경 꾸미기선형 그라데이션 기본형linear-gradient (to 또는 , , [,  ...]) ; 방향 수평방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용하여 끝 지점을 기준으로 to 예약어와 함께 사용한다.  (ex.  방향을 사용해 선형 그라데이션 만들기) ... .grad { background : blue; // 지원하지 않는 웹 브라우저용 background : linear-gradient(to right bottom, blue, white); // 왼쪽 위에서 오른쪽 아래 방향으로..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 27.
• textsms

[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지

[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지1> 배경색과 배경 범위 지정하기2> 배경 이미지 지정하기3 그라데이션 효과로 배경 꾸미기1 배경색과 배경 범위 지정하기배경색을 지정하는 background-color 속성  배경색을 지정하려면 background-color 속성을 사용한다.  글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문서 전체에 상속되었지만 background-color값은 상속되지 않는다. 배경색의 적용 범위를 조절하는 background-clip 속성  박스 모델의 가장 외곽인 테두리까지 적용할지, 패딩 범위까지 적용할지, 내용 부분에만 적용할지 선택하려면 background-clip 속성을 사용한다. 종류설명border-box가장 외곽인 테두리까지 적용 (..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 20.
• textsms

07. 레이아웃 속성을 사용한 문제

07. 레이아웃 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(마우스 포인터를 올렸을 때 글자색과 배경색이 바뀌는 CSS소스는 미리 작성되어 있습니다.) 1. ul 요소의 불릿을 없앤다.2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다.3. 링크 요소인 a는 display 속성을 block으로 지정하고, 패딩을 10px, 20px로 지정한다. 배경색은 회색(#CCC)으로 지정한다.  메뉴1 메뉴2 메뉴3 메뉴4 결과 화면 A. 해설1. ul 요소의 불릿을 없앤다.--> ul 태그에 list-style 속성으로 지정한다.2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 16.
• textsms

06. 레이아웃 속성과 여백 속성을 사용한 문제

06. 레이아웃 속성과 여백 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. article 요소를 왼쪽으로 플로팅한다.2. article 요소의 너비는 350px, 높이는 200px, 마진과 패딩은 각각 10px로 한다.3. article 요소 주변에 1px짜리 회색(#ccc) 실선을 그린다.4. footer 요소에서 왼쪽 플로팅을 해제한다.  강아지 용품 준비하기 강아지 집 강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다. 강아지 먹이..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 13.
• textsms

05. 박스 모델 속성과 테두리 속성을 사용한 문제

05. 박스 모델 속성과 테두리 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그린다.2. border-radius 속성을 사용해서 사각형 테두리를 원형으로 바꾼다.3. box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가한다.(가로 세로는 각각 5px, 흐림 정도 30px, 번짐 정도 2px, 그림자 색상 #000)  결과 화면A. 해설1. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그린다.--> 스타일에 border 속성으로 지정한다.2. border-radius 속성을 사용해서 사각형 테두리를 원형으로 바꾼다.--> 스타일에 border-..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 13.
• textsms

[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리

[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리박스 모델 속성종류설명width박스 모델의 너비를 지정height박스 모델의 높이를 지정box-sizing박스 모델의 크기를 계산하는 기준을 지정box-shadow박스 모델에 그림자 효과 추가테두리 속성종류설명border-style상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정border-위치-styletop, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 스타일만 지정border-width상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정border-위치-widthtop, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 두께만 지정border-color상하좌우 4개 방향의 테두리..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 13.
• textsms

[기본 개념] 2 | (2.2) 여백 조절, 레이아웃, 위치 지정

[기본 개념] 2 | (2.2) 여백 조절, 레이아웃, 위치 지정1 CSS와 박스 모델2 테두리 스타일 지정하기3> 여백을 조절하는 속성4> 웹 문서의 레이아웃 만들기5> 웹 요소의 위치 지정하기3 여백을 조절하는 속성 요소 주변의 여백을 설정하는 margin 속성 기본형margin :  | | auto 종류설명예시너비값이나 높이값을 px나 em같은 단위와 함께 수치로 지정margin: 50px ;박스 모델을 포함한 부모요소를 기준으로 너비값이나 높이값을 퍼센트로 지정margin: 0.1% ;autodisplay 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정   주변 여백을 의미하는 마진은 요소와 요소 사이의 간격을 조절할 수 있다.  4개 방향에 한 번에 똑같이 지정할 수도 있고, 하이픈(-)..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 13.
• textsms