- 글을 쓸 때도 직관적으로 쓰기 위한 태그
- 아래와 같은 태그들은 sementic html 로 직관적인 태그들이다.
<span>hello?</span> // 짧은 단어를 쓸 때 유용
<p>what is it?</p> // 문단을 쓸 때 유용
<adress> </adress> // 이메일
- 직접 html에 css 추가시키는 태그
<head>
<style></style>
</head>
- 따로 css 파일 만들고 html 연결시키는 태그
<link href="styles.css" rel="stylesheet" />
- css : h1 바꿔주기
h1{
color:blueviolet; // 색깔
font-style: italic; // 날려쓰는 글씨체
font-size: 20px; // 사이즈
text-align: center; // 중앙 정렬
}
html은 위에서 차례대로 실행시키기 때문에 겹쳐도 되나 나중에 나온 것을 결국 적용시킨다.
<p> <div> <img> 옆에 올 수 없음. 이렇듯 옆에 올 수 있는 것과 없는 것을 없는 것 : block / 있는 것 : inline 이라고 칭함.
대부분의 박스들은 block 이다.
- inline을 block 바꾸는 css
span {
display: block; // 이줄이 바꿈.
background-color: turquoise;
}
- block를 inline으로 바꿀 수 없다. inline은 높이, 너비, 내용이 없기 때문이다. 다만 내용을 넣으면 생긴다.
box 3가지 속성 : margin, border, padding
matgin은 box의 border로부터의 바깥에 있는 공간
- 자동으로 설정되있는 default 값을 바꿀려면 직접 수정하기
body {
margin-left: 20px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
background-color: thistle;
}
- margin : 상하 margin 값 좌우 margin 값 / 하나만 값 적으면 상하좌우 가능
margin:20px 15px;
- margin : 상margin값 우margin값 하margin값 좌margin값 (시계방향)
margin: 20px 15px 20px 15px;
collapsing margin problem : div margin을 조정해도 body margin이랑 똑같이 취급해서 하나만 margin이 적용되는 문제
- padding 다주기 / body 안에 넣어주기
body {
padding: 20px;
margin: 0px;
background-color: thistle;
}
- id로 css 바꿔주기
<!DOCTYPE html>
<html lang="korea">
<head>
<title>Test2</title>
<style>
html {
background-color: tomato;
}
div {
height: 150px;
width: 150px;
}
body {
padding: 20px;
margin: 0px;
background-color: thistle;
}
span {
display: block;
background-color: turquoise;
}
#first{ // 이 부분
background-color: violet;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>
</html>
- border : 외곽선 따기
border: 2px solid black;
- 전체에 적용하기
* {
border: 2px solid black;
}
inline 은 margin 적용이 안되기 때문에 적용하고 싶으면 block으로 바꿔줘야한다.
- 하나로 id css 묶어주기
<!DOCTYPE html>
<html lang="korea">
<head>
<title>Test3</title>
<style>
body {
margin: 20px;
}
span {
background-color: teal;
}
#t1,
#t2,
#t3 {
background-color: tomato;
}
</style>
</head>
<body>
<span>hello</span>
<span id="t1">hello</span>
<span>hello</span>
<span id="t2">hello</span>
<span>hello</span>
<span id="t3">hello</span>
</body>
</html>
- class 사용하기
- 유일명이 필요없다 한번에 여러 개 사용할 수 있다.
<!DOCTYPE html>
<html lang="korea">
<head>
<title>Test3</title>
<style>
body {
margin: 20px;
}
span {
background-color: teal;
}
.t {
background-color: tomato;
}
</style>
</head>
<body>
<span>hello</span>
<span class="t">hello</span>
<span>hello</span>
<span class="t">hello</span>
<span>hello</span>
<span class="t">hello</span>
</body>
</html>
id="tomato hello hi money" (X)
class="tomato hello hi money" (O)
- css desing 일종
<!DOCTYPE html>
<html lang="korea">
<head>
<title>Test3</title>
<style>
body {
margin: 20px;
}
span {
background-color: teal;
}
.t {
background-color: tomato;
color: wheat;
padding: 5px 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<span>hello</span>
<span class="t">hello</span>
<span>hello</span>
<span class="t">hello</span>
<span>hello</span>
<span class="t">hello</span>
</body>
</html>
< 한번에 수정하기 >
1. 원하는데 커서를 둔다.
2. ctrl+D를 하는데 원하는 만큼 ctrl를 누른 상태에서 D를 누른다.
3. 원하는 위치로 화살표를 눌러 이동한다.
- class 두개 적용
<!DOCTYPE html>
<html lang="korea">
<head>
<title>Test3</title>
<style>
body {
margin: 20px;
}
span {
background-color: teal;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.t {
background-color: tomato;
color: wheat;
}
.s {
background-color: teal;
}
</style>
</head>
<body>
<span class="btn s">hello</span>
<span class="btn t">hello</span>
<span class="btn s">hello</span>
<span class="btn t">hello</span>
<span class="btn s">hello</span>
<span class="btn t">hello</span>
</body>
</html>
'IT' 카테고리의 다른 글
| [openCV / c++] 사진 반만 흑백으로 만들기 / 사진 밝게 만들기 / 사진 어둡게 만들기 (0) | 2020.12.30 |
|---|---|
| [c++/openCV] 비주얼 스튜디오(visual stdio)에 openCV 설치하기 (0) | 2020.12.30 |
| [Web] css / html tag 태그 정리 - 2 (0) | 2020.12.25 |
| [Web] html tag 태그 정리 - 1 (0) | 2020.12.24 |
| [C언어/유닉스] 알파벳을 소문자 ‘a’부터 순서대로 한 줄로 표시하는 함수 작성 (0) | 2020.12.10 |
댓글