-
[웹프로그래밍]1주차웹프로그래밍 2022. 3. 10. 23:43
<학습내용>
-태그-
- 글자서식 태그
-목록 태그
-링크 태그
-이미지 태그
-테이블 태그
-오디오 태그
-비디오 태그
1. 텍스트(글자서식) 관련 태그
1) 본문 : <body> ... </body>
(1) 모든 텍스트가 한줄의 문장으로 출력됨
※ 단락 넘기려면 <p>...</p>
(<p> 다음 줄 커서 이동후 텍스트 입력 </p> 다음줄로 이동 -> <p> 다음 줄 커서이동)
※ 강제 줄바꿈 태그 <br> ... </br>
※ 프로그래머가 입력한 그대로 화면에 표시하는 태그 <pre>...</pre>
2) 제목 글(헤딩) : <h1>...</h1> , <h2>...</h2> 등
(1) h다음에 오는 숫자에 따라 형식이 지정되어있음.
(2) 1~6까지 있음.
3) 텍스트 서식
(1) 강조된 표현을 위해
(2) 수평선 삽입
- <hr>태그 : 주제 구분용
(3) 특수문자
- '<'와 '>'같은 특수문자를 화면에 표시하기 위한 특수문자
2. 목록 태그
1) 항목 나열 리스트 : <ol>...</ol> , <ul>...</ul>
(1)번호있는 리스트 : <ol>
-들여쓰기나 ' 1. ', ' 2. '등과 같은 번호표시가 없더라도 자동 형식화됨
(2) 번호없는 리스트 : <ul>
-들여쓰기나 ●과 같은 기호표시를 안하더라도 <ul>,<li>만으로 자동 형식화됨.
3. 링크태그 : <a>
1) href속성을 사용하여 이동경로 명시 : <a href = "info.html"> 추가정보 </a>
(1) target 속성
target 설명 _blank 새로운 윈도우에서 새로운 페이지를 연다. _self 현재 윈도우에 새로운 페이지를 적재한다. _parent (요즘은 사용x)부모 프레임에 새로운 페이 (2) id속성 : 섹션구분
-하나의 페이지 안에서 링크를 누르면 밑섹션으로 쭉 이동할 수 있도록 구분지음.
4. 이미지 태그
1) <img> 태그 사용
(1) img 속성 세부 용어: border, src, alt, width, height
- border : 테두리 두께
- src : 이미지 이름
- alt : 이미지로딩 실패시 표시될 텍스트
- width : 가로 폭
- height : 세로 폭
2) 썸네일 예제
(1) 작은 이미지: 웹에서 작은 이미지를 보여주고 클릭하면 크게.
사용자가 이미지를 클릭해야 photo1.html이 호출됨 (2) photo1.html의 코드
images파일 아래에 이미지가 있음. "파일경로/이미지 파일 이름.jpg" Q.같은 폴더아래에 (1)코드와 (2)번코드가 같이 있을경우 썸네일 눌렀을 때 photo1.html열린다는 말?
5. 테이블 태그 : <table> </table> 태그
1) 테이블 요소 태그
-테이블 헤더(th를 사용하면 진하게 표시됨)
2) 테이블 경계
-<table border = "1"> 사용
3) 테이블 행,열 병합
4) 테이블 캡션
5) 테이블 셀 컬러
-글자색 : color, 배경색 : background-color
ex) <td style = color: blue; background-color:yellow>
-<font>...</font> 태그 이용
ex) <td><font color="red">...셀 내용 입력공간...</font>
'웹프로그래밍' 카테고리의 다른 글
[웹프로그래밍] 7주차 JS이벤트 처리 (0) 2022.04.16 [웹프로그래밍] 5주차-6주차 javascript 문법 (0) 2022.04.09 [웹프로그래밍]4주차 (0) 2022.03.27 [웹프로그래밍]3주차 (0) 2022.03.22 [웹프로그래밍]2주차 -미완 (0) 2022.03.22