CSS4 [CSS] float 속성 float 라는 단어는 "뜨다" 라는 의미 입니다. 원래 웹페이지에서 이미지를 어떻게 띄워서 택스트와 함깨 배치할 것인가에 대한 속성입니다. 이말은 즉슨 신문기사 같은 사이트에 많이 사용 한다는 예시 입니다. global menu left menu article comment 아래의 결과 입니다. 해당 결과 값이 이해가 되신다면 넘어 가시면 됩니다. 2020. 6. 23. [CSS] display 속성 block 속성 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지 합니다. span1 span2 span3 span { background-color: #888888; display: block; } #name { background-color: #aa4477; width: 100px; height: 100px; } 보시다 시피 다들 한따까리식 하고 있습니다. 무서운 속성이네요 ㄷㄷ Inline 속성 새로운 라인에서 시작 하지 않으면 다른 요소들과 같은 줄에 배치될 수 있고 content의 너비만큼의 영역을 차지 합니다. one two three li { display: inline; } li는 월레 디폴드 값이 block인 태그입니다. display:inline을 안쓰면 on.. 2020. 6. 23. [CSS] Position 속성 Position 속성은 5개의 값을 갖습니다. 1. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다. 2. absolute & relative : relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때 relative 컨테이너를 기준으로 잡게 됩니다. 컨테이너 absolute 박스 absolute 박스가 ralative 속성 안에 있음으로 기준은 relative기준이 됩니다. 4. fixed : 스크롤고 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다. 주로 네비개이션 바를 만들때는 바닥글 부분을 작업할떄 많이 사용합니다. 5. inherit : 부모 태그의 속성값을 상속 받습니다. 2020. 6. 23. [CSS] Grid heropy.blog/2019/08/17/css-grid/ CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ... heropy.blog 2020. 5. 16. 이전 1 다음
