#02. html_ day01

코딩 공부/웹표준

코딩연습중 2022. 7. 26. 01:11

웹을 개발할 때는 html과 css가 있다. html은 웹페이지를 브라우저로 보여줄 수 있도록 하는 언어이며, css는 html에서 표기되는 항목들을 디자인하고 자리를 배치하는 등의 역할을 도와주는 언어이다.

프로젝트를 만들 때에는 자바를 했을 때와는 달리, Dynamic Web Project를 만들어준다. 프로젝트를 생성한 뒤, WebContent 파일 안에 HTML File을 만들어서 코드를 작성한다.

<body>와 </body> 사이에 웹에서 보여줄 것들이 무엇인지 작성한다. 그냥 아무 말이나 적어도 되지만 보통 태그를 사용한다.

· 블록요소 : p, h 태그 등 블록 요소는 body만큼의 너비를 모두 차지한다.

· 인라인요소 : b, strong 등 안쪽에 가지고 있는 내용만큼만 너비를 차지하여 줄 바꿈이 일어나지 않는 태그

태그

p태그 : <p>와 </p> 사이에 글을 쓰는 것으로 안에 쓰인 글을 한 줄로 화면에 띄워준다.

<br> : 강제 개행. </br>을 사용하여 닫지 않는다.

<h1> </h1>, <h2></h2>,,,,<h5></h5> : 글자의 크기에 따라 다른 태그 사용. 숫자가 작을수록 글자의 크기가 크다.

<b></b> , <strong></strong> : 글자를 두껍게 표기. strong은 음성낭독기가 강조하여 읽어줌

<i></i>, <em></em> : 이탤릭(기울이기)이기. em은 음성낭독기가 강조하여 읽어줌

<hr> : 수평선 태그

<img> : 이미지 태그 - 사용법 : <img src = "이미지의 경로" alt="낭독기가 읽어줄 문자" title="마우스를 갖다 댔을 때 보여줄 글"

엔티티코드 : 특수 문자를 입력하기 위해 사용

목록표시태그

<ul></ul> : ul(Unordered list) : 공지사항 등의 비순서 목록

<ol></ol> : ol(Ordered list) : 순위 등의 순서 목록

ul과 ol 안에는 li가 있어 보여줄 목록이 무엇인지 작성한다.

표 만들기

<table></table> : 표의 영역을 만들어줌(table 안에 표 작성)

<table border ="1"> 이런 식으로 표에 테두리를 만들어줌

<tr></tr> : 행을 의미. table 안에 있음

<td></td> : 열을 의미. tr 안에 있음

테이블의 열을 합칠 때 : <td colspan ="합칠 열의 수"></td>

테이블의 행을 합칠 때 : <td rowspan = "합칠 행의 수"></td>

테이블에서 문자를 가운데 정렬하고 싶을 때 : <td align="center">

스타일 시트로 글자 색상 변경

스타일 시트의 영역은 <head></head>이다.

예를 들어 body 영역에 "안녕하세요"라는 문자를 담은 p태그가 하나 있는데 글의 색상을 파란색으로 바꾸고자 할 때, head 안에서 <style></style>을 생성하고 안에 p{ color:blue; }라고 지정해줄 수 있다.