<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<h2>이메일로 가입</h2>
<div><label for="email-input">이메일</label></div>
<div>
<input
id="email-input"
type="email"
placeholder="이메일을 입력해주세요"
required
/>
</div>
<div><label for="password-input">비밀번호</label></div>
<div>
<input
id="password-input"
type="password"
placeholder="특수문자"
required
/>
</div>
<div><label for="name-input">이름</label></div>
<div>
<input
id="name-input"
type="text"
placeholder="이메일을 입력해주세요"
required
/>
</div>
<label for="checkbox-input">여기를 눌러주세요</label>
<input id="checkbox-input" type="checkbox" />
<div><input type="submit" /></div>
</form>
</body>
</html>
- 구현된 화면
- CSS
- 순차적으로 적용된 코드 -> 제일 마지막에 적용된 코드가 적용됨
- 에러를 표출하지 않음
- 현업에는 external 방식을 사용
- 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>
<!-- internal 방식 -->
<style>
div {
background-color: beige;
font-size: 20px;
width: 250px;
height: 150px;
}
</style>
<!-- external 방식 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- inline 방식 -->
<div style="background-color: red">여기!</div>
</body>
</html>
div {
background-color: blue !important;
}
- incline vs box
- inline은 content 없이는 높이와 너비를 갖지 않고, box는 높이와 너비를 갖는다.
- 각 요소는 박스모델(margin, padding, border)을 갖는다.
- margin은 바깥부분, padding은 내부부분, border은 테두리를 의미한다.
- width와 height는 content(내용)의 가로, 세로의 크기를 의미한다.
- Flexbox
- 화면 요소(content)의 배치 및 정렬하는데 도움을 주는 도구
- 요소들의 배치 방향 : Main axis(디폴트 : 가로), Cross axis(디폴트 : 세로)
- position
- 상위 태그에 대한 상대적 위치 설정
- absolute 옵션 : 상위 태그 중에 relative을 기준으로 배치
- fix 옵션 : 화면에서 항상 고정된 위치에 배치
- cascade : 제일 아래에 있는 것이 적용됨
- 선택자(selector)
- id : 특정 요소에게 스타일을 주고 싶을 때
- class : 비슷한 요소들에게 한꺼번에 스타일을 주고 싶을 때
- 자식 선택자
- :nth-child(n) : 앞에서 n번째 태그에만 스타일 적용
- 가상 선택자
- :hover : 마우스를 올렸을 때
- :active : 버튼을 눌러서 활성화 상태일 때
- :visited : 방문한 사이트일 때
- :focus : input 태그를 선택할 때