HTML과 CSS의 기초
HTML
HTML은 헤드와 바디로 구분되어 있다. 헤드 안에는 페이지의 속성 정보(스크립트 따위)가, 바디 안에는 내용이 담긴다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 연습</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>구역을 나누는 디비전</div>
<p>문단을 나누는 파라그래프</p>
<ul>
<li> 목록을 만드는 ul</li>
<li> 순서가 필요없는 목록들</li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>소제목을 나타내는데, 1~6까지 있으며 중요도에 따라 할당 가능.</h1>
<h2>이렇게.</h2>
<h3>저렇게..</h3>
<hr>
수평 가로선을 만드는 hr
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버트으으은</button>
<hr>
textarea 태그입니다: <textarea>텍스트 에리어</textarea>
</body>
</html>
|
cs |
강의 내용을 어디까지 기록해도 되는지 확신이 잘 서지 않아 아주 기초적인 것들만 적어놔야겠다. 아니면 필요한 것은 비공개로 돌리던가.......
CSS
HTML가 뼈대라면 CSS는 데코같은 역할이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<style>
.title {
text-align: center;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10px;
width: auto;
height: 200px;
background-image: url("https://p4.wallpaperbetter.com/wallpaper/299/793/289/daft-punk-hd-c3po-4k-wallpaper-preview.jpg");
background-size: cover;
background-position: center;
}
.mypost {
width: 95%;
max-width: 450px;
margin: 50px auto 20px auto;
padding: 20px;
box-shadow: 0px 0px 7px 0px darkblue;
}
.mypost > button {
margin-top: 10px;
}
.wrap {
width: 95%;
max-width: 400px;
margin: 15px auto 15px auto;
padding: 10px;
}
</style>
|
cs |
<head>에 <style>을 추가하여 각 div를 꾸밀 수 있다.
.mypost는 class를 mypost로 선언한 div의 스타일을 정하는 것이다. width: 95%는 전체 화면의 95%까지를 가용 너비로 지정하고 최대 너비는 max-width: 로 450px로 제한한다. margin은 해당 div 외부와 얼마만큼 거리를 둘 것인지, padding은 내부 요소가 얼만큼 거리를 둘 것인지를 정하는 요소이다.
border-radius: ;
text-align: center;
padding-top: ;
이건 거의 한 세트로 쓰인다고 하는데, 상황 봐가면서 써야하지 싶다.
CSS는 부트스트랩이 있으며, 이를 활용하면 효율을 크게 높일 수 있다.
소감
가끔 인터넷에 짤방으로 HTML은 프로그래밍언어가 아니라고 하는 짤들이 돌아다니는 것을 봤는데 확실히 단순하다. 로직을 짠다기 보다는 이미 짜여진 태그들로 틀을 잡는, 코딩 언어라기엔 너무 단순해보인다. 하지만 이 문제는 스크립트 삽입이나 다른 플러그인 활용 등이 있으니 충분히 복잡해지겠지.
'항해99 개발일지' 카테고리의 다른 글
| 웹 개발 종합 4주차 (0) | 2023.01.11 |
|---|---|
| 웹 개발 종합반 3주차 요약 (0) | 2023.01.10 |
| 웹 개발 종합반 2주차 요약 (1) | 2023.01.10 |
| 01-09 일지 (0) | 2023.01.09 |
| 웹 개발 종합반 요약 전에 (0) | 2023.01.04 |