[CSS] 시멘틱태그 | 표를만드는태그 | 위치속성

24.03.11 18일차

목차

1. 시멘틱태그

2. 표를 만드는 태그

3. 위치 속성

---

 

1. 시멘틱태그

1. header

header

header

 

2. section

main(본문)

main의 style

 

3. aside

aside

aside의 style

 

4. footer

footer

footer의 style

 

 

 

2. 표를 만드는 태그

 

 

table-layout: fixed;  : 테이블의 크기를 고정

표의 크기가 고정되어있기 때문에 글자가 넘쳐버린다

 

word-break: break-all;  : 셀의 내용이 표에 벗어나지 않도록 설정

 

vertical-align : 수직정렬 설정(테두리의 넓이와 높이를 정해야 사용할 수 있음)

 

 

3. 위치 속성

        웹페이지를 작업할 때 각요소의 위치를 2가지 방법으로 설정합니다.
        이전작업에서는 태그의 x좌표와 y좌표를 직접적으로 설정한 것이 없으며
        상대위치좌표를 이용해 HTML 페이지를 작업했습니다.
        이번에는 절대위치 좌표를 이용해 작업하는 방법을 알아보겠습니다.
        상대위치좌표 태그요소를 입력한 순서를 통해 상대적으로 위치를 지정합니다.
        절대위치좌표 태그요소로 만들어진 x좌표와 y좌표를 설정해 절대위치를 지정합니다.

        static 태그가 위에서 아래로 순서대로 배치되며 (세로) position 속성을 지정하지 않으면
        기본값으로 지정됩니다.
        relative 초기위치상태에서 상하좌우로 위치를 이동합니다.
        absolute 절대위치좌료를 설정합니다.
        fixed 화면을 기준으로 절대위치좌표를 설정하며 위치가 고정되어있습니다.
        상대위치 좌표를 사용할때 position 속성에 static 또는 relative 값을 설정합니다.
        static은 모든 박스에서 기본값이기 때문에 position속성을 지정하지 않으면
        static 속성이 적용됩니다. 즉 static과 relative는 위에서 아래로와
        왼쪽에서 오른족으로 순서에 맞게 배치됩니다. 그러나 absolute를 지정하면 절대
        위치좌표르 사용해 배치방식을 다르게 표현할 수 있습니다.

 

static

 

relative

 

absolute

무조건 설정이 적용된다

 

fixed : 고정

첫번째 div는 absolute, 두번째 div는 fixed

absolute는 절대값이기 때문에 스크롤을 내리면 사라지지만 fixed는 고정된 값이기 때문에 화면에 고정되어있다

 

z-index : 숫자가 클 수록 위로 올라옴

box-3이 제일 위에 위치

z-index를 설정한 box-2가 제일 위로 이동됨