HTML&CSS/CSS
-
포지션(Position)HTML&CSS/CSS 2023. 1. 4. 18:43
position은 언제 사용할까?! position 속성의 종류 1) static - default값 2) relative 3) fixed 4) absolute 5) sticky position - static일때 .blue { background-color: #e46e80; } blue 색깔를 position -> relative로 바꾸자 .blue { background-color: #5195ee; position:relative; /* 위에서 30px만큼 간격을 떨어뜨리자 */ top: 30px; } .blue { background-color: #5195ee; position:relative; /* 위에서 30px만큼 간격을 떨어뜨리자 */ top: 30px; /* 왼쪽으로부터 50px만큼 간격을..
-
디스플레이(display)HTML&CSS/CSS 2023. 1. 4. 08:43
display 종류 inline block inline-block flex list-item none inline display inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향 예시 My name is Yuna! block display , , , , , div태그 예시 My name is Yuna! ============================================== display 바꾸기 모든 요소는 기본적으로 정해진 display 값이 있는데요. CSS를 통해서 이를 바꿀 수 있습니다! 1) inline 요소를 block으로 바꾸기 My name is Yuna! 2) block 요소를 inline으로 바꾸기 My name ..
-
선택자정리HTML&CSS/CSS 2023. 1. 3. 22:47
/* 모든 h1태그 */ h1{ color: orange; } /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color:blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div i{ color:orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ .div1 > i{ color:orange; } 복수 선택 /* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */ .t..
-
-
둥근모서리/배경색/배경이미지/그림자HTML&CSS/CSS 2023. 1. 2. 19:02
둥근모서리 (border-radius) /* 모서리 네 개 모두 똑같이 둥글게 */ .div { border-radius: 30px; } /* 각 개별 모서리를 다르게 */ h1 { border: 1px solid green; border-top-left-radius: 50px; /* 왼쪽 위 */ border-top-right-radius: 5px; /* 오른쪽 위 */ border-bottom-right-radius: 0px; /* 오른쪽 아래 */ border-bottom-left-radius: 20px; /* 왼쪽 아래 */ } 배경색 (background-color) /* 색 이름, RGB 코드, HEX 코드 중 하나를 입력 */ h1{ background-color: yellow; /* RGB..
-
OverFlowHTML&CSS/CSS 2022. 12. 20. 19:39
내용물이 들어갈 공간이 부족한 경우가 있습니다. CSS Overflow 1. visible => visible 값을 사용하면 넘쳐나는 내용물이 그대로 보입니다. 따로 설정해주지 않으면 이게 기본값 2. hidden => 넘쳐나는 부분을 아예 숨겨줄 수 있다 3. scroll => 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법 4. auto => scroll과 같은데 scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여
-
width와 heightHTML&CSS/CSS 2022. 12. 20. 19:28
- CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다 - HTML 요소의 전체 너비(width)를 계산하는 공식 width + left padding + right padding + left border + right border + left margin + right margin - HTML 요소의 전체 높이(height)를 계산하는 공식 height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
-
박스모델(BoxModel)HTML&CSS/CSS 2022. 12. 20. 19:09
1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. # 패딩(Padding)을 비교해보자! 패딩 10일때 패딩 100일때 # 마진(margin)을 비교해보자! Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam mali..