본문 바로가기
반응형

Web30

CSS 배경속성 Background 속성 태그의 배경을 지정하는 속성 ↓ 세부적인 속성 background-color 배경 색 background-image 배경 이미지 background-size 배경 이미지 사이즈 background-repeat 배경 이미지 반복 여부 background-position 배경 이미지 위치 background-attachment 배경 이미지 고정 방식 backgound 세부적인 속성을 한번에 1. background-color 배경색을 의미 표현방식 : rgb(), rgba(),16진수(color속성)의 포맷을 사용 주의할 점! 태그의 크기가 없는 경우에는 배경색이 표시되지 않는다 예제 backgroun-color : pink 200px의 정사각형 backgroun-color : bl.. 2021. 4. 22.
box모델 - margin, border, padding, content box모델 ★ 중요한 Point ★ 요소의 크기 의미하는 부분이라는 것은 노랑색상자부터 빨강색 상자까지를 의미한다. 이말은 즉!! 요소의 전체 크기 → margin + border + padding + content But? width와 height가 적용되는 부분은 content영역만 의미 (margin, padding, border 부분은 포함X) Problem! content의 크기로만 맞추면 배치시키기도 어렵고 테두리가 있는 경에는 테두리의 두께로 인해서 원하는 크기를 찾기 어려움 Solution ▶ box-sizing : border-box box-sizing이란? 박스의 크기를 화면에 표시하는 방식을 변경하는 속성 이 값을 border-box로 지정하게 되면 contetn영역 뿐만 아니라 bo.. 2021. 3. 4.
CSS 가시 속성 가시 속성 태그를 화면에 보이게 하는 형태를 설정 📢 들어가기 전 살펴봐야 할 것 더보기 가시 속성 세 가지의 첫 번째 display 이전 글에서 dispaly에 대한 내용을 자세히 설명했으니 참고하시길!! https://chpofo.tistory.com/36 공간차지요소(display 속성) display 속성 요소를 어떤 방식으로 표시를 할 건지 결정하는 속성 📢 들어가기전 살펴봐야 할 것 더보기 요소가 두가지 형식으로 나누어지는데 1. block 형식 차곡차곡 쌓아 올려지는 형식 언 chpofo.tistory.com display를 제외하고 두 가지를 추가로 설명하겠습니다. 1. visibiliy 속성 기본값 : visible hidden : 요소의 크기(영역)는 유지하고 화면에서만 보이지 않게 한.. 2021. 2. 26.
공간차지요소(display 속성) display 속성 요소를 어떤 방식으로 표시를 할 건지 결정하는 속성 📢 들어가기전 살펴봐야 할 것 더보기 요소가 두가지 형식으로 나누어지는데 1. block 형식 차곡차곡 쌓아 올려지는 형식 언제나 새로운 라인에서 시작 웹페이지의 너비만큼 공간 차지 한 줄에 하나씩 수직방향으로 디스플레이됨 width, height 속성으로 요소 크기 지정 가능 , ~, , , , , , ... 2. inline 형식 한줄 안에 차례대로 위치하는 형식 해당 요소의 내용만큼 공간차지 수평방향으로 디스플레이됨 요소 크기 지정 불가능 , , , , ... display 속성 설명 display : block → 요소를 block요소처럼 표시합니다. display : inline → 요소를 inline요소처럼 표시합니다. (.. 2021. 2. 25.
반응형