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