시리즈

Learning CSS

1.요소, 클래스, 선택자(Type, Class&ID Selector)

css는 크게 이런 구조로 이루어져있다. selector의 종류는 크게 세 종류로 나누어진다. Type selector =html 태그 셀렉터, html의 태그들을 직접 지칭한다. ex) h1, p, blockquote, div 등 Class selecto

2021년 2월 16일

2.자식, 자손, 형제 선택자

자식 선택자(child combinator) : parent > child자손 선택자(descendant combinator):parent descendants (중간 공백)형제 선택자 (sibling combinators): parent + sibling / pare

2021년 2월 16일

3.구조적 가상 클래스 선택자

structural pseudo(가상의)-classes구조적 가상 클래스 선택자ex)여러 li 요소중 첫번째만 선택됨2\. last-child:마지막 요소.여러 li 요소중 마지막만 선택됨(더 추가를 해도 항상 맨 마지막만 선택됨)3\. nth-child: n번째 요소

2021년 2월 17일

4.동적 가상 클래스 선택자

user action pseudo-classes동적 가상 클래스 선택자유저와의 인터렉션이 필요한 부분에서 자주 사용하는 선택자들.어떤 상태나 조건을 만족했을때,유저의 액션에 따른 상태변화에 따라 조정되는 선택자이다요소에 마우스를 갖다댔을 때의 상태를 나타냄.ex)a태그

2021년 2월 17일

5.Box Model / Sizing

html 내의 모든 요소들은 결국 css에서 박스로 표현된다.content: 가로는 width, 세로는 height로 표현padding: 안쪽 여백, 즉 content와 border 사이의 공간을 나타내는것border: 테두리굵기/스타일/색상을 알려줘야 함 - bord

2021년 2월 18일

6.Display - Block

block : 길막! 차단 block type의 요소를 따로 선언하지 않은경우, 기본으로 width는 부모 content-box의 100%차지. 만약 따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채워버린다! 따라서 다른 요소들이 남은 공간을 차

2021년 2월 20일

7.Display-Inline/ Inline-Block

Inline: 옆으로 쭈르륵 흐르는 성질, 라인 속에 있는다block과 정반대의 행동패턴 !!Inline인 block의 부모 요소가 갖는 영역이 충분하지 않아 들어가기 모자란 상황일때, 줄바꿈처럼 그 밑에 다시 라인을 만든다. (사진참고 김버그의 HTML&CSS

2021년 2월 20일

8.Float

float - block요소들을 가로배치 할때 사용한다.float를 사용하면 어떤 일들이 일어나는가?그것으로 인해 망가진 레이아웃을 어떻게 수정하는가?float: 뭔가 떠다닌다는 의미어떤 요소가 float가 된다면 부모가 이를 집나간 자식마냥 여기게 된다. block에

2021년 3월 1일

9.Position

Positions - static / relative / absolute / fixed내가 사용하는 positions의 Type과 기준점에 유의해야한다!static: 모든 요소 기본 포지션 값. 가장 일반적 상태relative: 이동 기준점이 본인이 원래 있던 곳. f