Front-end/CSS

Front-end/CSS

[CSS] 레이아웃 구성 position에 대해서

position : CSS에서 position 속성은 요소의 위치를 설정할 수 있습니다. ex) { position : absolute; top: 20px; left : 50px; } : 부모태그의 위쪽에서 20px, 왼쪽에서 50px 떨어진 위치에 배치 static (기본값) : 흐름에 따라 배치 relative : 일반적인 흐름에 따라 배치 top, right, bottom, left 속성을 사용하여 요소의 위치 이동 absolute : 일반적인 흐름을 제거, 부모 요소의 위치를 기준으로 배치 - 상위 태그를 기준으로 위치를 정함 - absolute 값이 적용된 태그는 독립이 됨 - 만약 모든 태그가 absolute값을 가진다면 전체 문서의 높이값은 0이 됨 fixed : 화면 특정 위치에 고정 in..

Front-end/CSS

[CSS] 레이아웃을 구성하는 CSS 박스 모델

박스 모델 margint border padding contents ex) 회색박스 를 기준으로 padding과 아래쪽 margin .ga{ padding: 50px; background-color:darkgrey; margin-bottom: 50px; }

Front-end/CSS

[CSS] CSS 선택자 (Selector)

전체 선택자 *{ } 타입 선택자 태그명{ } class 선택자 .클래스명{ } id 선택자 #id명{ } ** id값은 하나만 존재해야함 그룹 선택자 태그, 태그{ } 하위 선택자 .box div : box 안에 모든 요소를 선택 자식 선택자 .box > div : box의 자식 div들 선택 (div의 자식들은 선택X) 형제 선택자 h1 ~ p { } : h1 다음에 오는 모든 p 선택 인접 형제 선택자 h1 + p { } : h1 다음에 오는 첫번째 p 선택 태그 관계 부모태그: 바로 윗단의 태그 자식태그: 부모태그 바로 아랫단에 있는 태그들 형제관계: 같은 부모 태그를 둔 태그

Front-end/CSS

[CSS] 스타일 적용하는 방법 3가지

인라인 스타일 style="속성:속성 값;" 내부 스타일 시트 안에 태그 이용 외부 스타일 시트 : 외부 css파일을 만들어서 연결 스타일 우선 순위 !import > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일

eunjin-park
'Front-end/CSS' 카테고리의 글 목록 (7 Page)