오늘부터 TIL을 작성하기로 했다.
부트캠프 다른 동기들보다 늦게 시작하는 바람에 한동안은 TIL내용이 아주 많이 길어질 듯 하다..!
Hypertext Markup Language
.html
<html>
<head>
<body>
<태그이름>
</태그이름>
<태그이름></태그이름>
<img>
<br>
→ 위의 태그처럼 종료 코드가 없는 코드도 있는데, 이런 코드는 시작태그와 종료태그 사이에 내용이 필요없기 때문이다.
<태그이름>content</태그이름>
→ 여기서 ‘content’ 부분이 내용에 해당한다.
<html>
<head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
→ 여기서 html, head, body, div는 태그이다.
→ class는 속성이다.
<html>
<head>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>
→ 여기서 <h1>안녕하세요!</h1>
가 요소이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE>
을 제외한 모든 elements는 <html>
태그로 감싸져 있다.<html>
태그를 통해 html이 시작됨을 안다.<html>
태그 다음에 오는 태그<meta charset="UTF-8">
: 한글, 일본어, 중국어가 포함되어있다면 utf-8로 문자 인코딩을 설정한다.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 디바이스의 가로 너비 == 웹 페이지의 가로 너비 ⇒ 추가하지 않으면 데스크탑 버전 웹페이지가 축소되어보임<title>Document</title>
: 브라우저 탭 제목<head>
다음에 오는 태그<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<a href="www.google.com" target="_blank">구글로 이동</a>
<p>문단입니다.</p>
<p id="red">빨간색</p>
<p id="yellow">노란색</p>
<p id="blue">파란색</p>
→ 위 코드에서 p태그에 빨간색을 설정하면 모든 p태그에 적용이 되지만, id가 red인 태그만 빨간색을 적용하면 다른 p태그는 적용이 되지 않는다.
<p>빨간색</p>
<p>노란색</p>
<p>파란색</p>
<div class="my_button">버튼1</div>
<div class="my_button">버튼2</div>
→ class가 my_button인 요소들에 디자인을 한번에 적용할 수 있다.
<div id="red" class="my_button">버튼1</div>
HTML태그에 디자인을 입힌다.
<p style="color: red;">content</p>
<head>
<style>
div {
color : red;
}
</style>
</head>
<body>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="back_style.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<link>
div {
color: red;
background-color: yellow;
font-size: 14px;
}
/*p태그 선택*/
p {
font-size: 12px;
}
.title {
font-weight: bold;
}
#content {
border-width: 1px;
border-color: black;
border-style: solid;
text-align: center;
}
p.pClassName {
color: gray;
}
/*p태그이면서 class명이 pClassName이라는 뜻*/
.side span {
color: blue;
}
/*class이름이 side인 요소 안에 있는 span이라는 뜻*/
p {
font-family : "dotum", "Noto Sans KR", "sans-serif", serif;
}
→ 브라우저가 돋움 폰트를 지원하면 돋움 폰트 적용
→ 돋움 폰트가 없으면 Noto Sans KR 폰트 적용
→ 돋움, Noto Sans KR폰트가 둘 다 없으면 sans-serif 폰트 적용
→ 앞의 세 폰트가 다 없으면 최종적으로 serif 폰트 적용(serif는 모든 브라우저에서 지원한다)
h1 {
font-size: 30px;
}
h4 {
font-size : 50px;
/*h1보다 글씨 크기가 커진다!*/
}
→ h1은 큰 글씨이지만 css코드를 통해 폰트 사이즈를 바꿀 수 있다.
브라우저는 태그에 적용된 스타일보다 class, id에 적용된 스타일을 우선순위로 적용한다!
.boldText {
font-weight: bold;
}
a {
font-style: italic;
}
/*모두 같은 색이다*/
h1 {
color: #eb4639;
}
h1 {
color: rgb(235, 70, 57);
}
h1 {
color: hsl(4, 82%, 57%);
}
검색방법 : color picker / color picker hex color / color hex to rgb 등
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
<span>
같은 inline element는 태그의 내용만큼만 영역을 차지하므로 text-align 속성이 먹히지 않는다.<blockquote class="jsDescription">
<!--
blockquote : 인용구문을 넣는다.
브라우저에서는 양쪽 여백을 기본으로 넣는다.
-->
.jsDescription {
text-indent: 50px;
}
<p>스페이스 넣는 예제</p>
<!-- 를 6번 넣었으므로 기본 1번에 6번 추가되어 총 7칸이 띄어진다. -->
/*아래 세 코드는 모두 같은 margin을 나타낸다.*/
p {
margin: 50px;
}
p {
margin: 50px 50px 50px 50px;
/*top right bottom left 순서*/
}
p {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
/*아래 세 코드는 모두 같은 padding을 나타낸다.*/
p {
padding: 50px;
}
p {
padding: 50px 50px 50px 50px;
/*top right bottom left 순서*/
}
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
div {
border: 5px solid red;
}
div {
border-top: 4px double red;
border-right: 2px solid #666666;
border-bottom: 6px dashed darkviolet;
border-left: 1px dotted #00ee44;
/*이렇게 따로 지정할 수도 있다.*/
}
선 종류
text-decoration: underline;
대신 border-bottom
을 사용하는 사람이 많다.
→ text-decoration은 스타일을 따로 지정할 수 없기 때문
div {
box-sizing: border-box;
}
/* *선택자를 이용하여 모든 태그를 선택한다.*/
* {
box-sizing: border-box;
}
<body>
<p>안녕하세요</p>
<span>반갑습니다</span>
</body>
body {
color : red;
font-size: 14px;
}
/*p태그의 내용인 "안녕하세요"도 빨간 글자, 14px로 나타난다.*/
span {
color: blue;
}
/*span태그는 color스타일이 blue로 지정되어있으므로 부모인 body태그의 font-size만 상속받는다.*/
.className, span {
color: red;
}
처음 써보는 TIL이라 오늘 공부한 내용을 정리해서 올리긴 했는데 역시나 양이 너무 많다!
꾸준히 쓰면서 글 쓰는 실력을 더 높여야 겠다는 생각이 들었다.