2023/03/16__HTML/CSS__11

웹표준검사

https://validator.w3.org 

The W3C Markup Validation Service

 

** 요소 레벨(Element Level) **

태그가 어떻게 보여지는가에 대한 구분

 

1. 블록 레벨(Block Level)

- 독립된 행을 갖는 요소 집합

- 크기 지정, 위치 조정 가능(*)

- p, h1~h6, ul, ol, li, div, table..

- 다른 블록 레벨 요소와 인라인 요소 포함 가능

- p, h, dt, adress 같은 일부 요소는 다른 블록 포함 불가

 

2. 인라인 레벨(Inline Level)

- 범위 표시 요소의 집합

- 크기(예외:img), 위치 조정불가

- a, em, strong, img, span...

- 블록 레벨 요소는 포함할 수 없고 인라인 요소만 포함 가능

- html5 이후 a요소는 블럭 요소 포함 가능

 

** overflow

element / #id / .class {
overflow : auto , hidden , scroll;

overflow-x: auto , hidden , scroll;

overflow-y: auto , hidden , scroll;
}

** 요소 레벨을 바꾸는 속성 **

** position

element / #id / .class{
position : absolute / fixed / float;
}

** display

element / #id / .class {
display : 
block, 
flex, 
none,
inline-block (inline요소를 같은 줄에 놓고 블럭으로 만들어 크기를 생성할 수 있게 도와줄 수 있다.) ;
}

---

* Box Width : 800px

- width : 800px + padding:100px + border:100px

=800px+(100+100)px+(100+100)px =1200px

---

* Box Width : 100%

- width : 100% + padding:100px+border+100px = 100% +400px

---

* Box Width : auto

- width + padding + border = 100%

---

*box-sizing : border-box

- width + padding + border = widht

- width:80%; padding:100px; border:100px = 80%+400px

- widht:80%; padding:100px; border:100px; box-sizing:border-box = 80%

---

** position

1. 움직이는 방법

2. 위치 속성과 함께 사용

 

* 위치 속성

1. top / right / bottom / left

2. position 속성이 없는 경우 이동 불가

 

** position 속성값

1. static : 기본값, 이동 불가

2. absolute : 절대 위치 지정, 형제 요소간 동일한 중심점 사용 , margin: auto 사용 불가

3. relative : 모든 요소가 독립된 중심점 사용 ,margin: auto 사용 가능

4. fixed :  스크린을 기준으로 지정된 위치에 고정

 

position 속성 값이 있을 경우  제일 위로 올라오게 된다.

모두가 position속성이 있으면 태그 가 마지막으로 온 것이 제일 위로 올라오게 된다

모두가 있을때 z-index를 사용하면 z-index값이 있는 것이 제일 위로 올라오게 된다.

z-index의 값으로 제일 높은 숫자가 제일 위로 올라오게 된다.

 

** 레이어

1. 요소들간의 층 (앞/뒤)
2. z-index 속성 사용
3. 1부터 시작하는 정수 사용  / 상황에 따라 0 혹은 음수도 쓸 수 도 있다.
4. 부모 , 다른 자식 순서와 무관하며 본인 자식에게 높은 숫자가 앞
5. 속성을 지정하지 않는 경우 나중에 작성된 요소가 앞
6. 임의로 생성된 값은 실제 값보다 무조건 뒤
7. position 속성과 함께 사용

 

** 기준의 정의 

1. 움직이는 대상의 position이 relative인 경우

- 부모요소가 기준

2. 움직인 대상의 position이 absolute인 경우

- position 속성은 position 속성을 가지는 차상위 요소가 기준

- 상위 요소 중 position 속성을 가지는 요소가 없는 경우 document가 기준

 

position : fixed - 페럴렉스 스크롤링

 

position : sticky