본문 바로가기

웹코딩 배우기293

CSS 태그 : position position 요소의 위치를 설정 static : 기본값. top, right, bottom, left로 값을 지정 할 수 없습니다. absolute : 절대적 위치 값. top, right, bottom, left로 위치 값을 지정합니다. relative : 상대적 위치 및 기준점으로 설정. top, right, bottom, left로 위치 값을 지정합니다. fixed : 위치를 고정. 스크롤해도 움직이지 않는다. top, right, bottom, left로 위치 값을 지정합니다. * 예시 이미지로는 설명을 다 할 수 없는 부분이 있습니다. 많이 연습해보세요. 2019. 9. 17.
CSS 태그 : padding padding 요소의 안쪽 여백을 설정 ▲ 녹색 영역이 padding 입니다. 값은 em, px, % 를 쓸 수 있고 음수 값을 가질 수 있습니다. padding은 padding-top, padding-right, padding-bottom, padding-left 모든 값을 가지고 있습니다. padding: 10px; /* 상-우-하-좌 */ padding: 10px 20px; /* 상하-좌우 */ padding: 10px 20px 30px; /* 상-좌우-하 */ padding도 margin 거의 99% 동일하게 속성을 설정합니다. 2019. 9. 17.
CSS 태그 : outline outline 요소의 아웃라인의 색, 스타일, 굵기를 정의 outline-color : 색outline-style : 라인 종류outline-width : 굵기outline 태그에는 위 3가지 속성이 있습니다. 그러나 각각 태그를 쓸 필요 없이 다음 처럼 사용하면 됩니다. outline: 8px inset #ccc; >> outline : 라인굵기 라인종류 색; outline 태그는 border와 쓰는 방법이 같음을 알 수 있습니다. 2019. 9. 17.
CSS 태그 : margin margin 요소의 바같쪽 여백을 설정 margin은 margin-top, margin-right, margin-bottom, margin-left 모든 값을 가지고 있습니다. {margin: 50px;} 상-우-하-좌 {margin: 50px 60px;} 상하-좌우 {margin: 50px 60px 30px;} 상-좌우-하 {margin: 0 auto;} 상하-중앙정렬 위 값의 순서는 기억하기 어려우니 그냥 {margin: 0 0 0 0;} 상우하좌 하나만 기억하면 됩니다. 값은 px, %, auto를 쓸 수 있습니다. ▲ 마진 값을 가진 박스의 상하 마진 값은 겹칩니다. 상하 마진 값이 큰쪽으로겹치게 됩니다. 마진은 음수, 양수 값을 가질 수 있고 합산한 마진 값을 적용합니다. ▲ float으로 정렬.. 2019. 9. 17.
CSS 태그 : line-height line-height 문장과 문장 사이의 간격을 설정 문장 사이의 간격 값은 숫자; px; %;를 사용합니다. 2019. 9. 17.
CSS 태그 : left left 요소의 왼쪽 속성을 설정 브라우저의 왼쪽에서 얼마만큼의 공간을 두고 요소를 표시 할지 정합니다.값은 px; 또는 %;로 정합니다. 참고로 position : absolute;는 요소의 절대적 값입니다.position : absolute;는 부모 div에 설정 할 수 있습니다. 2019. 9. 17.
CSS 태그 : height height 콘텐츠 요소의 세로값을 설정 높이는 px; 또는 %; 로 설정합니다. 2019. 9. 17.
CSS 태그 : font font 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정 폰트 스타일 지정은 .div1 {font-style: italic; font-weight: bold;font-size: 15px; line-height: 1;font-family: Impact;} 이와 같이 따로따로 태그를 넣어 꾸밀 수 있습니다. 하지만 다음처럼... .div2 {font: italic bolder 16px/1 Impact;}/* font: style // weight // size/line-height // family */ 이런씩으로 한줄에 다 표현 할 수도 있습니다. - 기타 태그 -font-variant : 글꼴 변형 2019. 9. 16.
CSS 태그 : float float 블록요소의 정렬 상태를 설정 float: none; - 성질을 적용하지 않습니다.float: left; - 왼쪽으로 정렬float: right; - 오른쪽으로 정렬. 순서는 가장 오른쪽이 첫번째입니다. 2019. 9. 16.
CSS 태그 : display display 요소의 성질을 정의 ▲ block; - 블록으로 요소를설정합니다. 쌓기 ▲ inline; 인라인으로 요소를 설정합니다. 가로 나열. 요소값을 무시합니다. ▲ inline-block; - 인라인 + 블록 성질를 가집니다. ▲ none; - 요소를 표시하지 않습니다. -기타 값- flex; - 플렉스 요소의 성질로 설정합니다. inline-flex; - 인라인 + 플렉스 요소의 성질을 설정합니다. inline-table; - 인라인 + 테이블 요소의 성질을 설정합니다. list-item; - 리스트 스타일 성질로 설정합니다. run-in; - 인라인 및 블록 요소의 성질을 하나만 선택하도록 설정합니다 table; - 테이블 요소의 성질로 설정합니다. table-caption; - 테이블 요소의.. 2019. 9. 16.
CSS 태그 : color color 요소의 글씨 색을 설정 rgba 값중 a는 투명값입니다. 2019. 9. 16.

티스토리툴바