id(#)와 class(.)
태그의 id와 class 를 이용하여 css에서 속성을 설정 할 수 있다
id를 이용할 때는 #
class를 이용할 때는 .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#header {
width: 500px;
background-color: #ffcc00;
border: 1px solid #000000;
text-align: center;
}
#wrap {
width: 500px;
background-color: #00ffdd;
border: 2px solid #ea00ff;
text-align: center;
overflow: hidden;
}
#content {
width: 350px;
background-color: #ffcc00;
border: 2px solid #000000;
float: left;
}
#side_banner {
background-color: #ffcc00;
border: 2px solid #000000;
float: left;
}
#footer {
clear: both;
width: 500px;
background-color: #ff0080;
border: 1px solid #66fa03;
text-align: center;
}
.menu1 {
color: #aaaaaa;
font-weight: bold;
}
.menu1,
.menu3,
.menu5 {
font-size: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="wrap">
<div id="content">
<h1>CONTENT</h1>
<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">
<h1>BANNER</h1>
<a href="https://www.naver.com/"
><img
width="100px"
src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEwMjRfMTU3%2FMDAxNjAzNDgyNTU0Mjg0.-Rc206zme2K6XKWJjosmHucpqDj8sqNvzhZeAVCwb08g.gFvmgVX1_N2-7SXYkzzhwDGxNoRzsRmHdGmPRFuMCW8g.GIF.boccabe%2Fnaver.gif&type=a340"
alt="naver"
/></a>
</div>
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</body>
</html>
float를 할 때 overflow에 hidden을 해줘야한다.
text-align: 텍스트 정렬 방향
-left: 왼쪽 정렬
-center: 중앙 정렬
-right: 오른쪽 정렬
-justify: 양쪽 정렬(자동 줄바꿈시 오른쪽 경계선 부분 정리)
overflow: 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법
-visible: 넘친부분까지 보이기
-hidden: 넘친부분 숨기기
-scroll: 스크롤 형식
-auto: 사용자 에이전트가 결정
https://developer.mozilla.org/ko/docs/Web/CSS/overflow
overflow - CSS: Cascading Style Sheets | MDN
overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x, overflow-y의 값을 설정합니다. The source for this interactive example is stored
developer.mozilla.org
float: 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너 좌우측을 따라 배치되어야 함을 지정함, 한마디로 주위에 감싸는 걸 하는가 안하는가를 의미, 둥둥 떠 움직이는 것
-none: 요소가 부동하지 않아야함, 주위 둘러싸지 않음
-left: 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타냄
-right: 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타냄
-inline-start: 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타냄
-inline-end: 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타냄. 즉 Itr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽
https://developer.mozilla.org/ko/docs/Web/CSS/float
float - CSS: Cascading Style Sheets | MDN
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. The so
developer.mozilla.org
clear: 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는지를 지정
-none: 요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드
-left: 요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
-right: 요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드
-both: 요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내느 키워드
https://developer.mozilla.org/ko/docs/Web/CSS/clear
clear - CSS: Cascading Style Sheets | MDN
clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다. The source f
developer.mozilla.org
tag, id, class 혼합
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul li.menu1 {
color: #aaff00;
}
.menu2 {
color: #00ffd5;
font-weight: bold;
font-size: 20px;
}
#menu {
color: #eb0000;
}
#header {
background-color: aqua;
text-align: center;
border: 2px solid #000000;
}
#wrap {
background-color: #ffee00;
border: 2px solid #000000;
overflow: scroll;
}
#content1 {
border: 1px;
width: 250px;
float: left;
}
#content2 {
border: 1px;
width: 250px;
float: left;
}
#footer {
background-color: aqua;
clear: both;
border: 2px solid #000000;
}
* {
width: 500px;
}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="wrap">
<div id="content1">
<ul>
<li id="menu">menu</li>
<li class="menu1">menu</li>
<li class="menu2">menu</li>
<li class="menu1">menu</li>
<li class="menu2">menu</li>
</ul>
</div>
<div id="content2">
<ol>
<li class="menu1">menu</li>
<li class="menu2">menu</li>
<li class="menu1">menu</li>
<li class="menu2">menu</li>
<li class="menu1">menu</li>
</ol>
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
ul li .menu =>ul태그 안에 li태그 안에 menu를 선택
속성 선택자
tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
input {
color: rgb(255, 140, 0);
font-size: 30px;
font-weight: bold;
}
input[type="text"] {
color: #ff0000;
font-size: 50px;
width: 200px;
}
input[type="tel"] {
color: blue;
}
img[src] {
border: 5px solid green;
}
</style>
</head>
<body>
<form>
이름: <input type="text" /><br />
아이디: <input type="text" /><br />
비밀번호: <input type="password" /><br />
전화번호: <input type="tel" /><br />
</form>
<img
src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMjFfMTkx%2FMDAxNjExMTU1MTYwNzY3.Ud-RGzNn46Vs9ftBU0gaXaH5vIFCHro8TA230qMMZX4g.st3kqQD_bzQo4WXblhUDNfKJI-fOdNCMpdL4rqrviXYg.PNG.djgkrrl1234%2Fimage.png&type=sc960_832"
alt="네이버"
width="100px"
/>
</body>
</html>
[]를 이용해 속성 표시
후손 및 자손 선택자
tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있다.
가족관계 식으로 할경우
자손 선택자: 바로 밑에 있는 태그 선택, >으로 구분
후손 선택: 밑에 있는 모든 것 선택, 공백으로 구분
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#header,
#wrap {
border: 1px solid rgb(255, 0, 0);
}
/*후손*/
div li {
background-color: rgb(215, 176, 253);
}
div p {
font-size: 5px;
}
/*자손*/
div > h1 {
font-weight: bold;
color: yellow;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<h1>LOGO</h1>
<!--여기부분이 div 자손이라 노란색으로 바뀐다-->
</div>
<div class="copy">
<h2>global company</h2>
</div>
</div>
<div id="wrap">
<!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
<p>제목</p>
<ul>
<!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
<li><p>가가가</p></li>
<!--여기부분은 div 후손이라 노란색으로 바뀌지 않는다-->
<li><h1>나나나</h1></li>
<!--여기부분은 div 후손이라 글씨 사이즈가 5px로 바뀐다-->
<li><p>다다다</p></li>
<!--여기부분은 div 후손이라 노란색으로 바뀌지 않는다-->
<li><h1>라라라</h1></li>
</ul>
</div>
</body>
</html>
div li => div 안에 li, 후손일 경우 공백으로 표시
div>h1 => div 안에 바로 h1을 선택
동위 선택자
태그의 동등한 위치를 판단하여 CSS속성을 설정 할 수 있다
+: 그 태그와 바로 근접해 있는 태그 하나 선택
~: 그 태그와 동등한 위치에 있는 태그들 중에 다 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h3 ~ div {
font-size: 10px;
color: orange;
}
h3 + div {
font-size: 20px;
font-weight: bold;
color: orchid;
}
#title ~ div {
width: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<h3 id="title">동위 선택자(+,~)</h3>
<!--h3+div에 의해 크기와 색깔이 바뀜-->
<div>div_01</div>
<!--h3~div에 의해 크기와 색깔이 바뀜-->
<div>div_02</div>
<div>div_03</div>
<div>div_04</div>
<div>div_05</div>
</body>
</html>