카테고리 없음

HTML/CSS 기초

애용쓰 2022. 1. 13. 00:49

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 과 css를 이용한 자기소개 페이지

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)
}