CSS기초
UI
란UI
라고 부른다.UI
제작은 프론트엔드 개발자의 기본 소양UX
란UI
에서 나온다.CSS 스타일 적용 방법 3가지
<nav style="background: #eee; color: blue">...</nav>
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>
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 { } /* 인접 형제 셀렉터 */
내가 잘 모르는 것
CSS selector
퀴즈content-box
의 높이height
+ padding-top
+ padding-bottom
+border-top
+ border-bottom
오늘의 감정
오늘은 내가 css로 시각적 효과를 부여하는 첫 날이었다. 예제를 내가 원하는 색으로도 해보고 유튜브 홈페이지를 개발자 도구로 원하는 대로 바꿔도 보았다. CSS selector 부분은 헷갈리는 부분들이 있어서 복습으로 보충 해야겠다는 생각도 들었다. 예전에 혼자 독학할때 듣던 강의를 참고하여 보충할 예정이다. 내일 시간표를 보니 페어와 계산기 목업 만들기가 있다. 좋은 페어를 만나 순조롭게 진행했으면 좋겠다.