프로그래밍 첫걸음 시작하기 : 프로그래밍 기초 - 3주차

<프롤로그>
3주차는 CSS를 통해 HTML 요소에 디자인하는 방법을 배웠다.
그래서 이번 주 실습 과제는 HTML을 통해 요소를 만들고 CSS로 디자인까지 직접 해봤다.

따라서, 이번 주 포스팅은 3주차 실습을 하면서 HTML과 CSS 두 가지에 대해 몰랐던 부분, 헤멘 부분에 대해 쓸 것이다.

<시작>
① HTML 파트

1. id와 class의 차이

• id
  : 요소(콘텐츠)를 한 가지만 지정할 때 사용한다.
  단, 하나의 문서에는 하나의 고유한 id만 사용 가능하다.

  <input id="input-name"/>
   <label for="input-name">이름</label>
   ==> "input-name" 이라는 id를 지정했다면 이 id는 다른 곳에서 중복 사용이 불가

• class
  : 요소(콘텐츠)를 그룹으로 묶어서 지정할 때 사용한다.

       <aside class="aside">
         <div class="div-class"></div>
         <ul>
           <li class="on"></li>
           <li></li>
         </ul>
         <ul>
           <li></li>
           <li></li>
           <li></li>
         </ul>
       </aside>
  ==> "aside"로 지정된 <asdie>는 <aside> ~ </aside>까지
      하나의 "aside" 그룹으로 묶어서 지정한 것이다.

2. aside 태그
   : 페이지의 다른 콘텐츠들과 연관성을 가지고 있으나, 그 콘텐츠들과 분리하기 위해 사용한다.
   즉, 'aside' 태그는 어떠한 주 콘텐츠에 대한 '부가 설명' 또는 '부가 항목' 같은 부가적인 역할을 해준다.
   이를 사용할 때에는 반드시 메인 콘텐츠나 어떠한 콘텐츠와 연관성이 있어야 함을 주의해야 한다.

3. article 태그
   : 독립적이고 자체적인 콘텐츠를 지정할 때 사용한다.
   즉, aside와는 다르게 A라는 주제에 대한 개인의 독자적인 게시물 같은 것을 말할 수 있다.

• article 태그를 요소를 사용할 수 있는 위치의 예

  포럼 게시물, 블로그 게시물, 사용자 의견, 제품 카드, 신문 기사들

4. 이번 실습에서 2시간을 헤메게 한 치명적 실수

• 별 것 아닌데 이런 실수를 하는 바람에 아주 생고생을 했지...

  <div class="dsec"></div> <== </div> 를 하나 삭제해야됨
  안녕하세요.
  </div>

---

② CSS

1. box-shadow 태그 에서 그림자가 나오게 하려면?

• '/(슬래시)' 없으면 그림자 효과가 들어가지 않는다.

  box-shadow: 0 0 6px rgb(0 0 0 / 50%);

2. hover 태그
   : 'hover' 태그는 포인터를 어떠한 요소에 올렸을 때 상호작용 중이라는 것을 보여주기 위해 그 요소에 특정 효과를 넣어주는 역할을 하는데, 다양한 효과들이 있다.

• 효과 종류를 몇 개만 적어보자

a:hover { opacity: 0.67; } /* 투명도 */
a:hover { background-color: red; } /* 뒤쪽 배경색 */
a:hover { transition : 2s; } /* 효과가 변하는 데 까지 시간 지정 */
a:hover { transform: scale(2); } /* 상호작용 시 박스의 크기 변화 */
a:hover { font-size : 10px; } /* 상호작용 시 글씨의 크기 변화 */

3. padding 과 margin 의 차이

• padding
  : object 내의 내부 여백 설정

• margin
  : object와 화면과의 외부 여백 설정

4. cursor 태그
   : 특정 요소에 마우스를 올리거나 할 때 표시될 마우스 커서 모양 설정

5. height의 종류

• line-height
  : 행간 높이 조정
• max-height
  : 요소의 최대 행간 높이를 조정하며, height 속성의 사용값이 자신의 값보다 커지는걸 방지
• min-height
  : 요소의 최소 행간 높이를 조정하며, height 속성의 사용값이 자신의 값보다 작아지는걸 방지

6. background-repeat
   : 배경 이미지의 반복 방법을 지정.
   가로축 및 세로축을 따라 반복적(연속적)으로 출력되게 하거나,
   아예 반복적(연속적)으로 출력되지 않게 할 수도 있다.

7. CSS를 통해 이미지를 불러오거나 삽입하는 방법 (background-image: url)

• HTML과 CSS를 하면서 실습에서 제시된 태그는 개인 PC 환경이나 자료를 저장한 경로에 따라 이미지의 경로 지정이 다 다르다는 걸 지난 주에 확인한 바가 있다.
  근데 CSS에서 HTML과 비슷하게 방법을 시도해봐도 해결되지 않아서 이미지 삽입에서 다시 한 번 헤메게 되었다.
  그럼 어떻게 해결했는지 아래에 간단하게 적어보자.

• CSS "background-image: url" 에서 () 안에 인터넷 주소 외에 컴퓨터에 저장된 이미지를 불러오는 방법

1. () 안에 /을 입력해서 나타나는 경로를 하나하나 클릭해서 지정
2. 이미지가 있는 폴더 뒤에 다른 폴더들이 여러 개 있는 경우, 상위 폴더를 하나 벗어날 때마다 점(.) 점(.) 슬래쉬(/) 를 사용
   ==> 쉬운 이해를 위해 내가 사용한 방법을 이미지로 참고해보자

• 내 파일 경로
  
• 경로 지정