HTML
HTML 요소(element)의 구조
<태그이름>내용</태그이름>
HTML 파일의 구조
<!DOCTYPE> <!-- HTML5 버전을 사용한다는 의미 -->
<html> <!-- html 코드가 시작 됐음을 알리는 태그 -->
<head> <!-- 사이트의 제목, 설명, 부가 정부 -->
</head>
<body> <!-- 화면에 보여질 내용 -->
</body>
</html>태그
h1 ~ h6
<h1>wecode</h1>
<h2>wecode</h2>
<h3>wecode</h3>
<h4>wecode</h4>
<h5>wecode</h5>
<h6>wecode</h6>wecode
wecode
wecode
wecode
wecode
wecode
span 태그
<span>안녕하세요!</span>
<span>김코드입니다.</span>안녕하세요! 김코드입니다.
span 태그는 줄이 바뀌지 않는다.
p 태그
문단을 넣을때 주로 사용하는 태그
<p>안녕하세요!</p>
<p>김코드입니다.</p>안녕하세요!
김코드입니다.
p 태그는 줄이 바뀐다.
br 태그
줄바꿈 태그
self closing 태그이다.
<span>안녕하세요</span><br>
<span>김코드입니다.</span>안녕하세요
김코드입니다.
a 태그
href 속성(attribute)을 사용하여 링크를 연결해준다.
target 속성을 가진다. ex) target="_blank"
<a href="https://www.w3schools.com/tags/tag_div.asp">div 태그?</a>div 태그
섹션을 나눌때 사용하는 태그
class 나 id 속성 부여해서 css와 결합해서 사용됨
속성(attribute)
id 속성
id 속성은 단 하나만 있을수 있다.
class 속성
class 속성은 중복된 이름 부여 가능
CSS
인라인 스타일과 style 태그로 적용하는 방법은 최선의 방법이 아니다.
.css 파일에 css 코드 따로 작성하는게 best
<link href="style.css" rel="stylesheet" type="text/css" />html파일과 css파일을 연결시켜주는 코드로 링크를 해주는 코드를 추가해야한다.
css 속성
font-style
font-family
폰트를 지정하는 속성
p {
font-family: Georgia, '"Times New Roman", Times, serif;
}font-size
글씨크기를 지정하는 속성
p {
font-size: 50px;
}font-weight
글씨의 굵기를 조절하는 속성
p {
font-weight: 400;
}color
글자색을 지정하는 속성
p {
color: blue;
}새로 알게된 것들
blockquote 태그
- 인용구 넣을때 사용한다.
- 양쪽으로 여백이 자동으로 적용된다.
<blockquote>자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.</blockquote>
- 스페이스바를 여러번해도 하나밖에 적용되지 않는다.
- 스페이스바를 여러번 사용하고 싶을때 를 넣어주면 된다.
안녕하세요! 김코드입니다.안녕하세요! 김코드입니다.
* 선택자
- 모든 태그에 스타일 속성을 넣고 싶을때 사용하는 선택자
* {
color: white;
}
