웹의 3요소
- html 뼈대
- css 꾸미기
- js 움직임
HTML (뼈대)
1. 구성
<head>
: 페이지의 속성 정보. 눈에 안보이는 필요한 것들 (meta, script, style, link, title)
<body>
: 페이지의 내용 (span, img, input, textarea)
2. 코드 정렬 단축키
: (윈도우) Shift + Alt + F
css (꾸미기)
명찰을 붙이고 그 명찰을 꾸며주기!
- 구역 : <div> 태그 사용
- 안쪽 여백 : padding
- 바깥쪽 여백 : margin
- 이미지 넣기
background-image: url('');
background-position:center;
background-size:cover;
예시1) 로그인 페이지 꾸미기
<div class="wrap"> </div>
1. div로 구역을 새로 감싸주면, 어디까지가 그 구역인지 확인하기 위해서 background-color 넣어줘보기
2. width값을 줘서 가로 길이 줄여줘야겠다!
3. 여백을 동등하게 줘서 가운데로 이동시켜야겠다!
margin은 위 오른쪽 아래 왼쪽 (시계방향) 순으로 입력.
auto는 끝까지 밀어준다는 의미!
4. css 확인 다 됐으면, background-color 빼주기
<style>
.wrap {
background-color : green;
width : 300px;
margin : 50px auto 0px auto;
}
</style>
LIST
'👩🏻💻TIL (Today I Learn) > HTML, JS' 카테고리의 다른 글
| 🚀 CORS 보안 정책 : 쿠키 차단 문제의 원인과 해결 방법 (0) | 2025.09.03 |
|---|---|
| 웹에서 글꼴 바꾸기 (구글폰트 / 눈누) (0) | 2025.02.20 |
| 웹 브라우저의 작동 원리 (0) | 2025.02.18 |