본문 바로가기

Programming/HTML & CSS & JavaScript48

CSS 4일차 - 3일차 정리 12. 요소 배치 ( position)    1) display  속성            가. 개념        요소를 어떻게 배치할지를 제어가 가능한 속성.        블럭레벨로 배치/인라인 레벨로 배치/랜더링 방지/인라인처럼 배치되지만widht와height지정가능         display:block; display:inline; display:none;  // 영역유지 안됨. display:inline-block(*****);    2) position 속성            가. 개요       - display 속성은 요소가 배치되는 기본적인 규칙만 변경할 수 있다. ( 블럭레벨, 인라인레벨)       - top,left,right,bottom 속성을 이용해서 요소의 실제위치를 바꿀수 .. 2024. 4. 25.
CSS 3일차 - 크기단위 ( units ) 14. 크기 단위 ( units ) 1) 단위 종류 - px - % - rem, em - vw, vh ( viewport width, viewport height ) 2) 사용가능한 속성 - width/ height - font-size - margin / padding / border - top / right / bottom / left 3) 크기종류 가. 절대 길이(크기) - px 만 사용하자. 나. 상대 길이(크기) a. viewport(뷰포트) 기준 - vw, vh ( viewport width, viewport height ) - 뷰포트(viewport) 기준으로 너비 설정 방법 2가지 첫째: position:fixed + width | height 로도 뷰포트 기준으로 길이(크기)설정 가능.. 2024. 4. 24.
CSS 3일차 - background 13. 배경( background ) 관련 1) 배경 이미지 - background-image 속성이용 - 문법: background-image: url( " images/ " ); background-image: url( " images/a " ), url( " images/b " ); // a 가 가장위에 보임. - 특징은 기본적으로 이미지가 반복되고 텍스트의 배경으로 랜더링 된다. 2) 배경색- background-color 속성- 문법:background-color: 색상;* 정리background-image 와 background-color 같이 사용하면 background-image 가 보인다. background01_image div.. 2024. 4. 24.
CSS 3일차 - 요소배치(position) 12. 요소 배치 ( position ) 1) display 속성 가. 개념 요소를 어떻게 배치할지를 제어가 가능한 속성. 블럭레벨로 배치/인라인 레벨로 배치/랜더링 방지/인라인처럼 배치되지만 width 와 height 지정가능 display: block; display: inline; display: none; // 영역유지 안됨. display: inline-block;  요소배치1 - display1-기본 div { /* 블럭레벨 -> 인라인레벨 */ display: inline; } span { /* 인라인레벨 -> 블럭레벨 */ .. 2024. 4. 24.

티스토리툴바