본문 바로가기

HTML5 & CSS355

[HTML5 & CSS3] CSS 포지셔닝과 주요 속성들 ▶ CSS 포지셔닝이란 ? float 속성과 position 속성을 이용하여 브라우저 화면 안에 박스 형태의 각 콘텐츠를 배치하는 것 *box-sizing 속성 - 박스 너비 기준 정하기 CSS의 width 속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 한다. box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있다. 기본형) box-sizing: content-box | border-box 속성 값 설명 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. border-box width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 .. 2021. 2. 13.

[HTML5 & CSS3] 여백을 조절하는 속성들 *margin 속성 - 요소 주변 여백 설정하기 기본형) margin-top : | | auto margin-right : | | auto margin-bottom : | | auto margin-left : | | auto margin : | | auto 속성 값 설명 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다. 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정한다. auto display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. *마진 중첩(margin overlap) 현상 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐진다. 이런 현상을 마진 중첩 또는 마진 상쇄 라.. 2021. 2. 12.

[HTML5 & CSS3] 테두리 관련 속성들 ▶ 테두리 관련 속성들 *border-style 속성 - 테두리 스타일 지정하기 기본형) border-style : none / hidden / dashed / dotted / groove / inset / outset / ridge / solid 속성 값 설명 none 테두리가 나타나지 않는다. hidden 테두리가 나타나지 않는다. border-collapse:collapse일 경우, 다른 테두리도 표시되지 않는다. dashed 테두리를 짧은 선(직선으로 된 점선)으로 표시한다. dotted 테두리를 점선으로 표시한다. double 테두리를 이중선(겹선)으로 표시한다. 두 선 사이의 간격은 border-width 값으로 지정한다. groove 테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 .. 2021. 2. 12.

[HTML5 & CSS3] CSS와 박스 모델 ▶ CSS와 박스 모델 *블록 레벨 요소와 인라인 레벨 요소 종류 해당 태그 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , , *width, height 속성 - 콘텐츠 영역의 크기 기본형) width : / / auto height : / / auto 속성 값 설명 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다. 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정한다. auto 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. *display 속성 - 화면 배치 방법 결정하기 display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바.. 2021. 2. 12.

[HTML5 & CSS3] 그라데이션 효과로 배경 꾸미기 ▶ 그라데이션 효과로 배경 꾸미기 1. 선형 그라데이션 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것. 기본형) linear-gradient( to , color-stop, [color-stop, ..] ); to top(아래에서 시작해 위로 그라데이션) to left(오른쪽으로 시작해 왼쪽으로 그라데이션) to right(왼쪽에서 시작해 오른쪽으로 그라데이션) to bottom(위에서 시작해 아래로 그라데이션 2. 원형 그라데이션 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀜. 따로 지정하지않으면 모양은 eclipse로 인식함 3. 그라데이션을 사용해 패턴 만들기 선형 그라데이션과 원형 그라데이션은 패.. 2021. 2. 12.

[HTML5 & CSS3] 배경 색과 배경 이미지 ▶ 배경 색과 배경 이미지 * background-color 속성 - 배경 색 지정하기 세밀하게 조절하고싶으면 16진수나 RGBA표기법으로 ! background-color: 예) background-color : #00ff00 * background-clip 속성 - 배경 적용 범위 조절하기 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다. 기본형) background-clip : border-box(박스 모델의 가장 외곽인 테두리(border)까지 적용한다 padding-box(박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다 content-box(박스 모델에서 내용 부분에만 적용된다) * background-im.. 2021. 2. 3.

이전 1 ··· 3 4 5 6 7 8 9 10 다음

티스토리툴바