<footer> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 이것저것의 문서 </title>
<head>
<body>
<h1> 이것저것 </h1>
<p> HTML/CSS 개발자 </P>
<footer> 이러고 저러고 생활 중 </footer>
</body>
</html><footer>은 일반 글자랑 다를게 하나도 없다
그냥 <p> 태그 썼을 때랑 똑같다
이말인 즉슨, <p> 태그 대신 <footer> 태그를 써도 화면 상 바뀌는 것은 하나도 없다
이것저것
HTML/CSS 개발자
<p> 태그를 한번 보자면 이 태그는 문단을 뜻한다
html에서 편하게 일반적으로 쓰는 모든 글을 p 태그로 묶는다
<footer> 태그는 화면 바닥에 쓰여지는 안내문 등을 의미한다
우리는 <p> 태그와 <footer> 태그를 쓰면서 구분을 지었고 각각에게 의미를 부여했다
html의 역할은 여기까지이다
이제 화면의 적절한 위치를 표현하는 건 html이 아닌 CSS가 담당한다
우리가 사용한 <footer>를 css로 꾸며보자
html과 css는 두 파일로 구분해야 한다
물론 한 파일에 넣어도 동작은 한다
하지만 이건 반드시 절대적으로 분리를 해줘야 한다
같은 파일에 두 언어를 쓰는 것은 마치 한 문서에 한국어와 영어가 난잡하게 섞여있는 것 같다
읽는데 피로감이 발생한다
index.html을 시작페이지로 많이 쓰이기 때문에 우리는 index.html을 파일명으로 지정해두었다
이제 이 두파일을 연결해주는 작업이 필요하다
이 내용은 index.html의 head 태그에 넣어야 한다
<body>에는 화면에 직접적으로 표현되는 contents만 들어가고
contents 표현을 위한 부수적인 모든 것들은 <head> 태그에 들어간다
html의 모든 기능은 태그 형태로 돌아간다
그래서 index.html과 thisandthat.css로 파일을 연결하기 위한 것도 태그 형태로 돌아가는 것
두 파일을 연결하겠다하는 태그는 바로 link 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 이것저것의 문서 </title>
<link rel="stylesheet" href="thisandthat.css">
// 이 태그는 meta 태그와 똑같은 형태
열고 닫는 태그가 아니라 태그가 단독적으로 쓰이는 태그이다
<head>
<body>
<h1> 이것저것 </h1>
<p> HTML/CSS 개발자 </P>
<footer> 이러고 저러고 생활 중 </footer>
</body>
</html>
//index.html꾸미는 작업은 전적으로 css에서 작업을 한다
thisandthat.css를 클릭해서 파일을 연다
이 곳에 footer를 꾸며주는 내용을 써보도록 한다
footer {
text-align: center;
}중앙정렬 → text-align: center;
text-align이 글자정렬을 뜻하며 글자 정렬을 중앙으로 하겠다라는 코드가 된다
그 가운데는 콜론으로 구분하고 마지막에는 세미클론으로 마무리를 짓는다
css 문서를 꾸미는 형태는 다음과 같다
꾸미는 형태의 이름을
p {
text-align : center;
//콜론이 들어가서 어떤 요소를 어떻게 꾸미겠다는 것을 구분을 해주고 마지막에 세미콜론이 들어감
color: orange;
}footer {
text-align: center;
background-color: black;
color: white;
}//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>it것저것의 문서</title>
<link rel="stylesheet" href="thisandthat.css">
</head>
<body>
<footer>또 다른 아무내용</footer>
<h1>it것저것</h1>
<p>HTML/CSS 개발자</p>
<footer>이러고 저러고 생활중</footer>
<footer>아무내용</footer>
</body>
</html>
같은 태그를 서로 다르게 CSS로 표현하기
<p> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>it것저것의 문서</title>
<link rel="stylesheet" href="thisandthat.css">
</head>
<body>
<p>HTML/CSS 개발자</p>
<P>이러고 저러고 생활중</P>
</body>
</html>CSS 파일로 들어가 <p> 태그를 꾸며보자
글자 크기를 키우는 작업을 햅겠다
글자 크기는 CSS에서 다음과 같이 표현한다
p {
font-size: 30px;
}
<body>
<p> it것저것 </p>
<p> 이러고 저러고 생활중 </p>
<p> 반갑습니다 </p>
</body>이 부분을 구분하기 위해 class를 쓴다
class를 적용할 때 이름을 마음껏 적어도 상관없다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>it것저것의 문서</title>
<link rel="stylesheet" href="thisandthat.css">
</head>
<body>
<p class="big-font">HTML/CSS 개발자</p>
<P class="small-font">이러고 저러고 생활중</P>
<p class="small-font">반갑습니다</p>
</body>
</html>반드시 class name은 큰 따옴표로 묶어줘야한다
큰 따옴표로 시작했으면 큰 따옴표로 마무리해야한다/ 작은 따옴표로 시작했으면 작은 따옴표로 마무리해야한다
p {
font-size: 30px;
}
.big-font {
font-size: 40px;
}
.small-font {
font-size: 15px;
}big-font라는 태그는 세상에 존재하지 않기 때문에 이 코드는 아무런 의미가 없는 코드가 되었다
하지만 big-font 앞에서 .(점)을 붙혀주면 이 코드는 되살아난다
바로 big-font라는 class를 꾸며주라라는 뜻으로 바뀌게 된다
'Full-Stack > CSS' 카테고리의 다른 글
| CSS (0) | 2022.09.20 |
|---|
