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

04. 글자 속성과 텍스트 스타일 속성을 사용한 문제

04. 글자 속성과 텍스트 스타일 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 제목 스타일은 글자색 #ff0000, 글자 크기 1.5em, 가운데 정렬로 한다.2. 본문 스타일은 글자 크기 1.2em, 줄 간격 2em, 굵은 글자, 가운데 정렬로 한다.3. 이름이 accent인 클래스 스타일을 글자색 #0000ff로 정의한다.4. 이름이 smalltext인 클래스 스타일을 글자 크기 0.7em로 정의한다.5. 태그로 묶은 '오후 2시 이전'과 '100% 환불'에 accent 클래스 스타일을 적용한다.6. 태그로 묶은 '상담시간: ~ 공휴일 휴무)'에 smalltext 클래스 스타일을 적용한다.  ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 4. 11.
• textsms

03. 표 스타일 속성을 사용한 문제

03. 표 스타일 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 태그에 포함된 border="1" 속성을 삭제한다.2. 표와 셀에 테두리 1px solid black를 그린 후 한 줄로 표시한다.3. 표의 캡션은 표 아래쪽에 표시한다.4. 각 셀에 padding : 10px을 적용하여 작성한다.5. 배경색을 #eee로 지정하는 클래스 선택자 .heading을 정의한 후 첫 번째 행과 열에 적용한다.  2019 국민 독서실태 구분 성인 독서자 종이책 6.1권 11.8권 전자책 1.2권..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 4. 11.
• textsms

02. 텍스트 스타일 속성을 사용한 문제

02. 텍스트 스타일 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 글자색을 흰색(#fff 또는 white)으로 지정한다.2. 텍스트를 기준으로 오른쪽 아래, 가로 거리 3px, 세로 거리 2px 되는 위치에 번짐 정도 5px 되는 그림자 효과를 추가한다. 그림자 색은 검정(#000 또는 black)으로 지정한다.  웹 개발 기초 결과 화면A. 해설1. 글자색을 흰색(#fff 또는 white)으로 지정한다.--> 스타일에 color 속성으로 색을 추가한다.2. 텍스트를 기준으로 오른쪽 아래, 가로 거리 3px, 세로 거리 2px 되는 위치에 번짐 정도 5px 되는 그림자 효과를 추가한다. 그림자 색은 검정(#000 또는 black)..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 4. 11.
• textsms

01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제

01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 순서 없는 목록의 불릿을 없앤다.2. 각 항목의 줄 간격을 글자 크기의 2배로 지정한다.3. 각 항목에서 진하게 표시된 부분의 글자색을 #ad3000으로 수정한다.  최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! 웹 폰트 - 웹 타이포그래피를 받쳐주는 기술 ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 4. 11.
• textsms