HTML[tag와 css기본]

국비지원 2일차. 오늘도 사정으로 인해 DB수업은 진행하지 못했고, 

HTML/CSS수업만 8시간 진행! 부족한 체력이 느껴진다..

 

오늘은 확실히 HTML보다는 디자인에 비중을 둔 CSS를 접했는데 확실하게 코드가 복잡?해지는듯 하다.

<title></title>페이지의 탭에서 페이지를 간략하게 나타내는 역할을 한다.

 

<img src="이미지의 주소">이미지 넣는 태그

크기 조절시 width="@@@px" height="@@@px" 사용

<span></span>마크업을 하기 위한 태그이며, 나중에 css에서 사용하기 위함인 것 같다.

 

<font size="@@pt"></font>폰트크기 설정 최대 15px

<font style="font-size : @@px">폰트 크기의 제한이 있는 html 대신 style을 이용해서 글씨를 더 크게 설정 가능.

<table></table>테이블을 정의, 테이블의 틀을 생성
border="@px" 테이블의 테두리를 설정 <table border="@px">

<th></th>테이블의 머릿말 설정
<tr></tr>테이블의 행을 담당
<td></td>테이블의 열을 담당

<td colspan="2"> //우측칸 포함 2칸을 병합
<td rowspan="2"> //아래칸 포함 2칸을 병합

 

//테이블의 구조는 행안에 열을 넣는 형식

ex)1층의 1호 2호 3호, 2층의 1호 2호 3호

align="center"가운데 정렬
<tr에 병합 적용 시 속해 있는 모든 td에 적용됨!>

목록을 표현하는 방법(여기서 li는 list를 의미)
숫자가 있는 목록, ol
<ol>
    <li>사과</li>
    <li>청포도</li>

    <li>파인애플</li>
</ol>

순서없는 목록, ul
<ul>
    <li>사과</li>
    <li>청포도</li>

    <li>파인애플</li>

</ul>

//앞에 아무것도 없게 하고 싶은데 아직 모르겠다. 검색하면 금방 나오니 찾아볼 예정.

<p></p>문단생성

ctrl+/ : 주석처리

css// style 적용방식

1.인라인 방식
태그에 직접 접근하여 일회용에 적합하므로, 동일 반복 작업을 해야할 때는 부적합
ex) <td align="center">

2.임베디드 방식
style태그 안에 공통으로 스타일을 적용할 태그를 적고{ }중괄호안에
적용할 스타일 사용. 두 개 이상의 태그 요소에 동일한 스타일 적용 시 유리


태그를 지칭할 때 사용되는 css의 요소를 가리켜 선택자라고 한다.
ex) td{         //여기서 td는 선택자가 된다.
color: red;
}

 

border 테두리 설정

클래스
.title_style{

}
앞에 점을 찍어 사용하면 내가 정의한 대상들을 묶어서 클래스로 사용가능
(.이 클래스라고 지정해주는 선택자 역할)

background-image: url(복사한 이미지 주소) 뒷배경에 이미지 넣기
repeat: no-repeat 반복되는 배경을 한 번만 나오게 한다.

//img를 이용하여 이미지를 넣는 방법과 background를 이용해서 이미지를 넣는 방법의 차이

img를 이용해 이미지를 넣게 되면 충돌이 발생한다. 여기서 말하는 충돌은 글자가 이미지 때문에 밀리는 현상 등

그래서 배경화면을 넣고 싶다면 background를 이용하면 된다.

style에서 background-image를 이용해 배경을 넣었다.

 

이미지를 넣는 태그를 이용해서 사이트에 다음과 같이 사진을 추가했고, position을 이용해 아이언맨 이미지의 위치를 조정했다. html에서 이미지의 위치를 변경하는 것은 불가능하다고 했는데,  css에서는 가능하다.

left로 왼쪽 벽에서 간격을 주고, top으로 상단으로부터 간격을 줬다. position은 absolute를 이용해서

절대위치?로 지정을 했다. 단점이 있다면, 웹 페이지의 크기를 줄이거나 늘렸을 때, 아이언맨의 위치가 계속 바뀐다.

//손에서 나오는 빔은 다른 이미지를 넣은 것ㅎ..

 

frameset 분할된 영역을 생성
좌,우 혹은 위, 아래로 반드시 분할해야 된다는 장점이 있어
잘 사용되지 않고 크기도 조절할 수 없다,

iframe
크기와 위치를 자유롭게 설정할 수 있는 개선된 프레임이다.