728x90 프론트엔드/CSS24 [CSS] position - static, relative, absolute, fixed CSS position - Static , Relative, Absolute, Fixed Static - position 기본 속성 (block 태그는 위아래 방향으로 쌓이고, inline 태그는 좌우로 쌓인다.) Relative - position의 위치 이동이 가능한 상태로 변경 (위치 이동은 되어지나, 기존 자신의 위치는 공백으로 남아있음) Absolute - position : static 이 아닌 조상 태그를 기준으로 위치 선정. (부모 태그 모두 static 상태라면, body 기준) Fixed - 특정 위치에 고정 (스크롤바에 영향을 받지 않는다) 샘플 예제 CSS 추가 및 수정 Static .items__item.blue { position : static;//position을 static.. 2021. 2. 10. [CSS] 부모의 속성을 따르는 inherit CSS 부모의 속성 값을 상속 받는 Inherit CSS에서 inherit이라는 속성이 있는데, inherit 속성은 단어 뜻 그대로 부모 태그의 해당 속성의 값을 그대로 상속을 받는다는 의미이다. 샘플 예제 ↓ [html] CSS Example : inherit [출력 결과] 출력 결과를 보면, #first-parent, #second-parent, #third-parent, #baby-tag 높이와 너비가 각기 다르다. 여기서, #baby-tag의 height 를 inherit으로 바꾸어보면 다음과 같은 결과가 나온다. [#baby-tag height를 60px -> inherit으로 수정] 사이즈는 부모의 속성값 상속이 가능한데, 그렇다면 컬러나 다른 속성 또한 상속이 가능한가? #baby-tag의.. 2021. 2. 10. [Css] css의 로드 style, link, import CSS의 로드 style link import HTML 문서 작성시 각 태그의 디자인은 CSS를 Html 문서 내에 로드하여 입맛에 맞게 꾸밀수 있는데 이를 위해서 자주 쓰는 방법 3가지가 있다. 1. head 태그 내 style 추가 2. head 태그 내 link 추가 3. .Css 파일 내 import url 추가 샘플 예제 ↓ 1. Head 태그 내 Style 추가 [html : example.html] CSS 예제 : Style의 추가 # 제목 내용 조회수 1 제목 1 내용 1 20 2 제목 2 내용 2 33 3 제목 3 내용 3 13 2. head 태그 내 link 추가 가장 보편적으로 사용하는 방법으로, link 태그는 href라는 속성을 통해 css파일에 접근하는 역할을 하는데, 예제 1번.. 2021. 2. 10. [CSS] 선택자 Selector - CSS Selectors (선택자) Css에서 각 노드에 효과를 주기 위해 노드를 선택해야 하는데, 노드의 선택은 아래와 같은 선택자를 통해 가능하다. [선택자 (Selectors)] Basic Selectors Type Selectors 엘리먼트 명 Class Selectors .클래스명 Id Selectors #아이디명 Attribute Selectors [속성명=속성값] Combinators Decendent Selectors 부모노드 자식노드 Child Selector 부모노드 > 자식노드 Adjacent Sibling Selector 형제노드 + 형제노드 General Sibling Selector 형제노드 ~ 형제노드 [개념 설명] 1. Type Selectors 엘리먼트 이름으로 대상을 선택.. 2021. 2. 9. 이전 1 2 3 다음 728x90
