CSS
- 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
<link rel="stylesheet" href="index.css" />- 링크를 통해 style 적용 , css와 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>- 인라인 스타일 (권장x)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav style="background: #eee; color: blue"> << 여기
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>절대 단위, 상대 단위
- 절대 단위 : px, pt
- 상대 단위 : em, rem, vw, vh 등
- 글꼴 사이즈를 정할 때
-> 절대적인 크기는 보통 px, 상대 단위는 rem 추천 - 화면 사이즈를 정할 때
-> px, vw, vh 추천
선택자(Selector)
- ID 선택자 :
# - class 선택자 :
. - 자식 선택자 :
>,header > div - 후손 선택자 : 공백,
header div - 형제 선택자 :
section ~ p- 인접 형제 :
section + p
- 인접 형제 :
와이어프레임
- flex를 활용하면 안의 속성들을 이용해서 유연하게 설정가능
계산기 실습
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="calculator">
<div id="output">0</div>
<div>
<button class="gray">AC</button>
<button class="gray">+/-</button>
<button class="gray">%</button>
<button class="orange">/</button>
</div>
<div>
<button class="gray2">7</button>
<button class="gray2">8</button>
<button class="gray2">9</button>
<button class="orange">x</button>
</div>
<div>
<button class="gray2">4</button>
<button class="gray2">5</button>
<button class="gray2">6</button>
<button class="orange">-</button>
</div>
<div>
<button class="gray2">1</button>
<button class="gray2">2</button>
<button class="gray2">3</button>
<button class="orange">+</button>
</div>
<div id="four">
<button id="zero">0</button>
<button id="dot" class="gray2">.</button>
<button id="equal" class="orange">=</button>
</div>
</div>
</body>
</html>- style.css
#calculator {
width: 300px;
height: 400px;
border: 1px solid black;
border-radius: 8px;
display : flex;
flex-wrap : wrap;
flex-direction: column;
justify-content: space-between;
}
#output {
font-size: 38px;
text-align: end;
background-color: gray;
padding: 12px;
border-radius: 8px;
}
#zero {
width: 146.5px;
background-color: rgb(206, 202, 202);
}
button {
font-size: 22px;
width: 70.5px;
height: 62px;
border-radius: 8px;
}
.gray {
background-color: rgb(170, 165, 165);
}
.gray2 {
background-color: rgb(206, 202, 202);
}
.orange {
background-color: rgb(236, 148, 16);
}
백엔드 개발자