Lee Jun Hyeok

안녕하세요~😸

1 분 소요

HTML and CSS 알아보기🍇

🏳️ HTML(hypertext markup language) : 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다. 또한 웹페이지의 구조를 잡을 수 있다.

화이팅!!!

tag는 시작태그, 내용, 끝태그로 이루어져 있으면 이것을 요소(element)라고한다.


<!DOCTYPE>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

html 파일의 구조

<!DOCTYPE> tag처럼 생겼지만 태그는 아니다. html이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다.(html5를 사용) ➡️ <html>은 html이 시작됐는지 인지하기 위해 사용 ➡️ <head>는 사이트의 제목, 설명, 부가 정보, 기술적내용이 들어간다. <meta charset="utf-8"> 한글,일본어,중국어가 포함된 페이지는 문자인코딩 추가해줘야함. <meta name="viewport" content="width=device-width">가 들어가면 페이지가 이뻐진다. ➡️


h1,2,3,4,5

heading의 줄임말로 숫자가 커질수록 글씨가 작아짐. 주로 제목같은 텍스트를 보여줄때 사용.

span

주로 텍스트를 넣음. 줄이 바뀌지 않고 한줄로 나옴. inline-elemnet라고 불림

p

paragraph의 줄임말로 문단을 통으로 넣을때 많이 사용. 줄바꿈이 일어남.

a

클릭하면 화면이동이 일어남. href라는 속성에 주소(attribute값)를 써야함. target속성에 _blank를 써주면 새창으로 실행함.

div

division의 줄임말로 섹션을 나눌때 사용. 의미는 없고 비슷한 부분을 그룹지어줌.


🏳️ CSS란 HTML 태그들에 디자인을 입혀주는 것이다

css를 작성한 후 HTML에 적용되도록 반영하는 방법 3가지

<h1 style="color: red;">FRONTEND 101</h1>

인라인스타일

태그 style속성에 직접 작성할 수 있음. 빠르고 편하지만 가독성이 떨어지고 유지보수가 힘듬


<style>
 h2 {
  color: #408090;
 }
</style>

style 태그

편하고 빠르지만 기능적으로 분리되지 않았기에 유지보수에 적합하지 않음


<link href="style.css" rel="stylesheet" type="text/css" /> // rel은 html파일과의 관계를 설명, type 연결되는 파일이 어떤것인지 알려줌.

css파일에 작성

유지보수도 좋고 파일이 구분되어있어 가독성이 좋음


#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

font-family

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용 Georgia 폰트가 지원되지 않으면, “Times New Roman”을 적용, 이것도 지원되지 않으면 Times을 적용 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻


text-indent

들여쓰기

&nbsp;

텍스트 태그안의 문장에서 띄워쓰기를 하고싶을때 사용

margin: 50px 50px 50px 50px;

위, 오른쪽, 아래, 왼쪽의 여백의 값

box-sizing: border-box;

박스의 크기를 자동으로 맞게 해줌(중요 모든 항목에 표시 *)

.pre span vs span.pre

전자는 pre라는 클래스명을 가진태그의 내부 span, 후자는 pre라는 클래스명을 가진 span

background-size: 100%;

지정해놓은 크기에서 사진전체를 보여줄수 있음

업데이트: