HTML
Hyper Text Markup Language
: 텍스트에 다른 특별한 기능을 넣었기 때문에 Hyper Text, <>를 이용하여 마킹을 하기 때문에 Markup Language
HTML은 구조이다. 구조가 이렇게 짜여지는구나를 이해하면 되는 것.
· Element(요소)
- tag라고도 한다.
- content의 type을 지정한다.
ex )
<car>모닝</car> : car이라는 element를 이용해서 모닝을 marking. 모닝은 car가 된다.
<h1> : 글의 큰 제목
<p> : 문단
<br> : 줄바꿈
· Attribute(속성)
- element의 속성을 지정하는 것으로 생략이 가능하다.
ex )
<a> : anchor, 하이퍼텍스트 만들 때 사용
<a href="https://www.tech-heng.tistory.com">애기개발자</a>
a 태그에서 href 속성 사용
· Comments(주석)
- <!--이렇게 사용합니다-->
- 해킹, 용량 문제로 현업에서는 주석을 많이 사용하지는 않는다고 한다. 적재적소에 사용.
· Block level element
- 한 칸 전부를 다 사용한다.
- <div>,<p>,<h1>,<form>,<table>,<li>...
· Inline level element
- 글자 길이만큼만 공간을 차지한다.
- 새로운 행에 표시되지 않는다.
- <span>,<a>,<img>,<input>,<label>...
<h1> 안녕하세요. </h1> <!--block level element-->
<span> 반갑습니다.</span> <!--inline level element-->
<span> 밥은 드셨나요?</span>
CSS
HTML의 시각적 표현 정의 (디자인)
: 구조화 표현의 분리가 가능하다.
- Filesize 감소
- 효율적이고 정교한 디자인 제어
- Browser 호환성 대처에 용이
사용방법
· External Stylesheet, <link> : 외부에서 디자인한 css를 html 내부에 넣을 때
<head>
<link rel="stylesheet" type="text/css" href"style.css" />
</head>
· Internal Stylesheet, <style> : 내부에서 css를 직접 디자인
<head>
<style type="text/css">
body { margin:0; padding:0;}
p {color:red;{
</style>
<head>
· Inline Styles : 태그 자체에 css 문법을 이용하여 디자인
<p style="color:black; border:1px solid #000;">오늘은 수요일.</p>
· Syntax
- selector, property, value
선언은 속성값(property) : value
h1 {color:black; font-size:15px;} - h1안에 있는 내용을 검정색, 15px로 나타낸다
· Comments(주석)
- /*이렇게 사용합니다*/
W3C(World Wide Web Consortium)에서 표준 관리
https://www.w3schools.com/ <- 여기서 reference를 참고할 수도, 코드를 실행시켜보면서 익힐 수도 있습니다!
https://codepen.io/pen/ <- 간단하게 웹 페이지 만들어 볼 수 있음. Web Editor
HTML
<body>
<h1> ✨welcome✨ 여러분 안녕하세요~</h1>
<img src="https://i.postimg.cc/DmVfD1Hr/hello.gif"/>
<h2> 당근걸을 소개할게요.</h2>
<ul> <!--unordered list-->
<li>이름: 애용</li> <!--list item-->
<li>나이: 25</li>
<li>사는 곳: 대한민국</li>
<li id="color"> 좋아하는 색: 보라색</li> <!--색 변경을 위해 id 값 지정-->
</ul>
<pre> <!--공백문자와 줄바꿈 문자를 보존-->
여행을 좋아해요.
집에서 쉬는 것도 좋지만 밖에서 노는 것을 더 좋아해요.
취미 부자랍니다.
계획적이기보다는 즉흥적인 편이에요.
</pre>
<div></div>
<span>인스타그램을 연결해보려했는데, 안되네요😅</span>
<a href="https://www.instagram.com/" target="_blank">
여기🔐</a>
<div id="nothing">사실 정말 별거 없어요 ㅎㅎ...</div>
<div>
<img src="https://i.postimg.cc/8PL0Mhph/unnamed.png"/><!--이미지 첨부-->
</div>
<b id="finish"><!--굵은 글꼴-->
이만 소개를 마치도록 하겠습니다.
감사합니다 😊
</b>
</body>CSS
body{
text-align: center; /*text-align : 글 정렬 위치*/
}
#color{color: rgb(173,159,219)} /* #id 로 지정 가능*/
img {
width: 300px;
}
#nothing{
text-decoration: line-through;
}
pre{
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
div{
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
span{
font-size: 15px;
}
#finish{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background-color:rgb(222,217,240)
}