body 부분
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="wrap">
<div id="menu">
<ul>
<li class="menu1">menu1</li>
<li class="menu2">menu2</li>
<li class="menu3">menu3</li>
<li class="menu4">menu4</li>
<li class="menu5">menu5</li>
</ul>
</div>
<div id="side_banner">
<img src="image/mumin1.gif" />
</div>
</div>
<div id="footer">
footer
</div>
</body>
시멘틱 태그로 하지 않고 div 태그로 모두 만들어주었다. div id 가 wrap 인 부분은 menu와 side_banner 를 감싸고 있는 형태이다.
style 부분
<style>
#header {
width: 500px;
border: 1px solid #cccccc;
text-align: center;
font-weight: bold;
}
#wrap {
border: 1px solid #cccccc;
width: 500px;
overflow: hidden;
}
#menu {
border: 1px solid #cccccc;
width: 300px;
float: left;
}
#side_banner{
width:100px;
float:left;
}
#footer {
width: 500px;
border: 1px solid #cccccc;
text-align: center;
background-color:#ffd800;
font-size:2em;
font-weight:bold;
}
li {
color:red;
}
.menu1, .menu3, .menu5 {
color:blue;
}
</style>
id 는 #, class는 .
div는 원래 블록 형태인데 float : left 값을 줘버리면 왼쪽으로 붙음
content 다음에 side_banner 가 아래로 정렬되어야 하는데 왼쪽으로 붙는 걸 볼 수 있음 (단, 공간이 있을때!)
float : left 값을 주려면 감싸고 있는 애 wrap 에다가 overflow : hidden 을 써주어야 한다.
간혹 아래 태그 스타일에 clear : both 를 써줄 때가 있는데,
clear : both 를 써주는 이유는 float : left 속성이 밑에까지 영향을 미칠 수 있기 때문에 그것을 없애기 위해서 씀
font-size는 1em 이 기본값임, 2em 은 두배로 커짐
px 단위로 지정해줘도 된다.
li class 라고 되어 있어도 li 태그에다가 속성을 지정해줘도 되는구나
.menu1 이라고 써줘도 되지만 ul li.menu1라고 써도 적용이 된다.
실행결과
↓
※ 배운 것 정리 : tag 선택자, id 선택자, class 선택자를 배워보았다. 또한 overflow : hidden 을 감싸고 있는 부분에 지정을 해서 안에 있는 것들은 float : left 를 지정해주면 왼쪽으로 붙는 것을 확인하였다.
속성 선택자
<form action="#" method="get">
이름 : <input type="text" name="uname" /><br />
아이디 : <input type="text" name="uid" /><br />
비밀번호 : <input type="password" name="upw" /><br />
전화번호 : <input type="tel" name="utel" /><br />
<input type="submit" />
</form>
<style>
input {
font-size:30px;
font-weight:bold;
}
input[type=text] {
color:#ffd800;
}
input[type=password] {
color:green;
}
input[type=tel] {
color:red;
}
</style>
후손 및 자손 선택자
<body>
<div id="header">
<div class="logo">
<h1>LOGO</h1>
</div>
<div class="copy">
<h2>global company</h2>
</div>
</div>
<div id="wrap">
<p>서울시 8대 신성장동력의 하나인 녹색산업을 집중 육성하기 위해 녹색기업에 특화된 지원
기관인 녹색 산업지원센터는 ....
</p>
<ul>
<li><p>서울 애니메이션 센터</p></li>
<li><h1>서울 녹색산업지원 센터</h1></li>
<li><p>DMC 디지털 미디어 시티</p></li>
<li><h1>서울 게임 콘텐츠 센터</h1></li>
<li><p>서울시 우수 사회적 기업지원</p></li>
</ul>
</div>
</body>
<style>
#header, #wrap {
border:1px solid #cccccc;
width:500px;
}
div li {
background-color:green;
}
div p {
font-size:25px;
}
div > h1 {
color:yellow;
}
</style>
후손 선택자는 특정 선택 태그 안에 있는것들
자손 선택자는 특정 선택 태그 바로 아래 계층에 있는것들이라고 생각하면 된다.
예시를 살펴보면,
div li 는 후손 선택자로 내 바로 아래가 됬던 아래 아래아래 li가 됬던 모두를 지칭할 수 있다.
div > h1 이건 특정 선택 태그의 바로 아래 계층에 있는 걸 선택하는 것으로써 자손 선택자를 의미한다.
실행결과
↓
동위 선택자
동위 선택자란? 태그의 동등한 위치를 판단하여 CSS 속성을 설정하는 선택자입니다.
동위 선택자는 + , ~ 표현이 존재합니다
~ : 나와 동급인 녀석들
+ : 나와 동급인 녀석들중 나와 바로 밑에 붙어있는 녀석
출처: https://yoonemong.tistory.com/164 [Sw.Dev]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h3~div {
font-size:10px;
color:orange;
}
h3+div {
font-size:20px;
font-weight:bold;
color:blue;
}
#title~div {
width: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<h3 id="title">동위 선택자(+, ~)</h3>
<div>div_01</div>
<div>div_02</div>
<div>div_03</div>
<div>div_04</div>
<div>div_05</div>
</body>
</html>
실행결과
↓
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 문자 선택자, 링크 선택자, 부정 선택자 (0) | 2021.09.19 |
|---|---|
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
| HTML 비디오 태그, 폼 태그, 시멘틱 태그 (0) | 2021.09.17 |
| HTML 기본 태그 (0) | 2021.09.17 |
| flexbox에 대하여 (0) | 2020.05.15 |