TIL HTML/CSS Chapter 16-18.2 (과제1)

finelinefe·2020년 8월 19일
0

HTML/CSS

목록 보기
9/9

Position 그 외

relative = top, right, bottom, left 등으로 이동 가능
ex) div.relatice.top-20 = 음양수는 상하이동

absolute = 절대적 위치. 상위 부모 태그의 옵션에 따라 그를 기준으로 이동한다.(해당 영역이 제한)

fixed = 위치고정.
fixed-right,top,left, bottom 요소 추가 = 해당 요소의 영역을 기준으로 지정된 숫자만큼 이동한 뒤 고정된다. 0일 경우 이동하지 않음. 즉 그 경계에 그대로 닿아있는다. 음수의 경우 위로 이동, 양수의 경우 아래로 이동.

float 그 외

플로팅은 말 그대로 띄운다는 의미이다. 상위의 태그. 즉 위에 있는 영역이 width 100%이거나 화면을 꽉 채울 경우 이의 플로팅은 필요 없으나 그렇지 않은 경우 간단히 사용한다.

float-left,right,none = 플로팅의 각 속성에 따라 좌우배치된다
그러나 overflow:hidden(넘치는 영역을 보이지 않게 함), 바깥의 태그를 float 함으로써 해결 가능하나 추가로 코드 작성이 필요하다

레이아웃 그 외

content = w,h 값을 가진다. 혹은 퍼센트로 지정할 경우 해당 기기의 화면에 따라 유동적으로 변한다

padding = 경계선 안쪽으로 위치하는 내부영역. 4개의 값을 주면 상우하좌, 두개씩 주면 상하/좌우, 또는 각각 상,우,하,좌(padding-top, right,bottom,left)로 지정 가능하다. 이 경우 기존에 지정해준 컨텐츠의 w,h 값에 변화가 있으므로 크기가 커지지 않게하기 위해서는 계산이 필요

margin = 경계선 바깥쪽으로 위치하는 외부영역, 간격을 띄거나 할 때 사용한다. 블록태그에서는 적용 가능하지만 인라인 태그의 경우 값을 가지지 않으므로 불가능하다.(이 경우에는 인라인태그에 display-block 을 설정하거나 inline-block을 주워 블록처럼 해당 속성을 가질 수 있게 할 수 있다)

border = 경계선을 말한다. (해당픽셀)px solid color 로 작성한다. 색상은 이름으로 또는 hexacode, rgb로 표현 가능하며 경우에 따라 투명도를 주기 위해서는 rgba를 사용한다. 마찬가지로 border 또한 top, right, left, bottom 으로 별개 지정 가능하다

border-radius = 각 꼭지점 부근을 둥글게 굴린다. 순서는 동일하다. 상,우,하,좌이며 각 px의 값이 커질수록 굴곡값이 커진다. px이나 경우에 따라 em(브라우저 호환문제인 것으로 생각한다)을 사용한다.

0개의 댓글