⏰ 2024.11.12 (D+24)
1. CSS3 배경 관련 CSS속성
🔖 배경 관련 CSS 속성 ]
① background-color : 배경색 지정
② background-image : 배경 이미지 지정
③ background-image : url(이미지 경로)
④ background-repeat : 배경 이미지의 반복 속성 지정
- repeat : x,y축으로 배경 이미지 반복
- repeat-x : x축으로 반복
- repeat-y : y축으로 반복
- no-repeat : 반복 안함
⑤ background-position : 배경 이미지의 위치 지정
⑥ background-position :가로 위치 세로 위치.위치 값은 px이나 %로 지정
⑦ background-size :사이즈 지정(보통 %로 지정)
※ background속성으로 배경이미지 및 반복속성 및 위치를 동시에 줄 수 있다.
- 배경색 지정
<div style="background-color: #f00;">블락 엘리먼트</div> <span style="background-color: #00ff00;">인라인 엘리먼트</span>
- 배경 이미지 지정
- 배경색 과 배경이미지 동시에 주면 최종적으로 배경이미지가 적용됨
- 이미지의 가로 세로 위치는 반복속성이 no-repeat일때 의미 있다.
- repeat-x일때는 x좌표는 의미 없고 repeat-y일때는 y좌표는 의미 없다.<div style="background-image: url(../Images/sumnail.png);background-repeat:no-repeat;background-position:50% 50%;width:500px;height:300px;background-color: yellow;"> 다이브 입니다. </div>
- 50% 50%(background-position)/30% 30%(background-size) 액자 느낌
<div style="width: 300px; height: 300px; background: url(../Images/sumnail.png) no-repeat rgb(143, 37, 8) 50% 50%/95% 95%;"> 동시에 여러 속성 지정하기 </div>
2. CSS3 테두리 관련 CSS속성
🔖 테두리 관련 CSS속성 ]
✅ 테두리 모양
① border-style :전체 테두리 모양 지정
② border-top-style :위쪽 테두리
③ border-bottom-style :아래쪽 테두리
④ border-left-style :왼쪽 테두리
⑤ border-right-style :오른쪽 테두리☑️ 모양에 줄수 있는 속성값
- none : 테두리가 없음
- dotted : 점선
- dashed : 점선 보다 긴 실선
- solid : 실선
- double : 이중 실선✅ 테두리 색상
① border-color: 전체 테두리 색상 지정
② border-top-color :위쪽 테두리
③ border-bottom-color :아래쪽 테두리
④ border-left-color :왼쪽 테두리
⑤ border-right-color :오른쪽 테두리✅ 테두리 두께 : 주로 px단위로 지정
① border-width :전체 테두리 두께지정
② border-top-width :위쪽 테두리
③ border-bottom-width :아래쪽 테두리
④ border-left-width :왼쪽 테두리
⑤ border-right-width :오른쪽 테두리⭐ 테두리의 모양, 색상, 두께를 border속성으로 동시에 부여할 수 있다
[예]
border : 색상 두께 모양
순서는 상관 없다<body> <h2>테두리 관련 CSS속성</h2> <div> <h3>테두리 스타일</h3> <div> <h3>테두리 스타일</h3> <div style="border-top-style: dotted;border-bottom-style: dashed;border-left-style: solid;border-right-style:double;">border-style</div> <h3>테두리 색상</h3> <div style="border-style: solid; border-top-color: red;border-bottom-color: green;border-left-color: blue;border-right-color: rgb(100,100,100);">border-color</div> <h3>테두리 두께</h3> <div style="border-style:solid; border-top-width: 5px;border-right-width: 10px;border-bottom-width: 15px;border-left-width: 20px;">border-width</div> <h3>테두리 색상/두께/스타일 동시지정</h3> <div style="border: 5px red solid;">border</div> <h3>폼의 하위요소 input type="text"계열에 테두리 적용</h3> <input type="text" style="border:none; border-bottom:1px solid green;"/> </div> </body> <body> <h2>둥근 테두리 및 그림자</h2> <div> <div class="radius">RADIUS</div> <hr/> <div class="shadow">SHADOW</div> </div> </body> <body> <h2>box-sizing속성</h2> <div>가로 세로 200px</div> <div>가로 세로 200px</div> <div>가로 세로 200px</div> <div class="last" style="width:240px;height:240px;background-color: yellow;">가로 세로 240px</div> </body>
3. CSS3 여백 관련 속성
🔖 여백 속성 ]
✅ margin : 태그 외부의 여백
① margin :상하 좌우 모든 여백 지정
② margin-top :위쪽 여백
③ margin-bottom :아래쪽 여백
④ margin-left :왼쪽 여백
⑤ margin-right :오른쪽 여백✅ padding : 태그와 태그 안에 있는 컨텐츠(내용)과의 여백
① padding :상하 좌우 모든 여백 지정
② padding-top :위쪽 여백
③ padding-bottom :아래쪽 여백
④ padding-left :왼쪽 여백
⑤ padding-right :오른쪽 여백⭐ 주의사항
- 서로 여백이 겹칠때 block과 block 사이에서는 큰 값을 따른다.
- 단, 인라인 엘리먼트 사이에서는 +연산이 되서 여백이 결정 된다.
- 블락과 인라인에서 margin-top,margin-bottom 을 적용하려면 블락 엘리먼트에 주어야 한다.
- block 엘리먼트에서 컨텐츠의 가로 정렬은 text-align으로 수직 정렬은 padding 으로 정렬 한다.
(inline 엘리먼트는 정렬이 적용 안됨)
- 한꺼번에 위쪽,아래쪽,왼쪽,오른쪽 등의 여백을 줄때는 margin이나 padding이나 순서가 정해져 있다.<body> <h2>여백관련 속성</h2> <div> <h3>padding(안쪽 여백)</h3> <div style="border:1px red solid;box-sizing: border-box;padding-top: 20px;padding-left: 40px;padding-bottom: 60px;padding-right: 300px;">상하좌우 여백 각각 지정(블락엘리먼트)</div> <hr/> <div style="border:1px green solid;box-sizing: border-box;padding:50px">상하좌우 여백 동시 지정(블락엘리먼트)</div> <!-- 왼쪽 여백을 줄때만 컨텐츠가 오른쪽으로 움직인다. 그외 (위/아래/오른쪽)는 텍스트는 그대로 있고 영역이 늘어난다--> <hr/> <span style="border:1px green solid;box-sizing: border-box;padding-top: 20px;padding-left: 40px;padding-bottom: 60px;padding-right: 300px;">인라인 엘리먼트</span> <h3>margin(바깥쪽 여백)</h3> <fieldset> <legend>block과 block</legend> <!-- block1과 block2는 서로 margin-top 및 margin-bottom이 적용되고 (상하로 배치) block1과 block2에 margin-left 와 margin-right는 부모 영역과의 여백이다. 그래서 margin-left 와 margin-right를 주면 영역의 가로폭이 줄어 든다. --> <div style="border:1px red solid;box-sizing: border-box;margin-bottom: 50px;margin-left: 50px;margin-top: 50px;margin-right: 50px;">block1</div> <div style="border:1px green solid;box-sizing: border-box;margin-top: 100px;">block2</div> </fieldset> <!--결론은 인라인은 margin-left와 margin-right만 적용된다 --> <fieldset> <legend>block과 inline</legend> <!-- block 에 마진을 주자--> <div style="border:1px red solid;box-sizing: border-box; margin-bottom:50px;">block</div> <!-- 인라인도 margin-left는 부모영역과의 여백이다:margin-left만 적용됨 --> <span style="border:1px green solid;box-sizing: border-box;margin-top:100px; margin-left:50px; margin-right:3000px;">inline</span> </fieldset> <!-- 수직으로 컨텐츠를 정가운데 배치시에는 위쪽하고 아래쪽 padding을 동일하게 주면된다 단,padding을 준 부모영역이 그만큼 늘어난다 --> <fieldset > <legend>inline과 inline</legend> <!-- 인라인 사이의 여백은 두 요소의 여백을 더한 여백이다(margin-right,margin-left) 인라인 인 경우 margin-top 및 margin-bottom은 부모와 여백을 의미하지만 여백이 적용이 안된다. ※이때는 부모에서 padding으로 적용한다 --> <span style="border:1px red solid;box-sizing: border-box;margin-top: 50px;margin-bottom: 50px;margin-left: 50px;margin-right: 50px;">inline1</span> <span style="border:1px green solid;box-sizing: border-box;margin-top: 50px;margin-bottom: 50px;margin-left: 50px;">inline2</span> </fieldset> <fieldset> <legend>블락엘리먼트 안의 컨텐츠 정렬</legend> <!-- 수평정렬:text-align:center 수직정렬 height와 line-height값을 동일하게(영역이 늘어나지 않는다) --> <div style="background-color: red; width:200px; height:200px; text-align:center; line-height:200px;">텍스트 정렬</div> </fieldset> </div> </body>
4. CSS3 li를 인라인으로 변경 및 블릿 제거
🔖 보이기 안 보이기 속성 ]
📢 diplay 와 visibility 속성은 레이어(div)보였다 안 보였다 할 수 있게 하는 CSS속성
(div 뿐만 아니라 모든 태그에 적용됨)
☑️ visibility
① visible(보이게)
② hidden(안 보이게) ⇒ 영역은 그대로 레이어만 사라짐☑️ display
① block : 인라인 ⇒ 블락으로 block
② inline-block : 블락⇒블락 인데 배치는 가로 배치로
③ none : 영역도 레이어도 사라짐
④ inline : 블락⇒인라인으로<style> ul.sport{ border:5px red solid; box-sizing: border-box; list-style-position: inside; } ul.sport > li{ border:2px green solid; box-sizing: border-box; } /* 아이콘 크기 그대로 이미지 불릿이 적용된다 ul.image{ list-style-image: url(../Images/arrow_icon.png); } */ ul.image > li { display:flex; height:48px; align-items:center; } ul.image > li > div.icon{ width:48px; height:48px; background-image: url(../Images/arrow_icon.png); } ul.inline1 > li{ /* li를 인라인으로 만들면 블릿이 제거된다. li태그에 설정 */ display:inline; border: 1px red solid; box-sizing: border-box; /* 아래는 적용 안됨- 인라인 엘리먼트니까*/ width: 100px; height: 100px; } ul.inline2{ /*블릿만 제거된다*/ list-style-type: none; } ul.inline2 > li{ float:left; border: 1px red solid; box-sizing: border-box; /*※가로 배치는 됬지만 블락 얼리먼트의 성질은 그대로.*/ width: 100px; height: 100px; text-align: center; line-height: 100px; } ul.inline3 > li{ display:inline-block; border: 1px red solid; box-sizing: border-box; /*※가로 배치는 됬지만 블락 얼리먼트의 성질은 그대로.*/ width: 100px; height: 100px; text-align: center; line-height: 100px; } /* 방법2와 같다*/ ul.inline4{ list-style: none; display: flex; } ul.inline4 > li{ border: 1px red solid; box-sizing: border-box; /*※가로 배치는 됬지만 블락 얼리먼트의 성질은 그대로.*/ width: 100px; height: 100px; text-align: center; line-height: 100px; } ul.bullet{ list-style: none; border: 1px red solid; box-sizing: border-box; /*패딩은 음수값이 적용이 안되며 0의 경우 단위 생략*/ /*padding-left: 0;*//*왼쪽 여백을 더 없애고 싶다*/ } ul.bullet > li{ border: 1px green solid; box-sizing: border-box; /*margin 은 음수값 가능*/ margin-left: -10px; } </style> <style> div > fieldset:last-child > ul > li{ display: inline; border-right: 1px gray solid; padding-right: 5px; } div > fieldset:last-child > ul > li:last-child{ border-right: none; } a{ color: black; text-decoration: none; } a:hover{ text-decoration: underline; } </style> <fieldset> <legend>UL을 메뉴로 구현</legend> <ul> <li><a href="https://www.nate.com">회원가입</a></li> <li>공지사항</li> <li>로그인</li> <li>게시판</li> </ul> </fieldset>
