https://www.youtube.com/watch?v=5i30L-bEUCg&list=PLYNmD6nHXpCZ6d-UAVRxWSvK8WOPMxXeA&index=5
웹 크롤링에 대해 찾아보다보니 html, css, javascript에 대한 기초지식이 있어야 한다는 걸 알게되어 기초를 따라해보며 배워보기로 했다.
결과를 바로바로 확인해볼 수 있어 재미있었다. 또 해당 영상의 '타모디자인'님이 쉽게쉽게 필요한것만 설명해주셔서 빠르게, 재미있게 실습해볼 수 있었다.
HTML로 웹 내용을 채우고, CSS로 디자인하는 것 같은데, 자세한 원리 및 언어에 대해서는 공부해봐야 할 것 같다.
따라해보면서 배운점
1. <!doctype html> </html>입력하기 + <html lang="ko"> 같은 기본적인 것 먼저 입력해주기
2. <head>는 별 쓸모 없는 듯
3. <body>에서 <style></style> 칸에서는 css를 쓰고, 그 이외에는 html을 사용
4. <div></div>와 <span></span>의 차이
5. <li> <ul></ul> </li> 로 리스트 만든다는 것
6. class를 지정한 후 서식을 적용할 수 있다는 것
7. 버튼이나 체크박스 만들때 <form></form> 만든다는 것, radio 형식, checkbox 형식 등 다양한데 실무에서는 별로 안쓴다는 것
8. 버튼 만들때 <div class="Btn"></div> 하고 그냥 css로 꾸미는게 보통이라는 것
다음은 내가 직접 따라하면서 쳐본 코드
<!doctype html>
<html lang="ko">
<head></head>
<body>
<style>
.blockTag {
background-color: red;
} /*블록단위*/
.blockTag > div:first-child{
background:turquoise;
border: 1px solid black;
} /*블록단위에서 덮어씌움*/
.blockTag > div:last-child{
background-color: blue;
border: 1px solid black;
}
.inlineTag {
background-color: tomato;
} /*블록단위*/
.inlineTag > span {
background-color: blueviolet;
border: 1px solid black;
} /*span 단위*/
</style>
<div class = "blockTag">
<div>block 1</div>
<div>block 2</div>
<div>block 3</div>
</div>
<div class = "inlineTag">
<span>span 1</span>
<span>span 2</span>
<span>span 3</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="kor">
<head></head>
<body>
<style>
li{
list-style: None;
}
</style>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="kor">
<head></head>
<body>
<style>
li {
list-style: none;
}
.colorBtn{
width: 100px;
height: 24px;
background-color: green;
color: white; /*글자색*/
text-align: center;
line-height: 24px;
cursor: pointer;
border-radius: 3px;
}
</style>
<form>
<ul>
<li>
<input type="text">
<input type="submit">
<!--submit: 데이터 전송-->
</li>
<li>
<input type="password">
<input type="submit">
</li>
<li>
<label><input type="radio" name="fruit" id="orange">오렌지</label>
<label><input type="radio" name="fruit" id="strawberry">딸기</label>
<label><input type="radio" name="fruit" id="apple">사과</label>
<!-- 1개 선택 가능 -->
</li>
<li>
<label><input type="checkbox" name="fruit" id="orange">오렌지</label>
<label><input type="checkbox" name="fruit" id="strawberry">딸기</label>
<label><input type="checkbox" name="fruit" id="apple">사과</label>
<!-- 여러개 선택 가능 -->
</li>
<li>
<label><input type="button" value="버튼입니다"></label>
<label><input type="submit" value="저장하기"></label>
</li>
<li>
<div class="colorBtn">버튼입니다</div>
<!-- 가장 많이 쓰임 -->
</li>
</ul>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="kor">
<head></head>
<body>
<style>
</style>
<a href="www.naver.com">네이버 바로가기</a>
<img src="./image/1124123123.jpg">
<!-- 이미지 위치까지 붙여야 함 -->
</body>
</html>
댓글