본문 바로가기

💻WEB FrontEnd

(66)

여백(마진, 패딩) 관련 속성들 을 기본으로 배운 내용입니다. 목차 1. margin 속성 2. padding 속성 개발자 도구 창에서 margin과 padding의 수치를 확인할 수 있다. 1. margin 속성 margin은 현재 요소 주변의 여백이다. 선택자 { margin: 크기 | 백분율 | auto } 선택자 { margin-top: 크기 | 백분율 | auto } 선택자 { margin-bottom: 크기 | 백분율 | auto } 선택자 { margin-right: 크기 | 백분율 | auto } 선택자 { margin-left: 크기 | 백분율 | auto } 1) margin속성의 속성값 개수 margin속성을 이용해 마진 값을 한꺼번에 설정할 때는 값의 개수에 따라 어느 방향에 적용될지 결정된다. 속성 값 개수 적용..

테두리 관련 속성들 을 기본으로 배운 내용입니다. 목차 1) 테두리 스타일 지정 - border-style 2) 테두리 두께 지정 - border-width 3) 테두리 색상 지정 - border-color 4) 테두리 스타일 묶어 지정 - border 6) 선택한 요소에 그림자 효과 내기 - box-shadow 1. 테두리 관련 속성들 테두리는 텍스트 단락뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있다. 1) 테두리 스타일 지정 - border-style 테두리 스타일의 기본값은 none이기 때문에 테두리를 그리기 위해서는 제일 먼저 테두리 스타일을 지정해야 한다. 선택자 { border-style: 속성 값 } 속성 값 설명 none (기본 값) 테두리가 나타나지 않는다. h..

CSS 박스 모델, 콘텐츠 관련 속성들 을 기본으로 배운 내용입니다. 목차 1. CSS 박스 모델 1) 블록 레벨 요소와 인라인 레벨 요소 2) 박스 모델의 구성 2. 콘텐츠 관련 속성들 1) 콘텐츠 영역의 크기 - width, height 2) 화면 배치 방법 결정 - display 1. CSS 박스 모델 CSS 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 말한다. 1) 블록 레벨 요소와 인라인 레벨 요소 - 블록 레벨(block-level) 요소 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지(=너비가 100%)하는 요소이다. 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비나 마진, 패딩 등을 이용해 크기나 위치 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. - 인라인 레벨(inl..

배경 스타일 을 기본으로 배운 내용입니다. 목차 1) 배경 색 지정 - background-color 2) 배경 적용 범위 조절 - background-clip 3) 웹 요소에 배경 이미지 넣기 - background-image 4) 배경 이미지 반복 방법 지정 - background-repeat 5) 배경 이미지 크기 조절 - background-size 6) 배경 이미지 위치 조절 - background-position 7) 배경 이미지 배치할 기준 조절 - background-origin 8) 배경 이미지 고정 - background-attachment 9) 속성 하나로 배경 이미지 제어 - background 배경 스타일 1) 배경 색 지정 - background-color background-color는 웹..

텍스트 관련 스타일- 목록 을 기본으로 배운 내용입니다. 목차 1) 목록의 불릿과 번호 스타일 지정 - list-style-type 2) 불릿 대신 이미지 넣기 - list-style-image 3) 목록에 들여 쓰는 효과 내기 - list-style-position 4) 목록 속성 한꺼번에 표시하기 - list-style 목록 스타일 1) 목록의 불릿과 번호 스타일 지정 - list-style-type 순서 없는 목록의 경우, 목록 앞에 다양한 bullet을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다. 선택자 { list-style-type: 속성 값 } - 순서 없는 목록에서 불릿 지정 속성 값 설명 none 불릿 없애기 disc 채운 원 circle 빈 원 square 채운 사각형 - 순서 있는 목록에서 숫..

텍스트 관련 스타일- 문단 을 기본으로 배운 내용입니다. 목차 1) 글자 쓰기 방향 지정 - direction 2) 텍스트 정렬 - text-align 3) 정렬 시 공백 조절 - text-justify 4) 텍스트 들여 쓰기 - text-indent 5) 줄 간격 조절 - line-height 6) 넘치는 텍스트 표기하기 - text-overflos 문단 스타일 1) 글자 쓰기 방향 지정 - direction 선택자 { direction: ltr 또는 rtl} //ltr : left to right //rtl : right to left 2) 텍스트 정렬 - text-align 선택자 { text-align: 속성 값 } 속성 값 설명 start, end 현재 텍스트 줄의 시작, 끝 위치에 맞추어 문단을 정렬한다. left, r..

텍스트 관련 스타일- 텍스트 을 기본으로 배운 내용입니다. 목차 1) 글자 색 지정 - color 2) 텍스트에 줄 표시 o,x - text-decoration 3) 텍스트 대·소문자 변환 - text-transform 4) 텍스트에 그림자 효과 추가 - text-shadow 5) 공백 처리 - white-space 6) 텍스트 간격 조절 - letter-spacing과 word-spacing 텍스트 스타일 1) 글자 색 지정 - color 선택자 { color: 색상} - 사용할 수 있는 색상 값 16진수 rgb, hsl 색상 이름 2) 텍스트에 줄 표시 o,x - text-decoration 선택자 { text-decoration: none 또는 underline 또는 overline 또는 line-through } 3) 텍스트..

텍스트 관련 스타일- 글꼴 을 기본으로 배운 내용입니다. 목차 1) 글꼴 지정 - font-family 속성 2) 웹 폰트 사용 - font-face 속성 3) 글자 크기 조절 - font-size 4) 글자 굵기 지정 - font-weight 5) 작은 대문자로 표시 - font-variant 6) 글꼴 속성을 하나로 묶어 표현 - font 글꼴 관련 스타일 1) 글꼴 지정 - font-family 속성 [윈도우의 기본 글꼴]이 아니고 설치되어 있지 않다면 화면에 표시할 수 없다. font-family속성은 상속된다. 때문에 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용된다. 적용된 글꼴이 아닌 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴로 적용하면 된다. 선택자 {font-..

CSS3와 CSS모듈 을 기본으로 배운 내용입니다. 목차 CSS3 1) CSS3와 브라우저 접두사(prefix) 2) 브라우저 접두사 자동으로 붙이기 CSS3 CSS는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. CSS을 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다. 1) CSS3와 브라우저 접두사(prefix) CSS3 표준 규약이 완성되지 않아 브라우저들이 새로운 CSS3속성을 부분적..

CSS기초 을 기본으로 배운 내용입니다. 목차 1. 스타일과 스타일 시트 2. 주요 선택자 3. CSS 스타일 우선순위 CSS(Cascading Style Sheets)는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. 1. 스타일과 스타일 시트 1) 스타일 웹 문서에서 스타일이란 HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 가리킨다. - 형식 선택자 selector : 앞으로 만들 스타일 규칙을 어디에 적용할 것인지를 나타낸다. 스타일 속성과 속성 값 : 선택자 다음에 중괄호가 오고 그 사이에 {속성: 속성 값}을 작성해 속성을 적용할 수 있다. 2) 스타일 시트 스타일 시트란 여거 개의..

이전 1 2 3 4 5 6 7 다음

티스토리툴바