HTML CSS JS 입문1

티스토리 뷰

HTML CSS JS

HTML CSS JS 입문1

Programmers 2021. 6. 1. 22:34

1) 정리
1. HTML
뼈대
2. CSS
이쁘게
3. JS
생동감 있게

2)
웹 표준: Web Standard: 웹에서 사용되는 W3C의 권고안에서 나온 기술들, 표준기술이나 규칙

크로스브라우징: 여러 브라우저에서 동일한 사용자 경험을 줄수있도록 제작하는기술, 방법

요소 element -> <h1></h1>
<h1>, </h1> <-태그 한개씩 나눠진거, 거의같다
<h1>~<h6> 주제1~6
<p> -> 문단 paragraph

태그에 속성과 값을 사용 할 수있다. 기능의 확장
<img src="리소스의 경로" alt="대체 텍스트" />
source -> src
alternative -> alt 만약에 이미지가 출력이 안될때 대체되는 텍스트가 출력된다.
이미지를 삽일할때 쓰는 태그

div 분할 -> division
의미없는 분할
<div class="name">홍길동</div>
class="별명"

닫히는 태그가 없으면 빈 태그라고 한다. Empty Tag

부모와 자식요소
<selection class="fruits">
<h1>과일 목록</h1> -> h1태그
<u1> ->ul태그
<li>사과</li> -> li태그
<li>딸기</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</selection>

부모이상의 상위, 조상태그
자식 이하는 하위, 후손, 자손요소

요소가 가지는 구조를 가지고 css를 html에 적용할때 중요하다.

빈 태그(empty)란
보통은 태그는 열리고 닫히는 범위가 존재한다 <div> </div>
<img/> <- 빈 태그 열고 스스로 닫는다. 셀프클로징태그
<TAG> <- / 없는 빈 태그
<TAG/> <- /가 있는 빈 태그 범위가 없으 <img/> 의미를 확장할수있는 속성="값"이 포함된다.

<html>태그 -> 전체영역을 설정
<head>태그 -> 문서 정보, 출력의 용도는 아니다.
</head>
<body>태그 -> 문서 내용
</body>
</html>

<meta > 정보 메타태그

<!DOCTYPE html> -> 어떤 버전으로 해석될지, 버전을 지정

<head>
<title>웹 페이지의 제목</title> ->제목의 태그
</head>

<head>
<meta charset="UTF-8"> -> 문자인코딩설정,출력하는 방식(아시아권에 특화) //기타 모든 정보를 표시하는 태그
<meta name="author" content="홍길동"> -> name-> 정보의 종류가 뭔데? = 제작자 content-> 정보값
<meta name="description" contetn="우리 사이트최고">
</head>

charset 문자인코딩방식 : UTF-8, EUC-KR 등...
name 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) : author, description, keywords, viewport
content name이나 http-equiv 속성의 값을 제공 -> 실질적인 값!

<head>
<link rel="stylesheet" href="./css/main.css"> -> 외부문서를 연결할때 사용, html, css불러올때, 파비콘 같은거, js는 아니다!
rel-> (필수적으로) 관계 relation 현재문서와 외부 문서와의 관계를 지정, href -> 경로// 최소한 link는 rel이 꼭 있어야한다.
<link rel="icon" href="./favicon.png">
</head>

<style>
img {
width: 100px;
height: 200px;
}
P {
font-size: 20px;
font-weight: bold;
}
</style>
---> style이라는 html의 일부분으로 가져올 수있다.

javascript를 불러오고 작성할때는 script를 쓴다.
<script src="./js/main.js"> </script>
-> 외부에 있는 스크립트 파일을 가져오겠다. src로 경로 설정

내부에 직접작성하는 방법
<script>
function windowOnClickHandler(..~~)

</script>

<body></body>안에 사용하는 구조 태그
<div></div> -> 막사용된다. 분할

<body>
<div>
<p></p>
</div>
<div>
<div>
<h1></h1> -> div는 css나 js로 이렇게 묶은 부분들을 제어할때 사용할 수있다.
<p></p>
</div>
<div>
</body>

이미지 넣는 태그
<img src="경로" alt="대체 텍스트">
이미지 태그에는 src, alt가 필수적이다.

웹 표준 검사하기
W3C validator에 접속해서 HTML문서를 업로드하고 테스트 할 수있다.

실습

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Github</title>
</head>
<body>
    <div class="header">
        <div class="container"></div>
            <div class="container-left">
                <div class="logo">
                    <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
                </div>
                <div class="menu">
                    <div class="menu-itme">Personal</div>
                    <div class="menu-itme">Open Source</div>
                    <div class="menu-itme">Business</div>
                    <div class="menu-itme">Explore</div>
                </div>
            </div>
    </div>
    
</body>
</html>

이제 이쁘게 만드는건 CSS로 하면된다.

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

HTML / 요소 - 문자 콘텐츠 - OL, UL, LI (0)	2021.06.03
HTML / 요소 - 콘텐츠 구분 (0)	2021.06.03
HTML - 메타 데이터 META (0)	2021.06.02
HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소 (0)	2021.06.02
HTML CSS JS 입문2 (0)	2021.06.02

공지사항

티스토리 뷰

HTML CSS JS 입문1

'HTML CSS JS' 카테고리의 다른 글

티스토리툴바