본문 바로가기

💻WEB FrontEnd/CSS3

(13)

표 스타일 을 기본으로 배운 내용입니다. 목차 1) 표 제목 위치 지정 - caption-side 2) 표 테두리 스타일 결정 - border 3) 테두리 통합, 분리 - border-collapse 4) 인접한 셀 테두리 사이 거리 지정 - border-spacing 5) 빈 셀의 표시 여부 지정 - empty-cells 6) 표 너비와 높이 지정 - width, height 7) 콘텐츠에 맞게 셀 너비 지정 - table-layout 8) 셀 안의 텍스트 정렬 방법 지정 - text-align 9) 셀 안에서 수직 정렬하기 - vertical-align 표 스타일 표의 크기, 표의 테두리, 셀의 테두리, 여러 가지 여백 등의 표 스타일을 지정할 수 있다. 1) 표 제목 위치 지정 - caption-side 선택..

다단 구성하기 을 기본으로 배운 내용입니다. 목차 1) 단의 너비 고정하고 다단 구성 - column-width 2) 단의 개수 고정하고 다단 구성 - column-count 3) 단과 단 사이 여백 지정 - column-gap 다단 구성하기 column과 관련된 여러 속성으로 다단으로 편집할 수 있다. 다만, 다단 관련 속성은 브라우저별 접두사를 붙여 사용해야 한다. 한 화면을 여러 단으로 구성할 때, 단의 너비를 고정하거나 단의 개수를 고정해 화면을 분할할 수 있다. 1) 단의 너비 고정하고 다단 구성 - column-width 선택자 { column-width: 크기 | auto } 속성 값 설명 크기 단 너비를 직접 지정한다. auto 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동..

CSS 레이아웃- 포지셔닝과 주요 속성들 을 기본으로 배운 내용입니다. 목차 1. CSS Positioning 1) 포지셔닝의 종류 1) 포지셔닝 비교 2. 포지셔닝 관련 주요 속성들 1) 박스 너비 기준 정하기 - box-sizing 2) 왼쪽이나 오른쪽으로 배치 - float 3) float 속성 해제 - clear 4) 요소를 보이게/보이지 않게 지정 - visibility 5) 요소 쌓는 순서 정하기 - z-index 1. CSS Positioning CSS 포지셔닝이란, CSS를 이용해서 HTML 요소들의 위치를 제어하는 방법이다. 요소에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다. 1) 포지셔닝의 종류 - 상대위치(position: relative) 자신의 위치를 기준으로 한 상대위치 값을 지..

여백(마진, 패딩) 관련 속성들 을 기본으로 배운 내용입니다. 목차 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 2 다음

티스토리툴바