티스토리에는 html을 사용해서 글을 쓰는 모드가 있다.
지금 사용할 코드는 이것이다.
<!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>
<style>
.first {
display: inline-block;
background: #333;
color: #fff;
border: solid;
border-color: red;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="first">
<p1>네이버</p1>
</div>
</body>
</html>
여기서 이부분 스타일부분인데,
< style>
.first {
display: inline-block;
background: #333;
color: #fff;
border: solid;
border-color: red;
padding: 10px 20px;
cursor: pointer;
}
< style/>
이부분은 css에 해당하는 부분이다.
나도 처음 공부하는 입장에서 많이 헷갈린게.
html과css와 자바스크립트 부분이 각각 나뉘어서 보통 코드를 작성하는데.
이런 티스토리 같은 경우 html만 있고 css가 없던데 어떻게 하는 건가? 싶었다.
그런데 이렇게 html상에 넣으면 적용이 된다고 한다.
< style>
.first {
display: inline-block;
background: #333;
color: #fff;
border: solid;
border-color: red;
padding: 10px 20px;
cursor: pointer;
}
< style/>
의문점은 존재한다. 이럴거면 왜, css라는부분을 나뉘어 작성하는가? 하는 부분.
추측하건데 코드별로 나뉘어 작성하는 편이 쉽기 때문이라고 생각한다.
어쨋든 이걸통해서 나오는 걸 보여주려고 한다.
아래 보이는 버튼은 윗 코드는 html로 적용해 본것이다.
인라인 박스로 클릭하면 네이버로 가짐
'코딩을해보자 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드에서 flex를 배우는데 잘 안된다. 실패중 (0) | 2024.09.04 |
|---|---|
| 비전공자 초보자가 보는 프론트 앤드 수업 근황 (0) | 2024.08.22 |
| 복습 겸 적어보는 프론트 앤드 수업 3일 차(각종 연결 및 불러오기 과정) (0) | 2024.08.22 |
| html과 css, 자바스크립트 (0) | 2024.08.01 |
| 프론트 앤드를 배우려는데(html, css, 자바스크립트) (2) | 2024.07.15 |