1. Why HTML, CSS ?
: 시각화 도구 중 가장 빠르고 간편하면서 완벽하고 보편적인 도구
호환성 - Javascript, python, ruby 같은 다른 성격의 언어와도 잘 섞여서 대신 예쁘게 표현해줌 (html, css가 없이 위 언어로 만들면 30년 전 페이지처럼 올드함)
접근성 - 누구나 접속 가능한 웹페이지 만들 수 있음!!!
2. Resume with HTML/CSS
-1 Resume order(ex:여행 가방)
이력서 미리보기
이름 직무
About Me
Experience
Acitivities
Education
Awards
Sns Link
-2 Hello HTML
HTML과 인사하기
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox">
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>p tag : 글씨를 표현하는 기본 반찬 태그, 가방으로 치면 슈퍼마켓 비닐봉투급
h1 tag : 글씨를 크게 표현해주는 태그
- heading 1 뜻, heading은 큰 headline이라는 뜻, 1은 그 중에서 제일 크게
->"제일 큰 헤드라인을 표현해라!"
-3 Structure of Document
문서의 골격
보통 150개 태그, 쓰이는 태그는 30개 수준
html 100% - 가장 큰 가방
: 이 문서는 html 문서다 말하는 태그, 크롬에서는 이 태그 없어도 동작하는데 문제없으나 대부분 웹페이지는 이 html을 꼭 써주고 있음.
ex)
<!DOCTYPE html>
<html>
</html>head 100% - 부가정보
: 여행 가방의 수하물 태그 역할, 내용물에 대한 추가 정보
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
</head>body 98.8% - 컨텐츠 내용
: 문서에 표현되는 모든 내용(이력서 내 이름,생년월일, 경력, 대외활동 etc)
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
</head>
<body>
<h1>L</h1>
<p>HTML/CSS 개발자</p>
</body>
</html>title 97.1%
meta 95.4%
div 93.1%
a 92.6%
script 90.4%
link 89.5%
img 88.9%
span 82.7%
p 82.3%
li 77.7%
ul 77.6%
h1 59.4%
i 35%
-4 Hello CSS
CSS와 인사하기
HTML은 문서의 요소요소를 구분하는 역할을 하고 그 요소에 의미부여하는 역할
CSS
CSS CODE
footer {
text-align: center;
backround-color: black;
color: white;
}footer tag는 바디 위에든 아래든 어디 넣어줘도 상관없음. 꾸며주기 위함.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox">
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>HTML Code Review
<!DOCTYPE html>
<html>
<head> : 컨텐츠에 대한 보조정보
<meta charset-"UTF-8"> : 한글을 쓰겠다는 강한 의지가 담긴 코드
<title>L의 이력서</title> : 이 문서의 제목, 브라우저 상단에 작게 나오는 제목
<link rel="stylesheet" href="originality.css">
: 타이틀태그 위에 쓰든 아래에 쓰든 상관없음.
그저 html을 css와 연결해 꾸며주는 의도.
originality.css 파일을 참고해서 꾸미겠다고 쓰여져 있음.
메타태그처럼 독립적 태그(닫아주는 게 없음)
</head>
<body> : 컨텐츠가 담겨있음
<div class-"mainbox">
: division, html요소 몇 개를 하나로 묶는 태그,
html의 의미를 담기보다는 css에서 꾸미기 편하게 하기 위한 태그,
html요소를 묶어서 테두리를 그린다거나 한꺼번에 묶어서
우측 정렬한다거나 한꺼번에 묶어서 배경색을 바꾼다거나 할 때 쓰이는 것
지금은 L이라는 이름과 html/css 개발자
이 단어를 묶어서 테두리를 그리기 위해 이 디비전을 씀.
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p> : P태그 = Paragraph의 준말.
클래스로 묶어뒀으니 이 옷을 꾸미는 코드가 분명 css file에 있을 것.
이건 나중에 originality.css 코드 볼 때 확인해볼 것
</div>
<footer> : 화면 바닥에 쓰여지는 안내문을 의미. footer의 본 내용은 p코드로 묶여있음
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>
이 코드부터 이력서를 만들어 나갈 것-5 가독성 챙기기
html작성 및 big font small font class 분류
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<link rel="stylesheet" href="originality.css">
</head>
<body>
<p class="big-font">내 이름은 L</p>
<p class="small-font">코딩 배우는 중</p>
<p class="small-font">반갑습니다</P>
</body>
</html>CSS로 이동해서 p tag 꾸며주기, p tag class 분류된 것 꾸며주기
p {
font-size: 30px; ->글씨크기: 실제크기(picture element : 모니터 화면을 구성하는 최소의 사이즈 의미, 30px이면 읽음직한 크기)
}
.big-font { -> big-font라는 코드는 없으나 앞에 점 찍어주면 코드완성
font-size: 40px;
}
.small-font {
font-size: 15px;
}-6 중앙에 배치하기
footer {
text-align: center;
background-color: black; -> #1e1e1e;
color: white; -> #919191;
font-size: 12px;
}구글에 html color code 검색해서 원하는 색으로 찾을 수 있음.
html로 다시 넘어와서 글씨에 박스 만들어주기.
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox"> ->division의 준말. 구역/영역 의미.
여러태그들 묶어서 CSS와 함께 꾸며주기 위해 쓰는 태그.
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>다시 CSS 넘어와서
footer {
text-align: center;
background-color: black; -> #1e1e1e;
color: white; -> #919191;
font-size: 12px;
}
.mainbox {
border: 1px solid #ebebeb;
width: 610px; -> 폭을 의미.
text-align: center;
margin-left: auto; -> division 가운데 정렬 코드
margin-right: auto; -> division 가운데 정렬 코드
}-7 박스 쪼개기
위 내용 코드로 배워볼 것
box_model.css
box_model.html 파일 만들어 줌
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</body>
</html>박스 꾸며주기 위한 CSS 코드
.box1 {
background-color: skyblue;
width: 60px;
height: 60px;
border: 5px solid black;
padding: 20px;
margin: 20px; -> 상자 밖 영역
}
.box2 {
background-color: violet;
width: 100px;
height: 100px;
border: 5px solid purple;
}다시 originality.css로 넘어와서
footer {
text-align: center;
background-color: #1e1e1e;
font-size: 12px;
color: #919191;
}
.mainbox {
width: 610px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
text-align: right;
padding: 30px;
margin: 30px;
}-8 그림자 표현하기
HTML Code Review
index.html file
<!DOCTYPE html>
<html>
<head> : 컨텐츠에 대한 보조정보
<meta charset-"UTF-8"> : 한글을 쓰겠다는 강한 의지가 담긴 코드
<title>L의 이력서</title> : 이 문서의 제목, 브라우저 상단에 작게 나오는 제목
<link rel="stylesheet" href="originality.css">
: 타이틀태그 위에 쓰든 아래에 쓰든 상관없음.
그저 html을 css와 연결해 꾸며주는 의도.
originality.css 파일을 참고해서 꾸미겠다고 쓰여져 있음.
메타태그처럼 독립적 태그(닫아주는 게 없음)
</head>
<body> : 컨텐츠가 담겨있음
<div class-"mainbox">
: division, html요소 몇 개를 하나로 묶는 태그,
html의 의미를 담기보다는 css에서 꾸미기 편하게 하기 위한 태그,
html요소를 묶어서 테두리를 그린다거나 한꺼번에 묶어서
우측 정렬한다거나 한꺼번에 묶어서 배경색을 바꾼다거나 할 때 쓰이는 것
지금은 L이라는 이름과 html/css 개발자
이 단어를 묶어서 테두리를 그리기 위해 이 디비전을 씀.
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p> : P태그 = Paragraph의 준말.
클래스로 묶어뒀으니 이 옷을 꾸미는 코드가 분명 css file에 있을 것.
이건 나중에 originality.css 코드 볼 때 확인해볼 것
</div>
<footer> : 화면 바닥에 쓰여지는 안내문을 의미. footer의 본 내용은 p코드로 묶여있음
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>Originality.css file
.name-text {
font-size: 17px;
color: #7c7c7c;
font-weight: bold; -> 폰트두께지정코드, bold 두껍게 light 얇게, normal 보통
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
->
0 : 가로축으로 그림자가 얼마나 뻗어나가는지 지정, 0이면 안 뻗어나감
양수면 오른쪽으로, 음수면 왼쪽으로 뻗어나감
1px : Y축으로 그림자를 이동하는 것, Y축으로 이동하면 X축과 비슷한 움직임 보일 것
20px : 블러값. 그림자의 흐림정도.
0 : 스프레드값. 그림자의 퍼짐도.
rgba(0,0,0,0.1) : 그림자의 색. red/green/blue.
0~255인데 0은 아예 없는 까만색이고 255는 가장 밝은색.
0.1은 투명도. 1은 제일 탁한 색, 0은 제일 투명한 색
}
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px; -> 박스 안쪽과 글씨 사이가 패딩. 내 살과 외부공기 사이.
font-size: 12px;
color: #919191;
}
-9 구글 웹 폰트 사용하기
orinality css file
@import url( )
->구글 폰트 적용 코드
* { -> *은 '문서전체적용', "이 문서 모두에 해당하는 css문법이다! 를 의미"
font-family: 'Montserrat';
}
body,h1,h2 { -> browser별로 다 다르므로 일괄적으로 0px 적용해주는 코드
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
.name-text {
font-size: 17px;
color: #7c7c7c;
font-weight: bold;
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}
index.html로 이동
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox">
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text"></p>
</section> -> division이랑 완전히 똑같음. 묶어주는 것.
<section>
<div>
<div>
<article>
content1
</article>
<article>
content2
</article>
</div>
<article>
content3
</article>
</div>
<article>
content4
</article>
</section>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>-10 About Me 제작하기
Orginality.css 이동, h1/h2 꾸며줄 것
@import url( )
->구글 폰트 적용 코드
* { -> *은 '문서전체적용', "이 문서 모두에 해당하는 css문법이다! 를 의미"
font-family: 'Montserrat';
}
body,h1,h2 { -> browser별로 다 다르므로 일괄적으로 0px 적용해주는 코드
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic; -> 이탤릭으로 살짝 기울여 줌
}
h2 {
font-size: 20px;
font-weight: lighter; ->>>아주 얇은 글씨
color: #282828;
border-bottom: 1px solid #ebebeb;
->>>두께, 선종류, 색//border bottom 쓰면 아래에만 선이 생김.
margin-bottom: 16px;
padding-bottom: 5px;
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}
-11 Experience 제작하기
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox">
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text">
lorem ipsum(디자인 보기 위해 넣는 의미없는 텍스트)
</p>
</section>
<section>
<h2>EXPERIENCE</h2>
<p class="title-text">Awesome Programming Company</p>
<p class="year-text">2020 - Now</p>
</section>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>
@import url( )
->구글 폰트 적용 코드
* { -> *은 '문서전체적용', "이 문서 모두에 해당하는 css문법이다! 를 의미"
font-family: 'Montserrat';
}
body,h1,h2 { -> browser별로 다 다르므로 일괄적으로 0px 적용해주는 코드
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic; -> 이탤릭으로 살짝 기울여 줌
}
h2 {
font-size: 20px;
font-weight: lighter; ->>>아주 얇은 글씨
color: #282828;
border-bottom: 1px solid #ebebeb;
->>>두께, 선종류, 색//border bottom 쓰면 아래에만 선이 생김.
margin-bottom: 16px;
padding-bottom: 5px;
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}
section {
margin-bottom: 24px;
}
.name.text {
font-size: 16px;
color: #7c7c7c;
font-weight: bold;
}
.about-me-text {
font-size: 10px;
line-height: 16px; ->줄간 간격 넓혀주는 것. 폰트의 160%가 가장 보기 좋다고 함.
>
.title-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: left; -> html 문서에 둥둥 떠다니되 왼쪽에 붙어서 떠다녀라
}
.year-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: right;-> html 문서에 둥둥 떠다니되 오른쪽에 붙어서 떠다녀라
}
``'
-12 뗏목 띄우기
<!DOCTYPE html>
<html>
<head>
<meta charset-"UTF-8">
<title>L의 이력서</title>
<link rel="stylesheet" href="originality.css">
</head>
<body>
<div class-"mainbox">
<h1>L</h1>
<p class="name-text">HTML/CSS 개발자</p>
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text">
lorem ipsum(디자인 보기 위해 넣는 의미없는 텍스트)
</p>
</section>
<section>
<h2>EXPERIENCE</h2>
<divclass="float-wrap"> -> float tag는 둥둥 떠다니기 때문에 다른 글자와 겹칠 수 있으므로 wrap으로 가두리 만들어주는 것.
<p class="title-text">Awesome Programming Company</p>
<p class="year-text">2020 - Now</p>
</div>
<p class="desc-text">Front-End Web Developer</p>
<p class="desc-subtext">HTML/CSS,JS,React,...</p>
<div class="float-wrap">
<p class="title-text">Ministry of Health</p>
<p class="year-text">2015 - 2018</p>
</div>
<p class="desc-text">UI/UX Designer</p>
<p class="desc=subtext">Web design</p>
<div class="float-wrap">
<p class="title-text">Freelance Work</p>
<p class="year-text">2011 - 2015</p>
</div>
<p class="desc-text">Graphic Designer</p>
<p class="desc=subtext">Graphic Design, Editorial Design</p>
</section>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>
@import url( )
->구글 폰트 적용 코드
* { -> *은 '문서전체적용', "이 문서 모두에 해당하는 css문법이다! 를 의미"
font-family: 'Montserrat';
}
body,h1,h2 { -> browser별로 다 다르므로 일괄적으로 0px 적용해주는 코드
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic; -> 이탤릭으로 살짝 기울여 줌
}
h2 {
font-size: 20px;
font-weight: lighter; ->>>아주 얇은 글씨
color: #282828;
border-bottom: 1px solid #ebebeb;
->>>두께, 선종류, 색//border bottom 쓰면 아래에만 선이 생김.
margin-bottom: 16px;
padding-bottom: 5px;
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}
section {
margin-bottom: 24px;
}
.name.text {
font-size: 16px;
color: #7c7c7c;
font-weight: bold;
}
.about-me-text {
font-size: 10px;
line-height: 16px; ->줄간 간격 넓혀주는 것. 폰트의 160%가 가장 보기 좋다고 함.
>
.title-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: left; -> html 문서에 둥둥 떠다니되 왼쪽에 붙어서 떠다녀라
}
.year-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: right;-> html 문서에 둥둥 떠다니되 오른쪽에 붙어서 떠다녀라
}
.float-wrap {
overflow: hidden; -> float로 띄워져 있는 요소를 다 묶어주고 그 다음에 오는 html요소들이 이 float에 영향을 받지 않게 해줌.
}
.desc-text {
font-size: 9px;
}
.desc-subtext {
font-size: 9px;
color: #282828;
padding-left: 16px; ->>>들여쓰기
}
``'
-13 이력서 완성하기
<!DOCTYPE html> -> 안 써도 되는데 항상 쓰는 코드
<html> -> 안 써도 되는데 항상 쓰도록 하자
<head> -> 컨텐츠 보조하는 내용
<meta charset-"UTF-8"> -> 이 문서에 한글이 있다~!
<title>L의 이력서</title> -> 문서의 제목
<link rel="stylesheet" href="originality.css"> ->이 문서를 꾸미기 위해서는 originality.css 참고하겠다 태그
</head>
<body> -> 컨텐츠 쫙 들어감
<div class-"mainbox"> -> 테두리를 크게 그린 것. 폭 610px border 지정, border에 shadow 지정
<div class="title-box"> -> L과 html/css개발자 우측 정렬하기 위해 title box로 감싸줬음
<h1>L</h1> -> 가장 크게 표현하라는 뜻의 h 태그
<p class="name-text">HTML/CSS 개발자</p> -> 일반적으로html에서 쓰이는 모든 텍스트 p tag로
</div>
<section> ->div랑 같은 태그
<h2>ABOUT ME</h2> ->h2는 위에 L보다 글씨가 좀 작기 때문
<p class="about-me-text">
lorem ipsum(디자인 보기 위해 넣는 의미없는 텍스트, 공간차지하기 위함)
</p>
</section>
<section>
<h2>EXPERIENCE</h2>
<divclass="float-wrap"> -> float tag는 둥둥 떠다니기 때문에 다른 글자와 겹칠 수 있으므로 wrap으로 가두리 만들어주는 것.
<p class="title-text">Awesome Programming Company</p>
<p class="year-text">2020 - Now</p>
</div>
<p class="desc-text">Front-End Web Developer</p>
<p class="desc-subtext">HTML/CSS,JS,React,...</p>
<div class="float-wrap">
<p class="title-text">Ministry of Health</p>
<p class="year-text">2015 - 2018</p>
</div>
<p class="desc-text">UI/UX Designer</p>
<p class="desc=subtext">Web design</p>
<div class="float-wrap">
<p class="title-text">Freelance Work</p>
<p class="year-text">2011 - 2015</p>
</div>
<p class="desc-text">Graphic Designer</p>
<p class="desc=subtext">Graphic Design, Editorial Design</p>
</section>
<div class="sns-wrap">
<a href="http://facebook.com"><img class="sns-img" src-"images/facebook.png"></a>
->페북 로고 삽입, 무언가 꾸며주기 위해서는 클래스 만들어주는 게 좋음
a href tag - a링크 클릭했을 때 링크로 이동하게 됨!
<a href="http://twitter.com"><img class="sns-img" src-"images/twitter.png"></a>
<a href="http://linked-in.com"><img class="sns-img" src-"images/linked-in.png"></a>
<a href="http://instagram.com"><img class="sns-img" src-"images/insta.png"></a>
</div>
</div>
<footer>
<p>Copyright Originality ALL rights reserved.</p>
</footer>
</body>
</html>
@import url( )
->구글 폰트 적용 코드
* { -> *은 '문서전체적용', "이 문서 모두에 해당하는 css문법이다! 를 의미"
font-family: 'Montserrat';
}
body,h1,h2 { -> browser별로 다 다르므로 일괄적으로 0px 적용해주는 코드
margin: 0px;
padding: 0px;
}
body { ->임의로 넣은 것.
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic; -> 이탤릭으로 살짝 기울여 줌
}
h2 {
font-size: 20px;
font-weight: lighter; ->>>아주 얇은 글씨
color: #282828;
border-bottom: 1px solid #ebebeb;
->>>두께, 선종류, 색//border bottom 쓰면 아래에만 선이 생김.
margin-bottom: 16px;
padding-bottom: 5px;
}
.mainbox {
width: 610px; -> 폭을 의미.
padding: 30px;
margin: 30px;
margin-right: auto; ->이 박스가 가운데 정렬됨
margin-left: auto;
border: 1px solid #ebebeb; ->테두리를 그리는 것. 1px짜리 직선
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}
section {
margin-bottom: 24px;
}
.name.text {
font-size: 16px;
color: #7c7c7c;
font-weight: bold;
}
.about-me-text {
font-size: 10px;
line-height: 16px; ->줄간 간격 넓혀주는 것. 폰트의 160%가 가장 보기 좋다고 함.
>
.title-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: left; -> html 문서에 둥둥 떠다니되 왼쪽에 붙어서 떠다녀라
}
.year-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: right;-> html 문서에 둥둥 떠다니되 오른쪽에 붙어서 떠다녀라
}
.float-wrap {
overflow: hidden; -> float로 띄워져 있는 요소를 다 묶어주고 그 다음에 오는 html요소들이 이 float에 영향을 받지 않게 해줌.
}
.desc-text {
font-size: 9px;
}
.desc-subtext {
font-size: 9px;
color: #282828;
padding-left: 16px; ->>>들여쓰기
}
.title-box {
text-align: right;
}
.sns-img {
width: 12px; -가로
height: 12px; -세로
}
.sns-wrap {
text-align: right; -> 이미지 오른쪽 정렬
}
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}
``'
0개의 댓글
