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

[정리] 1 | 글자와 텍스트 스타일 속성, 색상 지정 방법 정리

[정리] 1 | 글자와 텍스트 스타일 속성, 색상 지정 방법 정리글자와 관련된 속성종류설명font-family글꼴 종류를 지정font-size글자 크기 지정font-style이탤릭체로 표시할지 지정font-weight글자 굵기 지정텍스트 스타일 속성종류설명color글자색 지정text-decoration텍스트에 밑줄이나 취소선을 표시할지 지정text-transform텍스트 전체, 또는 첫 글자 대문지로 표시text-shadow텍스트에 그림자 추가letter-spacing글자 사이의 간격 지정word-sapcing단어 사이의 간격 지정text-align텍스트 정렬 방법 지정line-height줄 간격 조절색상을 지정하는 방법종류설명16진수빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상 표..

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

[기본 개념] 1 | (1.2) 목록, 표

[기본 개념] 1 | (1.2) 목록, 표1 글꼴 관련 스타일2 텍스트 관련 스타일 3> 목록 스타일4> 표 스타일3 목록 스타일불릿 모양과 번호 스타일을 지정하는 list-style-type 속성  순서 없는 목록에는 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 list-style-type 속성을 사용하여 지정할 수 있다. 종류설명예시disc채운 원 모양●circle빈 원 모양○square채운 사각형 모양■decimal1부터 시작하는 10진수1, 2, 3, ...decimal-leading-zero앞에 0이 붙는 10진수01, 02, ...lower-roman로마 숫자 소문자i, ii, iii, ...upper-roman로마 숫자 대문자I, II, III, ...lower-alph..

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

[기본 개념] 1 | (1.1) 글꼴, 텍스트

[기본 개념] 1 | (1.1) 글꼴, 텍스트1> 글꼴 관련 스타일2> 텍스트 관련 스타일 3 목록 스타일4 표 스타일1 글꼴 관련 스타일글꼴을 지정하는 font-family 속성 기본형font-family : | [, ]  웹 문서에 사용될 글꼴을 지정한다. 글꼴을 지정할 때 한 가지 글꼴만 선택해도 되지만 글꼴이 없을 경우를 대비해 두, 세 번째 글꼴까지 생각해야 한다. (ex. 글꼴 적용하기) body { font-family: "맑은 고딕", 돋움, 굴림 }// 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶음 글자 크기를 지정하는 font-size 속성 기본형font-size :  | |  |   글자 크기를 px(픽셀), pt(포인트), 백분율(%)을 사용하여 지정할 수 있다.    브라우..

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

04. <input> 태그를 사용한 문제 II

04. 태그를 사용한 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 CSS가 미리 만들어져 있다고 가정한다.) 1. 폼 요소를 삽입할 때 태그를 사용해야 한다.2. 제목은 , 목록은 로 입력한다.3. '이름' 필드는 텍스트 필드로 삽입하고 '공백없이 입력하세요'라는 힌트를 표시한다.4. '연락처' 필드는 전화번호에 맞는 필드로 삽입한다.5. '지원 동기'는 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 필드로 삽입한다.6. 텍스트 영역의 글자 수는 60자, 화면에 표시할 줄 개수는 5개로 지정한다.7. 텍스트 영역에 '본사 지원 동기를 간략히 써 주세요.'라는 힌트를 표시한다.8. 버튼은 태그나 태그를 이용해 만든다.  // 코드를 작성하세..

• format_list_bulleted 💠문제 풀이/HTML 문제 풀이
• · 2022. 3. 7.
• textsms

03. <input> 태그를 사용한 문제 I

03. 태그를 사용한 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 CSS가 미리 만들어져 있다고 가정한다.)  예약 정보 // 코드를 작성하세요 결과 화면A. 해설우선 의 태그로 순서없는 리스트를 만들어준다. 그 후 '이름'에는 태그 'text'를, '전화'에는 태그 'number'를, '이메일'에는 태그 'email'을 유형으로 넣어준다.마지막 순서로, 'button' 유형으로 버튼을 생성하여 '예약하기'라는 내용을 입력한다.  예약 정보 이름 전화 이메일 예약하기         출처 | Do it! HTML+CSS+자바스크립..

• format_list_bulleted 💠문제 풀이/HTML 문제 풀이
• · 2022. 3. 7.
• textsms

[정리] 2 | 폼에서 사용하는 태그, <input> 태그의 유형, 속성 정리

[정리] 2 | 폼에서 사용하는 태그, 태그의 유형, 속성 정리폼에서 사용하는 태그종류설명폼의 시작과 끝을 만든다.폼 요소를 그룹으로 묶는다.필드셋에 제목을 붙인다.사용자가 내용을 입력할 필드를 삽입한다., 드롭다운 목록을 삽입한다.텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다.데이터 목록을 삽입한다. 태그의 유형종류설명text한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다.password비밀번호를 입력할 수 있는 필드를 넣는다.search검색할 때 입력하는 필드를 넣는다.urlURL 주소를 입력할 수 있는 필드를 넣는다.email이메일 주소를 입력할 수 있는 필드를 넣는다.tel전화번호를 입력할 수 있는 필드를 넣는다.checkbox주어진 여러 항목에서 2개 이상 선택할 수 있는 ..

• format_list_bulleted 💠프로그래밍 언어/HTML
• · 2022. 3. 7.
• textsms