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

[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일

[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일1> CSS와 박스 모델2> 테두리 스타일 지정하기3 여백을 조절하는 속성4 웹 문서의 레이아웃 만들기5 웹 요소의 위치 지정하기1 CSS와 박스 모델블록 레벨 요소와 인라인 레벨 요소  박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지 따라 나열 방법이 달라진다. 블록 레벨 요소  태그를 사용해 요소 삽입 시, 혼자 한 줄 차지 ex) , , 등인라인 레벨 요소  태그를 사용해 요소 삽입 시, 콘텐츠 영역만큼만 차지 ex) , , 등 박스 모델의 기본 구성  콘텐츠 영역의 크기를 지정하는 width, height 속성 종류설명너비나 높이의 값을 px나 em 단위로 지정박스 모델을 포함하는 부모 요소를 기준으로 너비값이..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 5. 6.
• 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