3월2일 내용정리
*복습하기
-meta는 공통적인 정보를 적어주며, charset->문자 인코딩 설정 하는것
UTF-8가 웹에서 통요되는 인코딩
참고로,사람글자-->인코딩(컴터알아들을수 있는 언어로번역)-->컴터
그반대 컴터-->디코딩-->사람글자
-html,css는 에러가 나면 그부분은 실행이 안됨.딱 title만 에러를 걸러내서 알려줌
-div(박스),span(묶음중에 작은부분박스, 일렬로 나열가능,inline),p(텍스트묶음) div,span,p는 문단의 성격을 띄고있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!--UTF-8 1~4byte // 사람글자--인코딩(컴터알아들을수 있는 언어로번역--컴터//그반대 컴터--디코딩--사람글자-->
<!--meta는 공통적인 정보를 적어줌-->
<!--html,css는 에러가 나면 실행이 안됨,딱 title만 에러를 걸러내서 알려줌-->
<!--div(박스),span(묶음중에 작은부분박스, 일렬로 나열가능,inline),p(텍스트묶음) 이것들은 문단의 성격을 띄고 있다.-->
<meta charset="UTF-8">
<title>문단연습</title>
</head>
<body>
<h1>문단 태그 연습</h1>
<!--<hr/>,<br/> 은 열고닫기안해도 여는거나 닫는거 하나만써도 실행됨-->
<!--참고로 <hr/>,<br/> 이거 스페이스바 위치 체크
아까 </hr> 로써서 안됐음 왜?? <hr></hr> 한쌍인데,</hr>만 써줘서 인식이 안됐나봄-->
<hr/>
<p>
대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 </br>
국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고</br>
국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나</br>
이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.
<!--맨마지막에는 </br> 안넣는다. 나중에 안에 간격 맞추기가 어려워짐-->
</p>
<hr/>
<div>
대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 </br>
국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고</br>
국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나</br>
이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.
</div>
<hr/>
</body>
</html>1.ul과 ol의 차이 그리고 li
ul (unordered list) 순서가 없는 목록, 앞에 점으로 표현한리스트
ol (ordered list) 순서가 있는 목록, 번호를 매긴형태
il (list Item) ul과 ol 안에 들어가는 아이템목록 이게 있어야 리스트로 인식한다.
2.에밋
에밋은 html,css을 쉽게 써주는 약어
div(부모)>ul(자식)>li(후손)*6 엔터치면 아래와 같이 나옴
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>div(부모)>ul(자식)>li(후손)*6{공통적인 텍스트} 아래와 같이 나옴
<div>
<ul>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
</ul>
</div>자식선택자(>), 형제선택자(+), 복수구성(*),
클래스(.), 아이디(#), 속성([ ]), 내용({ }), 순번부여($), 순번부여 시작 숫자(@)
자식선택자(>) 예)div>ul
한칸띄기는 후손 이라는 의미 예)div li
참고로, 물건도 상자안에 넣어서 정리하면 깔끔하듯이 div라는 상자에 넣어서 구조를 잡는다. 그래서 div를 많이 쓴다.
<!--ul (unordered list) 순서가 없는 목록, 앞에 점으로 표현한리스트 -->
<!--ol (ordered list) 순서가 있는 목록, 번호를 매긴형태-->
<!--il (list Item) ul과 ol 안에 들어가는 아이템목록 이게 있어야 리스트로 인식한다. -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서 없는 목록, 순서 있는 목록</title>
</head>
<body>
<h1>순서 없는 목록</h1>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<hr/>
<h1>순서 있는 목록</h1>
<ol>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ol>
<hr/>
<div>
<ul>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
<li>공통적인 텍스트</li>
</ul>
</div>
<!--alt+shift+방향키 한줄복사-->
<!--같은 글자 한번에 쓰기(부분적인 텍스트 반복할때) 예시) 아래 메뉴 쓰기 1번ctrl+alt+시작부분클릭 2번ctrl+alt+방향키-->
<!--에밋은 html,css을 쉽게 써주는 약어-->
<!--div(부모)>ul(자식)>li(후손)*6 엔터치면 아래와 같이 나옴. -->
<!--div(부모)>ul(자식)>li(후손)*6{공통적인 텍스트} 아래와 같이 나옴-->
<!--자식선택자(>) 예)div>ul -->
<!--한칸띄기는 후손 이라는 의미 예)div li-->
<!--자식선택자(>), 형제선택자(+), 복수구성(*)-->
<!--클래스는 공통적인 부분을 묶을때 쓴다.-->
<!--클래스(.), 아이디(#), 속성([ ]), 내용({ }), 순번부여($), 순번부여 시작 숫자(@)-->
<!--물건도 상자안에 넣어서 정리하면 깔끔하듯이 div라는 상자에 넣어서 구조를 잡는다.-->
<!--절대경로 주소를 입력하여 찾아가는것 예)https://www.naver.com-->
<!--상대경로 있는 자리 기준으로 경로를 알려줌-->
<!-- . 자기자신이 있는곳(방문열고들어가) .. 자기자신이 있는곳에서 벗어남 (방문열고나가)-->
<!--img(그림) src(source)-->
<!--<a(anchor) href(hyper reference )=https://www.naver.com/>네이버</a> 네이버 글자를 누르면 네이버페이지로 넘어가라-->
</body>
</html>3.경로
절대경로 주소를 입력하여 직접 찾아가는것 예)https://www.naver.com
상대경로 내가 있는 자리 기준으로 경로를 알려줌
. 자기자신이 있는곳(방문열고들어가)
.. 자기자신이 있는곳에서 벗어남 (방문열고나가)
예)./images/background01.jpg ---->내가있는곳 기준으로 이미지폴더열고 background01를 찾아라
참고로 이미지 파일 부를때는 <img(그림) src(source)="">를 쓴다.
4.하이퍼링크
a(anchor) href(hyper reference )
아래와 같은 형태로 입력
<a href="연결할 url" target="_blank">화면에 나타날 글자나 그림</a>여기서 target="_blank" 새로운 창을 띄우는거, target이 없거나 target="_self" 새로운창 nono
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 및 하이퍼링크 연습</title>
</head>
<body>
<!--<a(anchor) href(hyper reference )=https://www.naver.com/>네이버</a> 네이버 글자를 누르면 네이버페이지로 넘어가라-->
<!-- target="_blank" => 새로운 창(윈도우)으로 열기-->
<!-- <a href="연결할 url" target="_blank">화면에 나타날 글자나 그림</a> -->
<h1>하이퍼링크 연습</h1>
<!--target="_blank" 새로운 창을 띄우는거, target이 없으면 같은창에서 열림 또는 _self-->
<a href="https://www.naver.com/" target="_blank">새로운창 네이버</a>
<a href="https://www.naver.com/">self 네이버 </a>
<a href="./ul.html">ul문서</a>
<a href="./images/background01.jpg">이미지로열기</a>
</body>
</html>