@@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@
@@@@@html vs css 기본구조@@@@
@html
1.기본구조
<태그이름 속성명1="속성값1" 속성명2="속성값2">컨텐츠 </태그이름>
ex)
<h1>방문해주셔서 감사합니다</h1>
<a href="www.naver.com">방문해주셔서 감사합니다</a>
<input type=”text”> </input>
<button type=submit>전송버튼</buttom>
2. id, class 식별
<태그 id=”아이디”>콘텐츠</태그>
<태그 class=”클래서”>콘텐츠</태그>
@css
1.기본구조
선택자 {속성:속성값; 속성:속성값;}
ex) h1 {color:red; font-size:12px;}
자손: <style> div p {color:red; font-size:12px;} </style>
자식: <style> div > p {color:red; font-size:12px;} </style>
일반형제: <style> div ~ p {color:red; font-size:12px;} </style>
인접형제: <style> div + p {color:red; font-size:12px;} </style>
2. id, class 식별
<style> #id {color:red; font-size:12px;} </style>
<style> .class {color:red; font-size:12px;} </style>
@@@@@6강@@@@@기본문법 태그
[1]태그
1.strong태그
<strong>볼드처리해주세요</strong>
2.underline 태그
<u>밑줄해주세요</u>
@@@@@7강@@@@@혁명적인 변화
3.h1 태그
<h1>제목처리해주세요</h1>
@@@@@8강@@@@@통계에 기반한 학습
-150개 정도의 태그가 있지만, 다 외울필요는 없음(검색하면됨). 단, 몇 개정도의 태그는 알고있는게 좋다
-전세계 통계상 가장 많이 사용하는 태그 25개 정도
@@@@@9강@@@@@줄바꿈 br vs p
4.br 태그
- 줄바꿈할때 사용 (닫는 태그 없음)
- 예시: 여기서 줄바꿈해주세요<br>다음줄이네요
5.p 태그
- 단락을 표현할 때 사용 (닫는 태그 있음)
- <p>여기부터 여기까지 같은 단락이에요</p>
>>>결국 br태그와 동일한 결과지만, 의미론적으로 단락이다 표현하는건 p태그가 더 맞음
Cf)css활용가능 (시각적으로 부족한 부분 활용가능)
<p style=”margin-top:40px;”> 여기부터 여기까지 같은 단락이에요</p>
@@@@@10강@@@@@html이 중요한 이유 (패스는 가능)
@@@@@11강@@@@@최후의 문법 속성 & img
[2]속성
<태그 속성=값>
5.img 태그
<img src=”이미지주소”>
너무크면 <img src=”이미지주소” width=”200%”>
@@@@@12강@@@@@부모자식과 목록
[3]부모자식 태그
(1)부모태그, 자식태그
-어떤 태그는 부모,자식 관계가 바뀌고, 어떤 태그는 안바뀜 (이번시간은 안바뀌는 태그들 설명)
<parent>
<child></child>
</parent>
6.li 태그 (리스트 태그)
<li>강의순서</li>
<li>참여자</li>
Cf)여러 개 잡으려면 컨트롤누르고 커서이동하면 여러군데 커서생김
7.ul 태그 (unordered list)
- 순서는 없음 > li의 부모태그 (여기li부터 저기li까지 하나의 부모인ul로 묶어줌)
<ul>
<li>1.HTML</li>
<li>2.CSS</li>
</ul>
<ul>
<li>tom</li>
<li>dave</li>
</ul>
8.ol 태그 (ordered list)
- 순서가 있음 > 숫자 자동으로 붙음 (ul대신 사용)
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
Cf)나중에 table태그는 3대가 같이다님 (ul, ol은 부모,자식 2대가 같이다님)
@@@@@13강@@@@@문서의 구조와 슈퍼스타들
9.title태그
-브라우저 탭에 명시되는 제목
<title>제목</title>
-검색엔진에서 책표지처럼 있어야지 더 잘 크롤링해감
10. meat태그 및 uft-8
<meta charset=”utf-8”>
11.doctype, html, head, body 태그
<!doctype html>(html로 구성되어있다), Html(html선언), Head(문서설명), body(내용)
@@@@@14강@@@@@html태그의 제왕
12. a 태그
<a href=”링크주소”>링크걸린 텍스트입니다</a>
1)target 속성
만약 새탭으로 열리게하고싶으면
<a href=”링크주소” target=”blank”>링크걸린 텍스트입니다</a>
2)title 속성
만약 클릭하기전 툴팁으로 무엇인지 알려주고싶다
<a href=”링크주소” target=”blank” title=”설명문구”>링크걸린 텍스트입니다</a>
1.input 태그
<input type=”checkbox”>
@@@@@15강@@@@@ 웹사이트 완성
'HTML > [생코]HTML' 카테고리의 다른 글
| [HTML]3.활용 (동영상삽입,댓글기능,채팅기능) (1) | 2023.04.23 |
|---|---|
| [HTML]1.기본 (실습환경 ATOM, 깃허브, 아파치) (0) | 2023.04.23 |
| [HTML] 2.태그 및 속성으로 사이트 완성 (0) | 2023.04.23 |