Develop/HTML & CSS

LEVEL 21 : 짝수 자리의 그릇만을 선택 HTML CSS plate:nth-of-type(even) { } LEVEL 22 : 2n + 3 자리의 그릇을 선택 HTML CSS :nth-of-type(2n+3){ } LEVEL 23 : 중간에 있는 사과만을 선택 HTML CSS plate .small:only-of-type { ] LEVEL 24 : 작은 오렌지와 사과 중 마지막에 있는 것만을 고르시오. HTML

2021. 4. 9.

Develop/HTML & CSS

LEVEL 11 : 플레이트 위에 있는 모든 것을 선택 HTML CSS plate *{ } LEVEL 12 : 플레이트 옆에 있는 사과를 선택 HTML CSS plate + apple{ } LEVEL 13 : 벤토와 플레이트(접시) 사이에 있는 피클을 선택 HTML CSS bento ~ pickle { } LEVEL 14 : 플레이트 위에 있는 사과만을 선택 HTML CSS plate > apple { } LEVEL 15 : 맨 위에 있는 오렌지만 선택 HTM CSS orange:first-child { } LEVEL 16 : 접시 위에 있는 토마토와 피클만 선택 HTML CSS plate :only-child { } LEVEL 17 : 작은 사과와 피클만 선택 HTML CSS .small:last-ch..

2021. 4. 9.

Develop/HTML & CSS

series 2편 : kimbangg.tistory.com/99 [CSS] CSS Diner 해설 (2) LEVEL 11 : 플레이트 위에 있는 모든 것을 선택 HTML CSS plate *{ } LEVEL 12 : 플레이트 옆에 있는 사과를 선택 HTML CSS plate + apple{ } LEVEL 13 : 벤토와 플레이트(접시) 사이에 있는 피클을 선택 HTML.. kimbangg.tistory.com 3편 : kimbangg.tistory.com/100 [CSS] CSS Diner (3) - 마무리 LEVEL 21 : 짝수 자리의 그릇만을 선택 HTML CSS plate:nth-of-type(even) { } LEVEL 22 : 2n + 3 자리의 그릇을 선택 HTML CSS :nth-of-ty..

2021. 4. 9.

Develop/HTML & CSS

아무런 의미없이 콘텐츠의 영역을 구분 할 때 사용이 된다. 페이지 내에서 독립적인 기능을 수행한다. 해당 부분을 떼어서 다른 곳에 두어도 본 기능을 올바르게 수행 할 수 있을 때 article을 사용해준다. 예시) 배너 / 위젯 etc. body 내부에는 1개 이상의 section이 있어야한다. section은 독립체로 있지 않고, 하나의 팀과 같은 역할을 수행한다. 내용에는 Heading ( = ) 가 포함 되어야 한다. Title this is a paragraph>

2021. 3. 26.

Develop/HTML & CSS

공통점 id와 class 태그는 모두 특정 요소에 스타일을 입히기 위해 사용됩니다. 차이점 1. ID 유일한 즉 하나의 요소에만 스타일을 주기 위해 사용합니다. ID는 #{name} 을 통해서 style을 줄 수 있습니다. 2. Class 다수의, 반복되는 요소에 스타일을 주기 위해 사용합니다. Class는 .{name} 을 통해 style을 줄 수 있습니다. ID vs Class

2021. 3. 26.