SEB_FE_39 회고 6일차

CSS기초

1. UI란
   • 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부른다.
   • 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양
2. UX란
   • 사용자 경험
   • 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다.

CSS 스타일 적용 방법 3가지

1. 인라인 스타일

<nav style="background: #eee; color: blue">...</nav>

2. id 와 class 등을 이용한 방법

#navigation-title {
  color: red;
}
<h4 id="navigation-title">This is the navigation section.</h4>



.menu-item {
  text-decoration: underline;
}

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

3. index.html 파일에 새로운 link 요소를 추가

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />

CSS Selector

* { }  /* 전체 셀렉터 */

h1 { }  /* 태그 셀렉터 (같은 태그명을 가진 모든 요소를 선택)*/
div { } 
section, h1 { } /* 복수 선택 가능 */

#id { } /* ID셀렉터 */
.class { } /* class 셀렉터 */

header > p { } /* 자식 셀렉터 */
header p { } /* 후손 셀렉터 */

section ~ p { } /* 형제 셀렉터 */
section + p { } /* 인접 형제 셀렉터 */

내가 잘 모르는 것

1. Chapter3-2 CSS selector 퀴즈
   • 주말을 이용하여 여러번 연습을 통해 다 맞기
   • vscode를 이용해 실습해보기
2. 종합퀴즈 9번
   • content-box의 높이
     height + padding-top + padding-bottom +
     border-top + border-bottom

오늘의 감정

오늘은 내가 css로 시각적 효과를 부여하는 첫 날이었다. 예제를 내가 원하는 색으로도 해보고 유튜브 홈페이지를 개발자 도구로 원하는 대로 바꿔도 보았다. CSS selector 부분은 헷갈리는 부분들이 있어서 복습으로 보충 해야겠다는 생각도 들었다. 예전에 혼자 독학할때 듣던 강의를 참고하여 보충할 예정이다. 내일 시간표를 보니 페어와 계산기 목업 만들기가 있다. 좋은 페어를 만나 순조롭게 진행했으면 좋겠다.