개발을 하고 확인할 수 있는 도구

크롬 사용하는 이유 : 점유율 높음,자료 방대

Elements 패널의 기능은?

• 해당 웹페이지를 구성하는 구성요소들( HTML, CSS 등) 가 표시되는 곳
• 어떤 스타일 속성들이 입혀 있는지 레이아웃을 볼 수 있음
• UI를 즉시 수정하고 확인 가능
• elements요소 하나하나 확인 가능

몇개의 section ?

• 5개

  

Instagrm 피드의 가로 길이

• 기본 (736px이상) ⇒ 감싸는 article기준(box-sizing:border-box; 적용인데 border가 1px 있어서) : 616px, div기준 : 614px

  

  

• max-width: 735px ⇒ 602px, 600px

  

  

• max-width: 640px 이하 ⇒ 600px (border없어져서 동일)

  ⇒ 600px 이하는 디바이스 사이즈에 맞게

  

Style 부분의 순서가 의미하는 것은?

• HTML이 실행되었을 때 가장 먼저 적용되는 순서대로 배치.
• Cascading에 따라 CSS의 위에서 아래로 적용 (위에서부터 우선순위가 높음)
  • 우선순위 : inline style > id > class > tag
  • 구체적 >>> 포괄적
• 중복 적용되는 경우 적용되지 않은 속성으로 Style부분에 밑줄이 그어짐