Block vs Inline

• 대부분의 요소들은 블록 요소이며, 블록요소는 바로 옆에 다른 요소를 붙일 수 없습니다.
• 인라인 요소들은 바로 옆에 다른 요소를 붙일 수 있습니다.
  • span태그, img태그, a태그 등...
• inline 성질을 갖도록 하는 CSS 속성은 display 와 float 이 있으며, block 성질을 갖게하는 block이 있습니다.
  • display: inline-block; // 인라인 성질로 변경
  • float: left; // 인라인 성질로 변경하고 왼쪽으로 붙임
  • display: block; //블록 성질로 변경

display: none;

• none 속성값을 주면 화면에 보이지 않게됩니다. 있지만 안보이는 상태가 되어 주로 검색창에서 검색을 하면 하단에 보이는 연관검색처럼 보이도록 활용할 수 있습니다.
• 많이 쓰이는 기법입니다.

Assignment

(index.html 22번째줄부터 코드를 작성해주세요.)

아래의 세 문장을 화면에 보여주려고 합니다.

1. 클래스와 ID들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다.
2. 클래스는 어떠한 수의 요소에도 적용할 수 있다.
3. ID는 하나의 요소에만 적용할 수 있다.

Assignment #1

• "다." 에서 문장이 끝난 후 모두 새로운 줄에서 시작할 수 있도록 적절한 태그를 사용해주세요.
• 🚨 <br> 태그를 사용해 줄바꿈하는 것이 아닙니다.

  <p>클래스와 ID들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다.</p>
  <p>클래스는 어떠한 수의 요소에도 적용할 수 있다.</p>
  <p>ID는 하나의 요소에만 적용할 수 있다.</p>

Assignment #2

• 영어인 "ID"만 빨간색으로 보이도록 적절한 태그와 css로 꾸며주세요.

• 🚨 위 세 문장에서 ID는 두 번 들어가 있습니다. 두 번의 경우 모두 텍스트 색이 빨간색으로 나타나도록 구현해주세요.

  html파일

  <p>클래스와 <span>ID</span>들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다.</p>
  <p>클래스는 어떠한 수의 요소에도 적용할 수 있다.</p>
  <p><span>ID</span>는 하나의 요소에만 적용할 수 있다.</p>

  css파일

   p span {
    color: red;
  }