HTML&CSS -4

HTML

table
1. tr, th, td

• tr : table row 테이블의 행
• th : table header 테이블의 행, 열의 제목
• td : table data 셀 내용

2. caption

• 테이블의 제목이나 설명을 의미한다.
• 무조건 table의 첫번째 자식으로 사용해야한다.

3. thead, tbody, tfoot
   구역을 나누는 용도(필수 요소는 아니지만 코드의 가독성을 위해 사용하면 좋다.)

• thead : 테이블 행 블록 내 제목 열 그룹으로 구성할 경우 사용
• tbody : 행 블록 내 테이블 데이터로 구성할 때 사용
• tfoot : 행 블록 내 열 요약으로 구성할 때 사용

4. colspan, rowspan

• 셀병합 속성
• colspan: 열 병합
• rowspan: 행 병합

CSS

Cascading Style Sheets

스타일 적용될 때 우선순위를 가지고 적용 된다.

작성한 HTML을 꾸미는 역할을 한다.

CSS를 한번 작성하여 여러 HTML에 반복사용이 가능하다.

선택자(매우 중요)

예시

header {
	colol:royalblue;
    }

여기서 header가 선택자에 해당된다.

선택자에는 여러 종류가 있는데

1. 전체 선택자
   * {}
   말 그대로 문서 내 모든 요소 선택함

2. 타입(유형) 선택자
   h1 {}
   특정 태그를 선택함

3. 아이디 선택자
   #header {}
   해당 아이디를 가진 요소 선택
   ※HTML 페이지 내 id는 하나만 있어야 한다.

4. 클래스 선택자 (가장 보편적으로 사용함)
   .fc-red {}

5. 특성 선택자

[type="button"] {}
[class="button"] {}

주어진 특성을 가진 모든 요소 선택

6. 그룹 선택자

h1,
h2,
h3,
h4 {}

7. 복합 선택자

• 자손(하위) 선택자
  section p {}
  자식과 자손 모두 선택 가능

• 자식 선택자
  section > p {}
  직계 자식만 선택

• 일반 형제 선택자
  h1 ~ p {}
  같은 수준의 뒤에 따라오는 형제 선택

• 인접 형제 선택자
  h1 + p {}
  바로 뒤에 인접한 형제만 선택

8. 가상 클래스 선택자

• 가상 클래스

:link         <-- 방문하지 않은 링크
:visited      <-- 방문한 링크
:hover        <-- 마우스 커서를 올려 놨을 때
:active       <-- 마우스로 클릭했을 때
:focus        <-- 포커스 되었을 때

• 구조적 가상 선택자

:first-child  <-- 형제 요소 그룹 중 첫 번째 요소
:last-child   <-- 형제 요소 그룹 중 마지막 요소
:nth-child    <-- 형제 사이에서 순서에 따라 요소를 선택할 수 있다.
:not

CSS 적용

1. 인라인 방식
   각 태그에 style 속성으로 스타일 부여하는 방식

2. 내부 스타일 방식
   head 태그 내부에 style 태그를 사용하여 스타일을 부여하는 방식

3. 외부 스타일 방식(가장 권장되는 방식)
   link -> 현재 문서와 외부 리소스와의 관계 명시
   빈 태그로 속성만을 포함한다.
   css 작성 후 반복 사용이 가능하다.

CSS 상속

상속되는 속성 : 대표적으로 color 속성
상속되지 않는 속성 : width, height, margin, padding, border 등

display 속성

박스의 유형 결정 -> 시각적인 요소만 수정함.

1. display:block
   줄바꿈

2. display:inline
   줄바꿈안하는 inline 요소 생성

3. display:inline-block
   줄바꿈없이 한줄에 놓이지만 width, height, padding, margin 등 설정 가능

4. display:flex
   내부 자식 요소들을 부모 컨테이너 요소안에서 x,y측 단방향으로 설정 가능함.

CSS 단위

1. px
2. %
   부모요소를 기준
3. em
   부모요소로부터 상속받은 요소의 글자크기를 기준으로 한다.
4. rem
   최상의 요소(html)의 글자크기를 기준으로 한다.(기본 폰트사이즈 16px)
5. vw,vh
   뷰포트 넓이, 높이를 기준으로하는 백분율 단위
   1vw = 화면의 1%

CSS 박스 모델

--출처: 위니브--

element: 텍스트, 사진 등 보여줄 대상
padding: element 주변 영역을 감싼다
border: element와 padding 주변을 감싸는 테두리
margin: 테두리 바깥 영역을 감싼다.
--> 블록 박스에 해당 되며, 인라인 박스는 width, height, 상하 margin이 적용되지 않는다.

1. width

• max-content -> 최대로 늘릴 수 있는 만큼 가로로 배열
• min-content -> 최소로 줄일 수 있는 만큼 세로로 배열
• fit-content -> 브라우저 크기에 딱 맞춰서 배열

2. height

3. padding
   padding: 10px; 의 의미는
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   와 같다.

4. margin
   margin도 padding과 동일하게 단축된 속성이다.

5. 마진병합 현상

• 요소와 요소 사이에 마진 공간이 있을 경우 더 큰 값으로 적용함.
• 부모 요소와 자식 요소가 존재할 때 자식 요소의 마진 탑 or 마진 바텀은 부모의 마진에 영향을 미치지 않는다.

6. border

• 테두리를 지정한다.

border: 3px solid royalblue;

• 선의 두께, 스타일, 색상을 지정할 수 있다.

7. box-sizing

• content-box: width, height에 border와 padding이 포함되지않는다.
• border-box: width, height에 border와 padding이 포함된다.

8. overflow, overflow-x, overflow-y
   박스보다 콘텐츠가 더 클 경우 어떻게 처리할 것인가?

• visible(기본값) : 컨텐츠 넘어가도 자르지 않는다.
• hidden : 컨텐츠가 박스를 넘어갈 경우 자른다.
• scroll : 요소의 크기만큼 자르고 스크롤 제공
• auto : 자동으로 박스의 사이즈에 따라 스크롤을 제공

9. border-radius
   상자의 모서리를 둥글게 처리한다.

10. background

• color : 배경색상
• image : 배경이미지
• position : 배경 위치
• repeat
  - repeat : 반복
  - no-repeat : 반복 X
  - repeat-x : x축으로만 반복
  - repeat-y : y축으로만 반복
• size
  - contain : 화면에 맞춤
  - cover : 찌그러지지않는 한도에서 제일 크게