-
HTML 선택자 / CSS 개요프로그래밍/HTML & CSS 2021. 9. 13.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> /* embedded style sheet */ /* 태그 선택자 */ div { color: blue; font-weight: bold;} /* id 선택자 */ #java { background: yellow;} /* class 선택자 */ .web { color: tomato; } </style> </head> <body> <h3>간단한 css 예</h3> <div>과목-프로그래밍</div> <p id="java">자바</p> <p style="font-size: 30px;">스프링</p> <hr> <div>과목-웹 프로그래밍</div> <p class="web">HTML</p> <p class="web">CSS</p> <p class="web">JavaScript</p> <hr> </body> </html>
- div는 별 다른 기능은 없고 마치 그룹처럼 하나를 묶는다고 생각하면 된다.
- div라는 태그 선택자로 인해서 <body> 부분에서 div 태그가 붙은 모든 것은
파란색에 볼드 처리가 된다.
- id 선택자는 특정하게 한 태그에 적용 시킬 수 있다.
<body> 부분에서 내가 만든 id 선택자를 주면 된다.
- class 선택자
클래스 선택자는 여러 태그에 다 같이 줄 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3> div 태그 </h3> <div> <p> 대표적인 블록 태그 </p> <p> 요소들을 묶어서 처리할 때 사용 </p> </div> <hr> <div style="background: red">A</div> <!-- 내용이 없거나 height가 없으면 표시되지 않는다. --> <div></div> <div style="background: green">B</div> <div style="background: blue">C</div> <hr> <div style="border: 1px solid red;">A</div> <!-- 내용이 없거나 height가 없으면 선은 위(top) 한선만 나온다. --> <div style="border: 1px solid green;"></div> <div style="border: 1px solid black;">B</div> <div style="border: 1px solid blue;">C</div> <hr> <!-- padding : 안쪽 여백 --> <div style="border: 1px solid red; width: 200px; height: 50px; padding: 20px;">padding-안쪽여백</div> <div style="border: 1px solid blue; width: 200px; height: 50px; padding: 10px 5px 10px 5px;">위 오른쪽 아래 왼쪽여백</div> <div style="border: 1px solid green; width: 200px; height: 50px; padding: 10px 15px 10px;">위 오른쪽/왼쪽 아래여백</div> <div style="border: 1px solid black; width: 200px; height: 50px; padding: 10px 15px;">위/아래 오른쪽/왼쪽 여백</div> <hr> <!-- margin: 바깥쪽 여백 --> <div style="background: red; width: 200px; height: 50px;"></div> <div style="background: blue; width: 200px; height: 50px; margin: 20px;"></div> <div style="background: green; width: 200px; height: 50px;"></div> <!-- 위아래는 여백이 20이고, 왼쪽오른쪽은 auto 이므로 수평 가운데 정렬 --> <div style="background: blue; width: 200px; height: 50px; margin: 20px auto;"></div> <hr> </body> </html>- div 태그
- 요소들을 묶어서 처리할때 사용
- background = 배경색
- border = 경계선, 테두리
- padding : 안쪽 여백
- margin : 바깥쪽 여백
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> * { /* 모든 태그 */ margin: 0; padding: 0; } </style> </head> <body> <h3>div 태그</h3> <!-- border, margin, padding도 기본적으로 width, height에 포함된다. --> <div style="background: yellow; width: 300px; height: 118px;"> <div style="border: 3px solid green; height: 30px;">A</div> <div style="border: 3px solid red; margin: 5px; width: 284px; height: 30px;">B</div> <div style="border: 3px solid #333; height: 30px;">C</div> </div> <hr> <p> 다음 div의 width는 270px 이고 height는 170px 이다. </p> <div style="width:200px; height: 100px; margin: 10px; padding: 20px; border: 5px solid #ccc; "></div> </body> </html>
위 코드 내용 - * 별 표시는 모든 태그를 의미한다.
- 즉 모든 태그에 바깥 여백와 안쪽 여백을 0으로 하겠다는 의미
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0; padding: 0; } h3 { margin: 20px; } </style> </head> <body> <h3>div 예제</h3> <p> style - float 속성 : 해당 요소를 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정<br> style - clear 속성 : 설정된 float 속성을 해제 </p> <div style="border: 3px solid blue; width:500px; height: 50px;"> <div style="width: 200px; background: yellow; float: left;">A</div> <div style="width: 100px; background: red; float: left;">B</div> <div style="width: 50px; background: green; float: right;">C</div> <div style="width: 50px; background: tomato; float: right;">D</div> </div> <hr> <div> <div style="background: red; height: 30px; width: 100px; float: left;"></div> <div style="background: green; height: 30px; width: 100px; float: left;"></div> </div> <div style="background: black; height: 30px; width: 200px; clear: both;"></div> <div> <div style="background: red; height: 30px; width: 100px; float: left;"></div> <div style="background: green; height: 30px; width: 100px; float: left;"></div> </div> <div style="clear: both"></div> <div style="margin: 30px auto; width: 200px;"> <div style="background: red; height: 30px; width: 100px; float: left;"></div> <div style="background: green; height: 30px; width: 100px; float: left;"></div> </div> </body> </html>
- float 태그 : 배치 위치를 left 또는 right로 설정 가능
- clear 태그 : float을 전부 해제함 (아래 말고 위로 적용된 놈들만)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <div style="width: 900px; margin: 20px auto;"> <div style="height: 100px; background: black;"></div> <div style="float: left; width: 200px; "> <div style="height: 50px; background: orange;"></div> <div style="height: 100px; background: red;"></div> <div style="height: 550px; background: #D941C5;"></div> </div> <div style="float: right; width: 700px;"> <div style="height: 50px; background: yellow;"></div> <div style="height: 650px; background: silver;"></div> </div> <div style="height: 100px; background: blue; clear: both;"></div> </div> <!-- clear: both = 플롯 줬떤거 푸는거 그리고 가장 가까운 위쪽으로 float 속성을 해제함 --> </body> </html>
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
HTML - 리스트 관련 태그 (1) (0) 2021.09.14 HTML - 테이블(table) 태그 (0) 2021.09.14 HTML - 레이아웃 / 시멘틱 태그 (0) 2021.09.14 HTML 기본 태그 (0) 2021.09.13 HTML 개요 (0) 2021.09.13
