본문 바로가기

CSS

[CSS] Position의 모든것★ 이번 포스팅에서는 웹페이지에서 요소의 위치를 자유자재로 정렬하기 위한 모든 개념을 꼼꼼히 정리해볼 것이다. 1. Position CSS에서 Position은 요소가 문서 상의 어디에 위치할 것인가를 지정한다. 최종적으로 left, right, top, bottom (오프셋) 속성으로 문서의 최종 위치를 정의하게 되는데 Position의 값에 따라 그 위치를 지정하는 방식을 결정하게 된다. static(기본값) 기본값. 오프셋 속성을 무시한다. relative absolute 가장 가까운 부모요소의 위치에 따라 상대적으로 배치 (가까운 부모요소가 없다면 가장 상위 컨테이너에 따라 배치) fixed 문서의 최상위 컨테이너를 기준으로 배치 (단, 부모요소 중 transform, perspective, filt.. 더보기
[CSS] HTML에 CSS를 적용하는 3가지 방법 1. HTML문서 안에서 CSS를 적용할 태그 내에 입력하기(inline style sheet) 2. HTML 문서 안에서 태그 내에 입력하기(internal style sheet) 3. 외부 CSS 파일 연결하기(linking style sheet) 1. HTML문서 안에서 CSS를 적용할 태그 내에 입력하기. 가장 기본적인 방법이다. 태그에 style어트리뷰트의 값으로 원하는 css값을 입력한다. 빨간 테두리가 있는 박스를 만들고싶다! 적용할 css정보가 많지 않은 경우 사용하면 좋은 방법이다. 적용해야 하는 css정보가 많으면 코드가 지저분해지고 재사용이 불가능하다는 단점이 있다. 2. HTML 문서 안에서 태그 내에 입력하기 그 다음 방법은 태그를 이용하는 방법이다. 보통 빨간 테두리가 있는 박스.. 더보기