Document

$$config title: 웹 코딩 기초 취합 페이지 keywords: - IT - ... $$ 웹 코딩 기초 취합 페이지 ## HTML ```html 시각적인 요소 ```
## CSS ```css 시각적인 요소 예쁘게 꾸미기 ```
## JS ``` html 클릭에 관련된 모든 작업 ```
## 코드펜 셋팅법 ```html Editor Options > Autocomplete 체크 Syntax Highlighting > High Contrast Light Fonts > Hack, 16 Autocomplete : 활성화 Emmet : 활성화 ```
## VSCODE ```html [실무 → vscode] 수업 → 코드펜 모작 → vscode ```
## GIT ```html [웹4에서 진행] 코드 관리 사이트 개발자 협업 도메인 없이 사이트 호스팅 ```
## 단축키 ```html 마우스 사용 최소화 → 작업 속도 향상을 위해 필수 단축기는 노트북마다 다를 수 있습니다 Home → 앞줄로 End → 뒷줄로 Ctrl + Home → 최상단 Ctrl + End → 최하단 Ctrl + C → 선택영역 복사 Ctrl + X → 선택영역 잘가내기 Ctrl + V → 붙여넣기 Ctrl + A → 전체선택 Ctrl + Z → 이전 히스토리로 한 단계 이동 Ctrl + Y → 이후 히스토리로 한 단계 이동 Shift + 키보드 이동 → 글 선택 Ctrl + W → 탭 닫기 Ctrl + F → 단어 찾기 Ctrl + 1~8 → 탭 이동 Ctrl + 0 → 페이지 크기 100% Ctrl+Tab → 다음 탭 이동 Ctrl+PgUp → 이전 탭 이동 Ctrl+PgDn → 다음 탭 이동 Ctrl + Shift + T → 닫은 페이지 복구 trl + Shift + N → 시크릿 창 열기 Win + 방향키 → 화면 크기 조절 Alt + Tap → 새 탭 열기 f6 → 주소 창 전체선택 f5 → 페이지 새로고침 ins → 뒷 글자 지워질때 윈도우 + Shift + S : 캡쳐 윈도우 + Tab : 현재 작업중인 프로그램들 다 보기(윈도우창들 제어가능) ```
## 새 탭 열기 단축키 ```html Ctrl + T ```
## 탭 닫기 ```html Ctrl + W ```
## 뒷 글자 삭제될때 원상복구 ```html ins ```
## 새 탭 열기 단축키 ```html Ctrl + T → 새 탭 열기 ```
## tab 안먹을때 ```html 문장 삭제 후 다시 작성, 오른쪽에 여백이 없어야함. ```
## 커서 여러개 생성 ```html 1.ctrl + 클릭 2.해제방법 → ESC ```
## 주소 선택 단축키 ```html F6 ```
## 해상도 - 해상도 통계 확인 사이트 : [gs.statcounter](https://gs.statcounter.com/) ```html 눈 앞에 보이는 실물 모니터 사이즈 ```
## 그리드 ```html 웹디자인 규격 ``` ![원본이미지](https://i.postimg.cc/Cxp6zJWp/Group-1.jpg)
## 그리드 기초 - 그리드 용어 - Gutter : 여백 - Margin : 양 옆 공간 - Column : 거터와 마진을 제외한 공간 - Columns : Column 수 - 모바일 - 대표 사이즈: 360 - 사용 그리드 : 360px, 412px - 세로 사이즈 : 유동적 - Column : 4 - Gutter : 8 - Margin : 16 - 작은 태블릿 - 대표 사이즈 : 768 - 사용 그리드 : 768px - 세로 사이즈 : 유동적 - Column : 8 - Gutter : 16 - Margin : 24 - 큰 태블릿 : 1024 - 대표 그리드 : 1080px, 1224px, 1320px - 세로 사이즈 : 유동적 - Column : 12 - Gutter : 20 or 30 or 40 - Margin : 10 or 15 or 20 - PC : 1440px - 대표 사이즈 : 1920px - 사용 사이즈 : 1440px, 1920px - Column : 12 - Gutter : 40 - Margin : 20
## 1080그리드(4개 레이아웃 기준) ```html [계산법] 그리드 전체 사이즈 - 마진값 - 거터값 / 4 1080px - 20px - 60px / 4 = 250px ``` [예시] ![원본이미지](https://i.postimg.cc/28bP1zzt/image-1.jpg)
## 주석 ```html [주석 단축키] ctrl + / ``` ```html [html주석] ``` ```html [css주석] /**/ ``` ```html [JS주석] /**/ // ```
## 태그 - 김혜지 수업자료 : [태그 개념 코드펜 이동하기](https://codepen.io/kimhyeji324/pen/RwyerwW?editors=1000) ```html 열린태그 :

닫힌태그 :

열린태그 + 요소 + 닫힌태그 = 엘리먼트 ```
## 태그 생성 단축키 ```html 영문 + tab ```
## 상위엘리먼트와 하위엘리먼트를 부르는 명칭 - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/jangka44/pen/bQqbpZ?editors=1000)
- 김혜지 수업자료 : [코드펜 이동하기](https://codepen.io/kimhyeji324/pen/qByerLW?editors=1000) ```html 나를 감싸는 엘리먼트 : 부모 엘리먼트 내가 감싸는 엘리먼트 : 자식 엘리먼트 같은 부모를 둔 엘리먼트 : 형제 엘리먼트 조상엘리먼트 부모엘리먼트 자식엘리먼트 후손엘리먼트 형제엘리먼트 인접동생엘리먼트 ```
## css 작성방법과 컬러속성값 - 김혜지 수업자료 : [코드펜 이동하기](https://codepen.io/kimhyeji324/pen/GRBVmJE?editors=1100) ```html [css 작성방법] 태그 { 속성 : 속성값; } ``` ```html [컬러값으로 들어올 수 있는 속성값] 1. 색상이름 ex) red, green 2. rgba ex) rgba(255, 0, 0, 0.1) rgba(red, green, blue, 투명도) 투명도 : 0 ~ 1 10% : 0.1 50% : 0.5 100% : 1 rgba만 투명도를 조절할 수 있다. 3. hax ex)#ff0000 6자리가 같으면 3자리로 생략할 수 있다. ex) #000000 → #000 ```
## 태그가 화면에 표시되기 위해 필요한 3가지 ```html 1. 넓이 2. 높이 3. 배경색 ```
## DOCTYPE과 div와 display: block - 김혜지 수업자료 : [코드펜 이동하기](https://codepen.io/kimhyeji324/pen/GRBVmJE?editors=1100) ```html [DOCTYPE과 HTML] 1. html파일을 사용할때는 독타입(DOCTYPE) 선언해야한다. 2. codepen에는 독타입이 선언된 후 감춰져있다. 때문에 따로 선언하지 않아도된다. 3. html파일 내에서 최상위 엘리먼트는 html태그이다. 4. html태그 자식요소로는 body요소가 있다. 5. body크기는 화면 크기대로 작용한다. (화면 크기에 따라 자유자재로 변한다.) 6. 즉 우리는 눈에 보이지 않지만, html body안에 코드를 작성하고 있는것이다. ``` ```html [DOCTYPE 예시] Document ```
## 배경색 속성 ```html 배경색을 커스텀하는 속성 : background-color ```
## 넓이 높이 배경색 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/jangka44/pen/wvqxxZz?editors=1100)
## 높이속성 ```html [높이속성] 높이속성 ▶ height 사용 할 수 있는 단위 ▶px(고정형 단위), (%, vh, vw) 사용 할 수 있는 수치 ▶ auto, 0 ~ n ``` ```html [높이속성 기본값] 기본값 ▶auto ``` ```html [height: auto] 하위엘리먼트들 중 수치가 없다면 기본값인 auto는 0으로 작동한다. 하위엘리먼트들 중 수치가 있다면 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. 상위엘리먼트에 수치가 없어도, 있어도 기본값인 auto는 상위엘리먼트 수치를 상속받을 수 없다. ```
## 넓이속성 ```html [넓이속성] 넓이속성 ▶ width 사용 할 수 있는 단위 ▶px(고정형 단위), (%, vh, vw) 사용 할 수 있는 수치 ▶ auto, 0 ~ n ``` ```html [넓이속성 기본값] 기본값 ▶auto ``` ```html [width: auto] 높이 속성과는 다르게 display에 따라 결과값이 다르다. ``` ```html ＊block width : auto auto = 100% ＊inline width : auto auto = 0 ＊inline-block width : auto auto = 0 ``` ```html 하위엘리먼트에 수치값이 없을때(block) ▶ 기본값인 auto는 상위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 없을때(inline) ▶ 기본값인 auto는 0으로 작동한다. 하위엘리먼트에 수치값이 없을때(inline-block) ▶ 기본값인 auto는 0으로 작동한다. 하위엘리먼트에 수치값이 있을때(block) ▶ 기본값인 auto는 상위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 있을때(inline) ▶ 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 있을때(inline-block) ▶ 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. ```
## body 넓이와 높이 - 김혜지 수업자료 : [body태그에 배경색 적용](https://codepen.io/kimhyeji324/pen/eYjqxeq?editors=1100) ```html 1. 화면에 나오기 위해서는 3가지 요소가 필요하다. - 넓이 - 높이 - 배경색 2. body태그에 넓이, 높이를 커스텀하지 않았음에도 불구하고 사용자가 볼 수 있는 화면에 나오고 있다. 그렇다는건 body태그는 기본적으로 넓이, 높이를 가지고 있다는 것이다. 3. ctrl + 휠로 화면을 작게 만들었을때 배경색이 끝까지 채워지는것을 보아 body태그는 화면넓이만큼 크기를 가지고 있다는 것을 알 수 있다. 4. body 크기를 상속받는 태그들은 전부 화면 크기만큼 가지게된다. ```
## none ```html [none] 화면에 나오지 않음 ```
## block ```html [김이홍 강사님 수업자료] 너비 100%가 기본 속성, 한 줄에 하나만 배치 가능, 너비 높이 미지정시에 내용물의 높이만큼 가로 100%로 나온다. 높이만 지정해도 배경이 나오며 너비 높이를 지정할 시에는 내용물이 넘쳐도 너비나 높이는 변하지 않는다. ex) div, section, nav, article 등 ``` ```html [김혜지 수업자료] 1. 기본적으로 넓이를 가지고있다. 2. 상위엘리먼트를 기준으로 넓이를 가진다. 3. 기본적으로 넓이를 가지고 있기 때문에 높이만 생겨도 형태를 확인할 수 있다. 4. width : auto 일때 100%값으로 작용한다. 5. 한줄을 전부 차지한다. 6. 넓이가 작아도 한줄을 전부 차지한다. 7. a, span, img, ::befor, ::after 제외 전부 block태그이다. 8. block태그를 한줄에 같이 나오게 하려면 다른 display 속성값으로 바꿔줘야한다. ```
## inline ```html [김이홍 강사님 수업자료] 너비, 높이 지정 불가! 인라인 성분으로 다른 속성을 감싸는것은 안된다, 패딩-top 이 안되고(absolute 걸면 된다) 마진 상하가 먹지 않는다. ex) span, a, img, text 등 ``` ```html [김혜지 수업자료] 1. 기본적으로 넓이를 가지고있지 않다. 2. 상위엘리먼트 넓이를 가지지않는다. 3. 기본적으로 넓이, 높이 전부 가지고있지 않아서 넓이, 높이를 적용 해야하지만 형태를 확인할 수 있다. 5. width : auto 일때 0값으로 작용한다. 6. 한줄에 같이 나온다. 7. 넓이가 크면, 즉 부모엘리먼트보다 넓이가 넓어지면 줄바꿈된다.(inline태그가 2개 이상일때) 8. inline태그는 넓이, 높이, 마진, 패딩 등.. 다양한 코드가 안먹는다. 9. inlien태그를 커스텀하고 싶을경우 다른 display 속성값으로 바꿔줘야한다. 10. inline태그는 a, span, img, ::befor, ::after가 있다. ```
## inline-block - 김혜지 수업자료 : [예제와 노트정리 코드펜 이동](https://codepen.io/kimhyeji324/pen/MWBNLRg?editors=1000) ```html [김이홍 강사님 수업자료] 블락과 인라인 둘의 성분을 합친 녀석. 가로 성분이 블럭처럼 100%가 아니다. 한줄에 여러개 나올 수 있다, 내용물 높이와 너비에 자동으로 맞춰지고 내용물이 없을 시 너비, 높이 둘 다 지정해야 나온다. 인라인 성분으로 감쌀 시에 넘치는 높이는 감싸지 않는다. ``` ```html [김혜지 수업자료] 1. inline-block을 적용하면 태그끼리 여백이 생긴다. 2. inline-block인 태그는 없다. (inline-block으로 태어난 태그는 없다.) 3. 여백값은 측정할 수 없다. 4. 넓이를 상속받지 않는다. 5. width: auto = 0 ```
## block과 inline-block 비교 - 김이홍 강사님 수업자료 : [green과 블루만 한줄에 나오기 문제](https://codepen.io/jangka44/pen/qyOqrE?editors=0100) - 김이홍 강사님 수업자료 : [green과 블루만 한줄에 나오기 정답](https://codepen.io/jangka44/pen/WKQRGW?editors=1100)
- 김혜지 수업자료 : [노트정리 코드펜 이동](https://codepen.io/kimhyeji324/pen/MWBNLRg?editors=1000)
## 가로.세로 공통 정렬 조건 ```html [정렬조건] 부모요소보다 자식요소가 1px이라도 작아야한다. 상위요소와 하위요소 넓이.높이가 같으면 정렬할 수 없다. ```
## 가로 정렬 개념 ```css [가로 정렬] [가로정렬은 두가지로 나누어져있다.] 1.block 정렬 2.텍스트 정렬 [브라우저에서 텍스트취급을 당하는 3가지] 1.텍스트 2.inline요소 3.inlune-block요소 [block 정렬 태그] 1.margin-left: auto; 2.margin-right: auto; [text 정렬 태그] 1.text-align: left; 2.text-align: center; 3.text-align: right; ```
## display 총 정리 ```html [display 태그 분류] - inlne - 태그 → a, span, img, ::after, ::before - inline-block - 태그 → X - block - 태그 → inline 속성을 가진 태그를 제외한 전부 ``` ```html [display 넓이] - inlne - 부모 넓이를 상속받지 않는다. - inline-block - 부모 넓이를 상속받지 않는다. - block - 부모 넓이를 상속받는다. ``` ```html [display 넓이] - inlne - 부모 높이를 상속받지 않는다. - inline-block - 부모 높이를 상속받지 않는다. - block - 부모 높이를 상속받지 않는다. ```
## 텍스트 가로정렬 - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/kimleehong/pen/RwQKzgJ?editors=1100)
- 김혜지 수업자료 : [태그내 텍스트 정렬예제와 노트정리](https://codepen.io/kimhyeji324/pen/rNZOGRv?editors=1100) - 김혜지 수업자료 : [block요소, 텍스트요소(상속되는 text-align)예제와 노트정리](https://codepen.io/kimhyeji324/pen/XWPmzJP?editors=1100) - 김혜지 수업자료 : [상속된 text-align 왼쪽부터 시작하도록 만들기](https://codepen.io/kimhyeji324/pen/MWqaOwV?editors=1100) - 김혜지 수업자료 : [inline-block 정렬예제와 노트정리](https://codepen.io/kimhyeji324/pen/vYzNewB?editors=1100) ```html [텍스트요소 정렬특징] 정렬하려는 텍스트요소를 감싸고있는 태그에 정렬속성 적용 ``` ```css 우측정렬 → text-align: left; 중앙정렬 → text-align: center; 좌측정렬 → text-align: right; ```
## block요소 정렬 - 김혜지 수업자료 : [예제와 노트정리](https://codepen.io/kimhyeji324/pen/ExeVwOp?editors=1100) ```html [block정렬 특징] 정렬 하려는 태그에 정렬속성 적용 ``` ```css [block 정렬] 우측정렬 → margin-left: auto; 좌측정렬 → margin-right: auto; 중앙정렬 → 태그 { margin-left: auto; margin-right: auto; /*위 코드 생략형태*/ margin: 0 auto; } ```
## 중앙정렬 문제와 풀이 - 문제 : [이미지와 텍스트를 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/MWXwBgd)
## line-height - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/kimleehong/pen/bGLgPqZ)
- 김혜지 수업자료 : [개념정리 코드펜 이동하기](https://codepen.io/khjsbs324/pen/abGbbpv?editors=1000) - 김혜지 수업자료 : [예제와 노트정리 코드펜 이동하기](https://codepen.io/kimhyeji324/pen/MWqWgeB?editors=1100) ```html [노트정리] line-height는 두줄 이상일때 확인할 수 있다. 실제 폰트사이즈는 폰트만큼, line-height는 폰트 상하에 여백값을 이야기 하는 것이다. line-height는 상하에 들어가기때문에 텍스트가 세로중앙정렬 되는 특징이 있다. line-height는 line-height라는 속성으로 커스텀이 가능하다. 텍스트를 감싸고있는 부모엘리먼트 height값과 텍스트line-height값을 같은 수치로 두면 원하는 세로중앙정렬을 할 수 있다. 단, inline과 inline-block에는 line-height를 사용 할 수 없다. inline과 inline-block, block 세로중앙정렬은 absolute나 padding으로 조절한다. ```
## css선택자 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/WNMPJRO?editors=1100)
- 김혜지 수업자료 : [자식선택자](https://codepen.io/kimhyeji324/pen/eYjqXVg?editors=1100) - 김혜지 수업자료 : [후손선택자](https://codepen.io/kimhyeji324/pen/XWBvGpN?editors=1100) - 김혜지 수업자료 : [인접동생선택자](https://codepen.io/kimhyeji324/pen/abjeMJw) - 김혜지 수업자료 : [전체선택자](https://codepen.io/kimhyeji324/pen/LYBwaye)
## 자식엘리먼트와 부모엘리먼트 높이 - 김혜지 수업자료 : [부모 높이 auto](htts://codepen.io/kimhyeji324/pen/rNrXRJy?editors=1100) ```html 부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. ``` - 김혜지 수업자료 : [부모 높이 > 자식높이](https://codepen.io/kimhyeji324/pen/dyjxrEQ?editors=1100) ```html 1.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 2.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 3.부모와 자식 중 부모엘리먼트는 밑에 깔리고 자식 엘리먼트가 위에 올라온다. 4.부모와 자식 크기가 같을경우 자식크기에 가려져서 부모가 보이지않는다. 5.자식보다 부모가 더 클 경우 자식은 상단과 왼쪽에 딱 붙은 형태로 나온다. ``` - 김혜지 수업자료 : [부모 높이 < 자식높이](https://codepen.io/kimhyeji324/pen/XWBvGZR?editors=1100) ```html 1.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 2.부모와 자식 중 부모엘리먼트는 밑에 깔리고 자식 엘리먼트가 위에 올라온다. 3.부모와 자식 크기가 같을경우 자식크기에 가려져서 부모가 보이지않는다. 4.자식보다 부모가 더 클 경우 자식은 상단과 왼쪽에 딱 붙은 형태로 나온다. 5.자식보다 부모가 더 작을 경우 자식이 부모를 뚫고 나오게된다. 6.좋은형태 : 자식 크기를 키워서 부모 크기를 키우는것이 가장 좋다. ```
## 자식엘리먼트와 부모엘리먼트 크기가 같을때 - 김혜지 수업자료 : [부모 높이 = 자식높이](https://codepen.io/kimhyeji324/pen/RwYboyg?editors=1100) ```html 1.부모엘리먼트크기 = 자식엘리먼트크기 2.부모가 밑에 깔리고, 자식이 위에 올라오면서 부모 형태는 확인 할 수 없다. 3.위 상황에서 부모엘리먼트를 커스텀하면 눈으로 확인할 수 없다. ```
## class 선택자와 한줄에 같이 나오기 위한 조건 - 김혜지 수업자료 : [class선택자와 id선택자 개념 코드펜 열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000) - 김혜지 수업자료 : [class 기본예제와 한줄에 같이 나오기 위한 조건](https://codepen.io/kimhyeji324/pen/poOJMGg?editors=1100) - 김혜지 수업자료 : [class 그룹화](https://codepen.io/kimhyeji324/pen/zYJGgMZ?editors=1100) ```html [class 사용예시] <태그 속성="속성값">

``` ```html [한줄에 같이 나오기 위한 조건] 위 div들 중 하나라도 block이면 한줄에 같이 나올 수 없다. div가 전부 inline-block이여야 한줄에 같이 나올 수 있다. ```
## 젠코딩 - 김혜지 수업자료 : [선택자 활용해서 엘리먼트 생성하기](https://codepen.io/kimhyeji324/pen/qBMdewx?editors=1000) ``` html [젠코딩에 활용할 수 있는 부호 종류] * 여러개 $ 1~n . class {} 텍스트 [] 속성 () 그룹 + 인접동생 > 자식 ```
## 힘이 강한 css - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/NWBMvqY?editors=1100)
- 김혜지 수업자료 : [1순위 ~ 4순위](https://codepen.io/kimhyeji324/pen/qBMOWZK?editors=1100) ```htm [태그보다는 무조건 클래스선택자가 강하다.] [같은 순위끼리는 가장 아래쪽에 있는 코드가 힘이 강하다.] [다른 순위끼리는 순서가 바뀌어도 순위변화가 없다.] 1순위 : 하위엘리먼트선택자 안에 클래스선택자 2순위 : 클래스선택자 3순위 : 하위엘리먼트선택자 안에 태그 4순위 : 혼자있는태그 ```
- 선택된 선택자가 힘이 더 강하다. - 김혜지 수업자료 : [클래스 선택자끼리 비교](https://codepen.io/kimhyeji324/pen/abavoNq?editors=1100) ```css [.div-1 보다 section > .div-1가 더 힘이 강하다] .div-1 { width: 100px; height: 100px; background-color: green; } section > .div-1 { width: 100px; height: 100px; background-color: red; } ```
- 같은 순위끼리는 아래에 위치한 코드가 힘이 더 강하다 - 김혜지 수업자료 : [완전히 동일한 선택자 비교](https://codepen.io/kimhyeji324/pen/JjaYPXv?editors=1100) ```css section > .div-1 { background-color: green; } /*힘이 강한 코드*/ section > .div-1 { background-color: red; } ```
## 하이퍼링크 - 김혜지 수업자료 : [a태그 예제와 노트정리](https://codepen.io/kimhyeji324/pen/wvEKwWB?editors=1100) ```html [a태그 속성 기본값] target="_self" ``` ```html [a태그 링크가 정해지지 않았을때] ```
## marign.padding 기본값 ```html [margin, padding 기본값] margin기본값 → 0 padding기본값 → 0 ```
## 넓이와 여백 - 수업codepen : [넓이에 포함되는 padding](https://codepen.io/kimhyeji324/pen/mdGeBBY?editors=1100) - 수업codepen : [width와 padding 차이점](https://codepen.io/kimhyeji324/pen/mdGeBxN?editors=1100) - 수업codepen : [padding과 margin 차이점](https://codepen.io/kimhyeji324/pen/qBMOPKJ) ```css [상하좌우 값이 다를때] 태그 { padding-left: 5px; padding-right: 10px; padding-top: 15px; padding-bottom: 20px; } ``` ```css [상하, 좌우 값이 각각 같을때] 태그 { padding: 5px 10px; } ``` ```css [상하좌우 4가지 값이 전부 같을때] 태그 { padding: 5px; } ```
## 폰트두께 종류 - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/kimleehong/pen/JjpEQbN?editors=1100) ```html [이름과 넘버는 전세계 공통] Thin : 100 ExtraLight : 200 Light : 300 Regular : 400 Medium : 500 SemiBold : 600 Bold : 700 ExtraBold : 800 Black : 900 ```
## border속성 - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/kimleehong/pen/ExQGoar?editors=1100)
## 텍스트 줄바꿈 속성 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/JjpeGZR?editors=1100) - 김이홍 강사님 수업자료 : [줄바꿈 되지 않게 해주세요 정답](https://codepen.io/kimleehong/pen/ZErmWaB?editors=1100)
## 가상요소 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/JjpeWgW?editors=1100)
## 제목태그 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/jOZXPWo?editors=1000)

게시글 상세