패스트캠퍼스 MGS 3기 4월 15일

vscode 살펴보기

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>

html , head , body

!DOCTYPE html은 문서의 HTML버전을 지정한다. 지금은 HTML5 버전이다.

html은 HTML의 시작, /html은 종료를 선언한다. 문서의 전체 범위를 알려준다.

head는 웹페이지에는 보이지 않는 정보를 작성한다. 문서의 정보를 나타내는 범위이다.

body에서는 웹페이지에서 보이는 구조를 작성한다. 문서의 구조를 나타낸다.

meta는 여러 정보를 브라우저에게 제공한다.

name은 정보의 종류, concent는 정보의 값을 뜻한다.
charset은 문자인코딩 방식을 뜻한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
    <style>
        div {
            color: red;
        }
    </style>
    <script src="./main.css"></script>
    <script>
        console.log('Hello world!')
    </script>
</head>
<body></body>
</html>

정보를 의미하는 태그들

title은 페이지의 제목을 뜻한다.

head 에서 파일과 html문서를 연결할 때,

css파일은 link로 하고, js파일은 script src 라는 태그로 시작한다.

link에서 rel은 relationship의 약어로 가져올 문서와의 관계를 의미한다.
href는 Hyper Text Reference의 약어로 가져올 문서의 경로를 지정한다.

위에서처럼 script에서src를 사용해 위치를 지정하는 경우와,
HTML문서 안에 작성하는 경우가 있다.

css파일도 style태그로 HTML문서 안에 작성할 수 있다.

이미지 출력하기

<img src="./images/logo.png" alt="HEROPY">

이왕이면 images 폴더를 생성해서 그 안에 저장하는 게 좋다.

src를 사용해서 위치를 지정한다.
alt는 대체텍스트로 이미지가 나오지 못할 때 출력될 글자이다.

 <img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

웹주소를 입력하는 경우에도 똑같이 출력된다.

상대경로, 절대경로

상대경로: ./ (상위 폴더) 나 ../
절대경로: https 나 /(컴퓨터 내부)

페이지를 나누고 링크걸기

 <a href="https://naver.com">NAVER</a>

a태그에 명시된 NAVER을 누르면 href에 위치한 주소로 이동한다.

Kotlin - Idioms
[git] git add/commit 취소, 변경, 하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage