[기본 개념] 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

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