1. 각 태그마다 출력되는 것 확인하기
<!-- html5 버전 -->
<!DOCTYPE html>
<html lang="ko">
<title>hello</title>
<head>
<body>
<h1>안녕하세요!</h1>
<h2>반가워요</h2>
<h3>잘있어요</h3>
<h4>다시만나요</h4>
<h5>반갑습니다</h5>
<h6>ㅁㄴㅇㄹㅇ</h6>
<b>b입니다</b>
<strong>strong입니다</strong>
<i>i입니다</i>
<small>small입니다</small>
<del>del입니다</del>
<sub>sub입니다</sub>
<sup>sup입니다</sup>
<p>p내용입니다</p>
<p>추가요</p>
</body>
</head>
</html>
2. 링크 만들기 및 사진 첨부
vscode에서는 자동완성을 제공한다.
! 엔터 시
<!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 html>
<html lang="ko">
<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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap"
rel="stylesheet"
/>
<style>
/* div 태그로 작성된 요소에 폰트 적용 , 태그선택자*/
div,
p {
font-family: "Nanum Brush Script", cursive;
}
</style>
<title>Document</title>
</head>link 문구는 구글 폰트를 사용한 것이다.
style에서 div , p 문구는 font - family : 'Nanum brush Script", cursive 문구를 사용한다는 것이다.
타이틀 안 문구는 제목이라고 보면 된다.
<body>
<div>
이 선언의 어떠한 규정도 어떤 국가, 집단 또는 개인에게 이 선언에 규정된
어떠한 권리와 자유를 파괴하기 위한 활동에 가담하거나 또는 행위를 할 수
있는 권리가 있는 것으로 해석되어서는 아니된다. 모든 인류 구성원의 천부의
존엄성과 동등하고 양도할 수 없는 권리를 인정하는 것이 세계의 자유, 정의 및
평화의 기초이며, 인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을
초래하였으며, 인간이 언론과 신앙의 자유, 그리고 공포와 결핍으로부터의
자유를 누릴 수 있는 세계의 도래가 모든 사람들의 지고한 열망으로서 천명되어
왔으며, 인간이 폭정과 억압에 대항하는 마지막 수단으로서 반란을 일으키도록
강요받지 않으려면, 법에 의한 통치에 의하여 인권이 보호되어야 하는 것이
필수적이며, 국가간에 우호관계의 발전을 증진하는 것이 필수적이며,
국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과 가치,
그리고 남녀의 동등한 권리에 대한 신념을 재확인하였으며, 보다 폭넓은
자유속에서 사회적 진보와 보다 나은 생활수준을 증진하기로 다짐하였고,
회원국들은 국제연합과 협력하여 인권과 기본적 자유의 보편적 존중과 준수를
증진할 것을 스스로 서약하였으며,
</div>
<p>여기는 어떻게 보일까요?적용되네요</p>
<div>여기는 오</div>
<h2>h2는</h2>
</body>
</html>body 부분에 div로 장문, p로 단문, h2로 단문을 작성하였는데 태그 선택자로 div와 p를 변화시켰으니 h2 빼고 나머지가 폰트가 입혀졌을 것이다.
3. 링크 만들기
<!DOCTYPE html>
<html lang="ko">
<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>html lang = 언어이다.
이것을 감지해서 구글 번역이 뜰 수도 있는 것이다.
content는 브라우저이름이다.
<!-- href속성 : 목적지 -->
<a href="https://www.google.com">구글홈페이지</a>
<!-- target="blank" 열린페이지에서 열리게-->
<a href="https://www.google.com" target="blank">구글홈페이지 </a><href = 보낼 링크> 적힐 내용이다
만약 링크에 target="blank"가 추가되었을 경우 새창에서 열리지 않고 열린 창에서 링크로 보내진다.
<!-- 이미지 출력 -->
<!-- src: 출력할 이미지 경로 alt: 이미지가 보이지 않을 경우 대체 메시지 -->
<!-- 상대경로: 현재파일(이미지를 출력하고 싶은파일)을 기준으로 이미지 위치를 찾아가는 것
절대경로: 해당 파일의 위치를 전체 경로를 표현하는 것
D:\visual studio code\images\images-1.png -->
<img src="../images/images-1.png" alt="" />
<img src="../images/images-1.png" alt="" width="100" height="50" alt="" />이미지를 선택, alt는 만약 이미지가 잘못됐을 경우 출력될 내용이다.
<a href="https://www.google.com" target="blank">
<img src="../images/다운로드.png" alt="" />
</a>href 안에 링크를 넣어놓고 그림을 첨부하면 그림을 누르면 링크로 이어진다.
4. 선택자를 이용해서 색 추가
<!DOCTYPE html>
<html lang="ko">
<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" />
<style>
/* div 요소에 배경색 적용 */
div {
background-color: blueviolet;
color: chartreuse;
}
h2 {
color: mediumseagreen;
}
.class1 {
background-color: darkgreen;
color: whitesmoke;
}
</style>
<title>Document</title>
</head>
<body>
<div>div 태그 입니다.</div>
<p>p 태그 입니다.</p>
<div>두번째 div 태그 입니다.</div>
<h2>h2 태그 입니다.</h2>
<h1 class="class1">안녕하세요</h1>
</body>
</html>style에 선택자에 색을 지정해서 색을 다르게 입힐 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<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" />
<style>
/* id1이 적용된 요소 스타일 지정 */
/* 배경색 orange, 글자색 : white */
#id1 {
background-color: orange;
/* color : white */
/*color: rgb(255, 255, 255);*/
color: #ffffff;
}
#id2 {
background-color: cadetblue;
color: red;
}
#id3 {
background-color: springgreen;
color: magenta;
}
#id4 {
background-color: darkblue;
color: brown;
}
.class1 {
color: red;
}
.class2 {
background-color: yellow;
}
</style>
<title>id 선택자</title>
</head>
<body>
<div id="id1">div 태그 입니다.</div>
<p id="id2">p 태그 입니다.</p>
<div id="id3" class="class1 class2">두번째 div 태그 입니다.</div>
<h2 id="id4" class="class2 class1">h2 태그 입니다.</h2>
<div class="class1 class2">적용이</div>
</body>
</html>div는 id와 class를 중첩해서 써도 id가 우선이기 때문에 id값으로 된다.
'Visual Studio Code > Visual Studio Code icia 31일차' 카테고리의 다른 글
| 프론트엔드에 대해서 (0) | 2023.04.05 |
|---|---|
| Visual Studio Code 설치 및 유용한 확장 프로그램 ( 익스텐션 ) (0) | 2023.04.05 |
