코맛

position

요소의 위치 지정 기준을 나타낸다.

default는 static(기준없음)이며

relative 는 요소 자신을 기준으로 삼는다.

absolute는 위치 상 부모요소를 기준으로 삼는다.( 구조 상 X)

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

relative

다음은 relative를 설정한 예시이다.

relative를 2번 스스로에게 적용하여 자신의 기준으로 top 20px, left 20px를 이동한 것을 확인할 수 있다.

absolute

absolute는 relative와 같이 사용하는 요소이다.

위치 상 부모 요소를 기준으로 배치를 진행하는 데 다음 그림을 보자.

코드입력예시를 보면 1번 박스에 relative를 걸고 absolute를 2번박스에 걸었다.

이 경우 2번박스는 1번 박스를 부모로 삼는다.

이렇게 되면 2번 박스는 3번박스와의 상호작용이 이뤄지지 않는다.

오직 1번 박스와 상호작용을 이룬다.

그러므로 1번 박스를 기준으로 top 20px, left 20px 이동한다.

static

static은 기준이 없다는 걸 의미한다.

relative설정없이  absolute만 설정을 한다면 다음과 같이 화면이 출력된다.

absolute는 자신의 relative를 찾으려고 계속해서 상위부모를 탐색한다.

만일 따로 relative를 설정이 되어있지 않다면

뷰포트를 부모로 삼아 뷰포토의 기준에 맞게 이동한다.

fixed

fixed는 뷰포트(브라우저)를 기준으로 삼는다.

fixed를 설정 시 스크롤를 내려도 그 위치에 고정시켜 놓는 성질을 갖게 만든다.

말이 다소 추상적인데... 직접 실행시켜보는 것이 도움이 될 것이다.

브라우저마다 적용되는 글꼴이 다르다.

그러므로 font-family를 이용하여 여러 글꼴들을 입력하여 상황에 맞게 적용시킬 수 있다.

요소의 내용(content)으로 크기를 계산한다.

border-box : 요소의 내용 + padding + border로 크기를 계산.

width 400 = 352+40+8

content-box : 한 박스의 길이가 설정된 width + padding +border로 크기를 계산

 총 길이 448 =  400+40+8

요소의 외부 여백(공간)을 지정하는 단축 속성

default : 0 (외부 여백이 없음)

auto: 브라우저가 여백을 자동으로 계산한다.

margin은 여러 방향으로 동시에 크기를 지정하거나 필요한 방향으로만 크기를 지정할 수 있다.

문서의 특정 부분을 스타일할 수 있도록 도와준다.

ex)

ABC::before {

content : "앞!";

color: red;

}

선택자 ABC요소의 앞에 내용(content)을 삽입한다.

ABC::after {

content:"뒤!";

color: blue;

}

선택자  ABC요소의 앞 내용(content)를 삽입한다.

<tr> 행

tr : Table Row(줄)

<th>, <td> 열

th : Table Header

td : Table Data

코드작성예시

<table>

             <tr>

                       <th> 타입</th>

                       <th> 값 </th>

              </tr>

              <tr>

                     <td> 숫자</td>

                     <td>1</td>

              </tr>

  </table>

=> 1줄(tr)에 2칸(th)의미

HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소

1. 블록요소
-div,h1,p
-사용 가능한 최대 가로 너비를 사용한다.
-margin, padding 의 크기를 지정할 수 있다.
-수직으로 쌓임
-레이아웃용도

2. 인라인 요소
-span,img
-필요한 만큼의 너비를 사용.
-크기를 지정할 수 없다.
-수평으로 쌓임
-margin, padding 의  위, 아래 크기조절불가능.
-text작업용도

margin

요소의 바깥부분(공간)을 말함.

padding

요소의 안쪽부분(공간)을 말함.

padding을 늘릴 경우 요소가 담긴 box의 전체적인 크기는 늘어나게 되어있음.

margin과 padding 추가 후 길이의 변화모습

Attribute : 해당 태그(tag)가 사용자(user)가 원하는 성질을 가지게 도와줌.

ex)

img는 image를 가리킴

src(source) 는 img 태그의 속성으로 가지고 올려는 이미지의 위치를 알려줌

alt(alternative) 는 만일 해당 이미지가 나타나지 않는 경우 대신 보여질 텍스트를 말함.

HTML의 기본 양식을 보면 DOCTYPE html, html, head, body  로 나눌 수 있다.

meta(웹 페이지의 정보)  : 웹페이지에 관한 정보(표시 방식, 제작자, 내용, 키워드 등)를 검색엔진이나 브라우저에 제공한다.

head : 사이트의 정보(문자인코딩방식, 제작자, 사이트의 내용)를 알려준다.

body : 사용자들에게 컨텐츠가 실질적으로 보여지는 공간.