이틀전 시작한 교육을 오늘부터 듣게 되었다.
백엔드 과정이지만 프로젝트를 하려면 프론트엔드도 알아야 하기 때문에, HTML이랑 CSS을 배우고 있었다.
그리고 내가 기록하는 습관이 부족한 것을 인지하고 있었는데, 그 날 배운 내용을 복습한 것을 인증하는 스터디를 모집하고 있어서 거기에 참여하게 되었다.
<caption>
: 테이블 설명, 여러 요소 삽입 가능, 생략가능<tr>
: 가로행 생성<th>
: 제목, scope라는 속성의 값으로 방향지정 (row | col)<td>
: 내용inline 스타일
<p style="color:red; background-color:yellow;">Hello wold!</p>
내부 스타일
<style>
p {
color:red;
background-color:yellow;
}
</style>
외부 스타일
<link rel="stylesheet" href="style.css">
따로 작성 https://velog.io/@itissteam/CSS-selector
대표적인 display 속성
block
: 요소 기준으로 앞뒤로 줄바꿈이 되어서 한줄을 차지한다.inline
: 요소 전후에 줄 바꿈을 생성하지 않다. 그리고 inline 요소는 width, height, 상하 margin 값이 적용되지 않는다.inline-block
: inline처럼 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다.none
: 레이아웃에 영향을 미치지 않도록 요소의 표시를 해제한다.(문서는 요소가 존재하지 않은 것처럼 렌더링된다)flex
: 요소는 블록요소처럼 동작하며 플렉스박스 모델에 따라 내용을 배치한다.grid
: 요소는 블록요소처럼 동작하며 그리드 모델에 따라 내용을 배치한다.CSS Box Model은 HTML 요소를 감싸는 상자이다.
요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 margin 값이 적용되는 현상
content-box
: 기본값. width, height에 border, padding 포함하지 않음.border-box
: width, height에 border, padding 포함.visible
: 기본값. 박스를 넘는 컨텐츠를 자르지 않는다.hidden
: 요소의 크기만큼 맞추기 위해 잘라내기. 스크롤바 Xscroll
: 요소의 크기만큼 잘라내고, 스크롤 Oauto
: 콘텐츠가 넘칠 경우 스크롤바 표시모든 출처 : 위니브
오늘의 과제로 css 선택자를 활용한 간단한 게임과 테스트를 다 하고 인증하였다.
선택자의 종류가 이렇게 많을 지 몰랐고, 공통된 규칙을 찾아 간단하게 표현하는 것이 어려웠다. 조금만 더 연습하면 잘 할 수 있을 것같다는 생각이 들긴했다.
flukeout 게임에서 only라는 키워드가 들어간 선택자를 활용하는 문제였는데 어떻게 해야할지 난감했다. 화면에 힌트가 적혀있었는데 나는 영어 까막눈이라 그걸 모르고 있다가 다른 문제를 풀면서 힌트가 있었다는 것을 알게되었다. 힌트는 only가 단 하나의 요소만 있는 것을 선택하는 선택자라고 했고 정답을 맞추게 되었다. 영어도 틈틈히 더 공부해야겠다는 생각이 들었다.