첫강의를 시청하면서 제일기본적인 개념부터 배우기시작한다
html은 뼈대를 의미하고 css는 피부처럼 보여지는 역할이라고한다
첫날이다보니 프로그램설치및 회원가입을 하다보니 강의를 하나밖에 보질못했다.
정말 간단한 구조이니 알아보도록하자!
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="main.css">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1 class="h1">로그인페이지</h1>
<p>ID:<input type="text"></input></p>
<p>PW:<input type="password"></input></p>
<button>로그인하기</button>
</body>
</html>
tittle : 인터넷 페이지를 열었을때 페이지의 제목
body: 홈페이지의 전체적인내용이 들어가는 틀
h1: 본문의제목 제목에 각종키워드를넣었을때 구글에서 긁어오는부분이 h1태그부분이라고한다
h2~h6? : 글씨크기조절이라고하는데 css에서 font-size를 사용할수있으니 중요한부분이라고 생각되지않는다
p: 기본적인 문단을 나누는 태그
input: 사용자가 기입을할수있게 만들어놓은 태그
<input>내부에 type을 작성하여 text는 문자를 password는 눈에보이지않는 패스워드방식을 입력할수있다
input을 p태그로 감싸는 이유는 class나 id를 지정하여 다른무언가를 적용할때 용이하게한다
button: 말그대로버튼 html에서 a태그로 링크를 걸어주면 css를 활용하여 버튼을 만들수도다
그이외에도 많은 코드들이있지만 자주사용되는 것들을 몇가지 적어본다
<div>, <span>, <section>: p태그처럼 사용한다 하지만 원리개념자체는 다름
img : 링크를 걸어서 이미지를 화면에 출력한다 예:) 123.jpg 또는 인터넷에서 긁어올수있는 사진주소등
textarea: 게시판에 많이이용될거같아보인다 글을 길게 입력할수있다
ul, li: 부모와 자식의 관계이다 리스트를만들어서 상단메뉴바를만들거나 카테고리탭을 만들때 사용된다
자주사용하는 아이탬이니 손에익혀두자
글을마치며...
정말기본적인내용이다 외워서쓰기보다는 쓰다보니 외워진것들 인거같다
다음강의는 이위에 css를 입힌다
짧은시간이지만 html 과 css ,js를 독학을하면서 많이 부족했던부분이
css부분이였으니 다음강의에서는 확실하게 이해를해보자
padding 이나 margin 같은 개념은 이해를했는데
정렬을한다던지 이미지의 크기를 직접적으로 조절하는부분등등
한번 죽 훑고 넘어간것들을 자세히알아보며 강의를 다들은후에는 구글링으로
조금더 새밀한 부분을 공부한다면 미니프로젝트를할때 도움이되지않을까 생각이든다.
'일일 개발일지 html, css' 카테고리의 다른 글
| 10/18 정말 쉽고 간단한 Css 부트스트랩 (0) | 2022.10.18 |
|---|---|
| 10/18일 Html이 Css와 만나다 (0) | 2022.10.18 |