멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습
기초클래스(HTML/CSS)
1. HTML과 인사하기
Tag 기본 사용법
<가방1>내용물입니다.</가방1>
<가방2><가방1>내용물입니다.</가방1></가방2>
<p></p> : 글자를 표현하는 '기본적인' 태그
<h1></h1> ~ <h6></h6> : 제목을 표시하는 태그
2. 문서의 골격
유명인들의 연설을 보면 문장 구조가 아주 쉽다. 단어들도 어렵지 않으며, 커뮤니케이션 능력이 뛰어난 사람은 쉬운 언어와 깔끔한 문장으로 사람들에게 쉽게 다가간다.
HTML, CSS 코딩도 같다. 많이 쓰이고 쉬운 태그를 써서 간결하게 문서를 뽑아내는 사람이 코딩을 잘 하는 것이다.
<html></html> : HTML문서에서 제일 먼저 쓰이는 태그
<!DOCTYPE html> : html태그와 쌍으로 쓰이는 태그 → 문서 맨 위에 한 줄 추가!
<head></head> : 누가 문서를 작성했는지, 문서의 제목은 무엇인지, 대표 이미지는 무엇인지,
어떤 키워드를 검색해야 나오는지 등 내용물에 대한 추가 정보가 담겨있다.
<body></body> : 일반적으로 html, css에 들어가는 모든 내용이 body 태그에 들어간다.
<meta charset="UTF-8"> : 컴퓨터 코딩은 영어를 기반으로 성장되었고, 많은 언어들이 영문 알파벳에 최적화 되어 동작한다. 고로, 한글을 쓰려면 해당 코드를 작성해야 한다.
<title></title> : 문서(웹페이지)의 제목
<footer><footer> : 웹페이지마다 맨 아래에 공통적으로 작성되어있는 내용(주소, 고객센터 번호, 저작권 등..)
📌 예시
- HTML 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>홍길동의 이력서</title> </head> <body> <h1>홍길동</h1> <p>HTML/CSS 개발자</p> <footer>copyright HGD. ALL rights reserved.</footer> </body> </html>
3. CSS와 인사하기
html파일과 연결시키기 → <head>태그 안에 <link rel="stylesheet" href="css파일.css"> 작성
📌 예시
- HTML 파일
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css파일.css"> <title>홍길동의 이력서</title> </head> <body> <h1>홍길동</h1> <p>HTML/CSS 개발자</p> <footer>copyright HGD. ALL rights reserved.</footer> </body> </html>
- CSS 파일
/*footer 꾸며주기*/ footer { text-align: center; /* 글씨 가운데 정렬 */ background-color: black; /* 배경 검은색 */ color: white; /* 글자색 흰색 */ }
4. 가독성 챙기기
📌 예시
- HTML 파일
<p class="big-font">내 이름은 홍길동</p> <p class="small-font">코드라이언으로 코딩 배웠지</p> <p>반갑습니다<p>
- CSS 파일
.big-font { font-size: 40px; /* 폰트 사이즈 40px */ } .small-font { font-size: 15px; /* 폰트 사이즈 15px */ } p { font-size: 30px; /* 폰트 사이즈 30px */ }
5. 중앙에 배치하기
<div></div> <section></section> <article></article> :
여러 태그들을 묶어서 CSS로 함께 꾸며주기 위한 태그. (구역, 영역)
Tip. 구글에 'html color code' 검색하면 원하는 색의 코드를 찾을 수 있음.
📌 예시
- HTML 파일
<div class="mainbox"> <h1>김멋사</h1> <p>HTML/CSS 개발자</p> </div>
- CSS 파일
.mainbox { border: 5px solid black; /* 두께 방식 색깔 */ width: 610px /* 상자 크기 조정 */ text-align: center /* 박스 안 내용을 가운데 정렬 */ margin-left: auto; /* div 가운데 정렬법 */ margin-right: auto; /* div 가운데 정렬법 */
6. 박스 쪼개기
margin : 상자 밖 영역과 테두리 사이의 틈
border : 테두리
padding : 테두리와 내용물 사이의 빈틈
content : 내용물
width : 너비
height : 높이
7. 그림자 표현하기
📌 예시
- CSS 파일
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); /* (순서대로) X축 그림자, Y축 그림자, 흐림 정도, 퍼짐도, rgb=그림자 색(0~255) a=투명도(0~1) */
8. 구글 웹 폰트 사용하기
📌 예시
Tip. *(Asterisk) : 모든 HTML 태그 요소를 모두 선택하는 기능
- CSS 파일
@import url('폰트 링크'); * { font-family: '폰트 이름'; }
9. ABOUT ME 제작하기
📌 예시
- CSS 파일
h1 { font-size: 36px; font-weight: bold; font-style: italic; } h2 { font-size: 20px; font-weight: lighter; color: #282828; border-bottom: 1px solid #ebebeb; margin-bottom: 16px; padding-bottom: 5px; }
10. EXPERIENCE 제작하기
📌 예시
- CSS 파일
.title-text { font-size: 11px; font-weight: bold; color: #282828; float: left; /* 둥둥 떠다니다 */ } .year-text { font-size: 11px; font-weight: bold; color: #282828; float: right; /* 둥둥 떠다니다 */
11. 뗏목 띄우기
📌 예시
- CSS 파일
.float-warp{ overflow: hidden; /* float로 띄워져있는 요소들을 다 묶어주고, 그 다음에 오는 html요소들이 이 float에 영향을 받지 않게 해주는 코드(겹치치 않게 함) */ }
12. 이력서 완성하기
- 학습한 코드로 처음부터 끝까지 이력서 완성해보기
13. '나만의 이력서' 정리하기
- 코드 리뷰
14. HTML/CSS 바로 풀어보기
- 학습 내용 TEST
