1~8강 내용
web app - 웹 형식으로 만들어졌지만, app처럼 특정 기능을 수행하도록 개발된 웹.
단점 : 웹 브라우저 만으로 이용 가능 / 하드웨어 제어 어려움
장점 : 프로그램 유지/보수 쉬움
태그(tag) : <h1></h1>
HTML 요소의 종류를 구별할 때 사용.
요소(element) : <h1>Hello HTML!</h1>
태그 안에 있는 내용을 포함한 객체
속성(attribute) : <html lang="en">
태그의 동작을 제어.
검색 엔진은 <h1>태그의 내용을 해당 페이지의 중심 제목으로 인식
<p></p> : 문단
<hr> : 가로 선
<br> : 줄바꿈
<b></b> : bold (표시상으로만 유효)
<strong></strong> : bold인데, 표시 뿐만 아니라 문서 내용 상으로도 중요함을 나타냄.
<i></i> : italic(기울임) 표시상으로만 유효
<em></em> : italic인데, 의미상으로도 강조를 넣음.(ex)text-to-speech에서 따로 강조를 넣음.
**strong과 em태그는 "웹 접근성" 측면을 고려한 태그들임.
: 그냥 공백을 여러개 넣으면 화면에서는 하나만 표시가됨. 중복 공백 넣으려면 공백 수 만큼 넣어야함.
< > : "<", ">" 의 기호는 태그를 넣을때 사용되므로 에디터에서 입력이 안되어서 <(less than <) >(greater than >
링크(Links)
<a href=""></a> : 앵커(Anchor) href 속성 이용, url 주소 이용해 다른 리소스로 연결
URL구조
https:// : 보안이 있는 프로토콜(Protocol)
www.google.com : 도메인 네임(Domain Name) DNS로부터 ip를 받을 때 필요한 이름... 때로는 포트번호 포함
/search : 경로(path) 폴더명, 파일명을 포함 (서버 내의 세부 위치를 알려줌)
?q=url : 쿼리스트링(Querystring) - 추가적인 정보를 가지고 서비스 요청
예시 : <a href="https://dic.daum.net/word/view.do?wordid=ekw000081980"></a>
절대경로 : file system의 root로부터 시작해 명시된 파일의 경로 이름
상대경로 : 현재 접속해 있는 서버에서 상대적인 경로(path)를 표시하는 방법
./ : 현재 폴더
../ : 상위 폴더
/ : root 폴더 ( / 앞에 아무 것도 없으면 root라는 뜻)
폴더A/ : 폴더 A의 하위 폴더
./detail.html : 현재 폴더에 있는 detail.html 참조
../index.html : 상위 폴더에 있는 index.html 참조
/default.html : 루트 폴더(root folder)에 있는 default.html 참조
img/icon1.png : img 라는 이름의 하위 폴더에 있는 icon1.png 파일 참조
<a href="" target="_blank"> : 새 창에서 열림
<a href=""> : 현재 창에서 열림.
타겟(Target) 속성 -> 링크를 열 때, 어떤 window를 이용할지 지정.
생략하면 현재 창에서 열리고, _blank로 지정하면 새 창으로 열림.
이미지(Images)
<img src="" height="" width=""> : height,width는 픽셀 단위로 조정 가능. 하나만 넣어도 나머지 하나는 자동 조정됨.
<a href="" target="_blank"><img src=""></a> : 이런 방식으로 이미지에 링크를 걸어줄 수 있음.
<body background="google.png"></body> : 페이지의 배경을 이미지로 지정해 줄 수 있음.
리스트(List)
<ol type=''">
<li>..</li>
<li>..</li>
</ol>
순서 리스트(Ordered List) : <li>로 지정된 아이템들에 순서를 매겨 표시
type : 1(기본), A, a, I, i 이 존재함.
<ul style="list-style-type:">
<li>..</li>
<li>..</li>
</ul>
비순서 리스트(Unodered List) :<li>로 지정된 아이템들에 글머리 기호 매겨 표시
style="list-style-type:circle" : 뒤에 circle, square, none 등 본인이 원하는 것 입력하면 됨.
테이블(Table)
<table>
<tr> <th></th><th></th> </tr>
<tr> <td></td><td></td> </tr>
<tr> <td></td><td></td> </tr>
</table>
Row(행)은 <tr>(table row), 각 셀(데이터)는 <td>(table data)로 표시.
<th></th> : 각 column(열)의 제목을 표시 (table header) .. bold체로 표시되어 나타남.
colspan : 하나의 셀을 여러 컬럼에 걸쳐서 표시. (column 병합)
<th colspan="2"></th> : 2개의 셀(열)을 병합한 크기
<td colspan="2"></td>
<td rowspan="2"></td> : 2개의 셀을(행) 병합한 크기
'프로그래밍 > Web' 카테고리의 다른 글
| 너무 쉬운 HTML/CSS 입문 #3 (0) | 2022.10.01 |
|---|---|
| 너무 쉬운 HTML/CSS 입문 #2 (0) | 2022.09.26 |