$$config title: 웹 1, 신우주 keywords: - website - codepen $$ # HTML, CSS 강좌 # 2022-05-14, 1일차
## HTML, CSS, JS의 역할 - **웹페이지** = HTML + CSS + JS - **HTML** : 문서의 **내용** - **CSS** : 문서의 **꾸밈** ^{디자인 관련} - **JS** : 인터렉션 ^{(무언가를 클릭했을 때 뜨는 **효과**)} ---
## HTML 태그 #### 의미 - 웹문서에 출력되는 것 - 웹문서에서 대상이 되는 부분에 글자의 특성을 변경할 때 --- #### HTML 태그 사용법 ``` <태그> 태크 대상< /태그> ``` --- #### 태그의 종류 ↓ ↓ ↓ ```

글자 속성 태그

- <h> 태그 - 대소문자 구분 X (<h>와 <H> 차이 X) - <b> 태그 - <b>태그는 Bold의 약자로 글씨를 굵게 만든다. - <i> 태그 - <i>태그는 italic의 약자로, 글씨를 기울임. ```
```

자주 사용하는 태그

- div - division의 약자 - 웹사이트의 레이아웃을 만들 때 주로 사용 - section - HTML 문서에 포함된 독립적인 구역을 정의할 때 사용 - 주로 제목 요소(h1~h6)를 자식 요소로 포함 - nav - 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용 - <nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있음. - article - 해당 문서, 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용 - 블로그 포스트, 보도 기사 등 ``` ---
## CSS 속성 - color : (색상) - 글씨의 색상 설정 ㅤ - font-size : (~px/~rem) - 글자의 크기 설정 - rem : 기본 크기의 몇배 `ex) 3rem : 기본 크기의 3배`
- background-color : (색상) - 글자의 배경색 설정
- width : (~px/~rem) - 글씨의 배경 너비 설정
- height : (~px/~rem) - 글씨의 배경 높이 설정 ---
## block, inline-block의 특징 - block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 세로, 한줄에 무조건 1개씩
- inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다 - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다 - 배열방향 : 가로, 한줄에 최대한 많이
$$ codepen https://codepen.io/tlsdntjr1121/embed/preview/zYRNpMy?default-tab=css%2Cresult&editable=true&theme-id=dark $$ --- ## CSS, 글자 꾸미기 #### 글자의 두께 조절 - font-weight : normal; - 글자의 굵기를 기본으로 설정. - font-weight : bold; - 글자의 굵기를 굵게 설정. --- #### 자간 조절 - letter-spacing : (~px/~rem) - 글자 사이의 간격을 현재보다 ~px/~rem만큼 더한다. --- #### rgba 함수 - rgba(red(0~255),green(0~255),blue(0~255), 불투명도(0~1)) - google에서 color picker 검색, rgb 값 구하기 가능. ---

# 2022-05-15, 2일차 ## HTML 테이블 (시간표 만들기) #### 표의 굵기 설정 - <table border = "1"> - 표의 굵기를 1로 지정. --- #### 테이블을 만드는 태그들 - <th> - table head의 약자 - 표의 제목을 담당 - 기본값 : 굵은 글씨체, 중앙 정렬 - ex) 요일, 교시 ... 등
- <tr> - table row의 약자 - 가로줄을 만드는 역할 - 기본값 : 기본 글씨체, 왼쪽 정렬
- <td> - **table data**의 약자 - 셀을 만드는 역할 - 기본값 : **기본 글씨체**, **왼쪽 정렬**
--- #### 시간표 만들기 $$ codepen https://codepen.io/tlsdntjr1121/embed/preview/bGLWGLz?default-tab=html%2Cresult&editable=true&theme-id=dark $$
--- #### 테이블의 테두리 설정 - **표 테두리/셀 테두리 사이의 간격 조절** - **border-collapse : collapse** - 테두리 사이의 **간격을 없앰** - **겹치는 부분**은 **한 줄**로 나타냄.
- **border-collapse : separate** - 테두리 사이에 **간격을 둔다.** - 속성 값이 **separate 일 때**, 간격의 크기는 **border-spacing 속성으로 설정** --- ## <a>, <br> 태그 - <a> - 하이퍼링크를 걸어주는 태그 - 사용법 : <a target="_blank" href="http://www.naver.com >네이버</a> - 속성 - href : 클릭 시 이동할 링크 - target : 링크를 여는 방법 - _self : 현재 페이지 (기본값) - _blank : 새 탭 --- ## CSS 자손선택자, 후손선택자 - 자손선택자 - 형태 : **선택자 A > 선택자 B** - 의미 : **선택자 A의 자손에 위치하는 선택자 B**를 선택 (선택자 A 안에 있기만 하면 됨) ※ 자손(자식)과 후손은 다른 개념임을 유의하기
- 후손선택자 - 형태 : **선택자A 선택자B** - 의미 : **선택자 A의 후손에 위치하는 선택자 B**를 선택 --- ## 텍스트 정렬, text-align - 사용법 : text-align:(위치) ^{ex) text-align:center} - 특징 - **block 요소에만 적용 가능**하다. - 정렬되는 것은 **block 요소 안에 있는 inline 요소만 가능하다.** - 2번에서 inline 요소란 text뿐만 아니라 **이미지 등도 포함.** --- ## :hover - html에서 요소에 **마우스를 올렸을 때 반응**하게 하는 css요소 - 사용법 : (태그명):hover { 속성 } $$ codepen https://codepen.io/tlsdntjr1121/embed/preview/vYdZoPQ?default-tab=css%2Cresult&editable=true&theme-id=dark $$ ---
# 2022-05-21, 3일차 ## 스페이스바가 아닌 또 다른 여백,   - html은 여러 개의 공백도 하나의 공백으로 인정함. - **여러 칸을 띄워줘야할 때 사용** --- ## 줄로 텍스트를 꾸미는, text-decoration - 사용법 : text-decoration : (속성값) - 속성 - **none : 선을 만들지 않음.** - line-through : 글자 중간에 선을 만듦 - overline : 글자 위에 선을 만듦 - underline : 글자 아래에 선을 만듦