본문 바로가기
반응형

Study with Yedol/CSS18

CSS 화면 배치 position 속성 position이란? CSS에서 position 속성은 화면상에서 요소를 배치하는 방법을 지정한다. static, absolute, relative, fixed, inherit 5가지의 속성값을 가지며 지금부터 이 5가지 속성값에 대해 살펴보도록 하겠다. ❗특이사항❗ 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있다. 1.static position (정적 위치) 지정 방식 : 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영향을 받지 않는다. 즉, top,bottom,left 등 방향을 설정하지 않는다. 1️⃣ CSS 코드 {position : static; } 2️⃣결과 2. relative position(상대 위치) 지정 방식.. 2024. 1. 5.
CSS background 속성 오늘은 background 속성에 대해 다뤄볼 것이다. background 속성은? 말 그대로 요소의 배경을 지정하는 속성이다. 색을 입힐 수도 있고, 이미지를 넣을 수도 있고, 그라데이션 효과를 줄 수 있다. 이러한 효과들은 background-color , background-image 속성 등으로 처리한다. 그럼 지금부터 background의 여러 속성에 대해 시작해보겠다!!! 스타트~~~~ 👻👻 1. background-color : 요소의 배경색을 설정한다. 색상을 적용하는 방법 4가지의 방식을 이용하여 color 속성값을 설정한다. 색상 적용 방법 : 색상키워드, rgb 적용 방식, hex 색상 적용 방식, hsl 색상 적용 방식 { background-color : blue; } 2. bac.. 2024. 1. 3.
CSS padding 과 margin 오늘은 CSS의 여백과 테두리에 대해 다뤄볼 것이다. 모든 콘텐츠는 contents, padding, border, margin으로 구성되어 있다. 이해를 돕기 위해 개발자 모드를 통해 설명하겠다. ❗참고❗ 개발자 모드는 웹페이지가 어떻게 구성되어 있는지를 볼 수 있는 화면이다. 윈도우 기준으로 Ctrl + Shift + i 를 누르면 개발자 모드가 실행된다. 여기서 화살표를 누르거나 Ctrl + Shift + C를 누르면 콘텐츠들을 클릭하여 어떻게 구성되어 있는지를 볼 수 있다. mdn의 웹페이지를 예시를 들어 설명하도록 하겠다. 처음에는 본래의 컨텐츠가 웹페이지에서 아래와 같이 보인다. 하지만 개발자 모드로 들어가서 해당 요소를 클릭하여 보면 스타일 항목 가장 아래 content, padding, b.. 2023. 12. 31.
CSS 크기 설정 width height 속성 이번 시간에는 html의 가장 기본인 높이와 너비, 여백 설정하는 방법에 대해 다뤄볼 것이다. 너무 쉬운 속성이라 가장 처음 포스팅했어야 했는데 어쩌다 보니 순서가 꼬였다..?😥 하지만! 지금부터라도 이 속성들에 대해 배운다면 CSS를 이용하여 HTML 요소의 크기와 여백을 마음대로 설정할 수 있다. 그럼 지금부터 스타트~~ 1. width와 hight 속성 : HTML의 너비와 높이를 설정하는 속성이다. 즉, 가로와 세로의 길이를 설정하는 것인데 이 속성은 기본값으로 auto을 가져 자동으로 너비와 높이를 설정한다. 사용법은 요소 { width : 너비값; height: 높이값;} 여기서 너비값, 높이값의 단위에는 CSS에서 크기 단위로 많이 쓰이는 %, em, px 단위를 쓴다. 그중 가장 많이 쓰이.. 2023. 12. 30.
반응형

티스토리툴바