html
introduction to HTML
- tag
- <태그이름>내용</태그이름>
<p><!-- opening tag -->
화이팅<!-- content -->
</p><!-- closing tag -->- 예시
<p></p>
<h1></h1>
<a></a>
<img>
<br>- attribute
- class, href, src, alt.. etc
- element
- <태그이름> 으로 시작하여 <태그이름/> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 합니다. 끝 태그가 필요없는 것은 태그가 그 자체로 요소가 됩니다.
tags
<!DOCTYPE html>
<!-- HTML5 버전을 사용한다는 의미 -->
<html>
<!-- html 시작과 끝-->
<head>
<!-- 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지) -->
<body>
<!-- 내부에는 화면에 보여질 각종 태그 -->
<h1><h2><h3><h4><h5>
<!-- 제목(크기별) -->
<span>
<!-- 텍스트 줄바꿈 없음-->
<p>
<!-- 텍스트 줄바꿈 있음 -->
<a>
<!-- 링크 -->
<!-- target="_blank" 속성은 클릭하면 새창이 뜨도록 설정해줌 -->
<div>
<!-- 웹사이트에서 섹션을 나눌 때 사용, 이 태그 자체로는 의미 없음 -->
Attributes
- id: 중복될 수 없는 태그의 이름
- class: 중복 가능한 태그의 이름
CSS
Introduction to CSS
- 적용 방법
- 인라인 스타일
<style>태그- css 파일 작성
- 작성법
p {}
.class {}
#id {}font style
p{
font-family: 글씨체;
font-size: 크기(px);
font-weight: 글씨 두께(normal, bold, 숫자);
font-style: 글씨체;
color: 색깔;
}
문구 스타일
p{
text-align: 정렬(left, center, right);
text-indent: 들여쓰기(px);
}
margin과 padding
- margin: top right bottom left;
- padding: top right bottom left;
Border
- border: 두께 스타일 색깔;
- box-sizing: border-box;????????
* 박스의 width, height 값을 margin, padding 수치를 포함하게끔 지정하는 설정(필수)
Inheritance, Grouping
- 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미
- 각자의 selector에 모두 한꺼번에 스타일을 지정할 수 있습니다.
.what-is-blockquote, span {
color: green;
}
CSS selector
-
selector 우선순위
- inline styling(13줄에 style 요소로 직접): 1000점
- id: 100점
- class: 10점
- tag: 1점
-
붙여쓰기 vs 띄워쓰기?????
-
p#third-line.p-tag {
text-decoration: underline;
}
:<p>태그 중에서 id="third-line", class="p-tag" 인것
- .a div .b .pre span {
background-color: yellow;
}
: class="a" 내에 속해있는(자식) div태그
내에 속해있는 class="pre"
내에 속해있는 span태그
https://castie.tistory.com