[TIL-1]

da.circle·2022년 9월 14일
CSShtml
0

TIL

목록 보기
1/44

오늘부터 TIL을 작성하기로 했다.
부트캠프 다른 동기들보다 늦게 시작하는 바람에 한동안은 TIL내용이 아주 많이 길어질 듯 하다..!

HTML👨‍🔧

정의와 기능

Hypertext Markup Language

  • 웹 페이지를 만들기 위한 언어
  • 웹 페이지의 구조를 잡는다.
  • 브라우저는 html파일을 읽어 화면에 나타내 웹 페이지를 생성한다.

HTML파일

  • 확장자 : .html
  • 파일의 이름은 마음대로 정한다. ex) index.html

HTML Tag

  • HTML파일에 필요한 기본 태그
    <html> <head> <body>

태그(tag)란?

  • 브라우저에서 텍스트인지, 이미지인지 등 어떤 종류의 데이터인지 확인하려면 태그를 사용해야 한다.
  • 시작태그 : <태그이름>
  • 종료태그 : </태그이름>
<태그이름></태그이름>
  • 대부분의 태그는 시작태그와 종료태그가 있어야 한다.
<img>
<br>

→ 위의 태그처럼 종료 코드가 없는 코드도 있는데, 이런 코드는 시작태그와 종료태그 사이에 내용이 필요없기 때문이다.

내용(content)이란?

  • 태그 사이에 들어가는 텍스트 등의 내용
<태그이름>content</태그이름>

→ 여기서 ‘content’ 부분이 내용에 해당한다.

속성(attribute)이란?

  • 시작태그에 작성한다.
  • 한 태그에 여러 속성을 작성할 수 있다.
<html>
<head>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>

→ 여기서 html, head, body, div는 태그이다.

→ class는 속성이다.

요소(element)란?

  • <태그이름>내용</태그이름> 의 구조를 요소라고 한다.
  • 종료태그가 없는건 태그 그 자체가 요소이다.
<html>
<head>
</head>
<body>
  <h1>안녕하세요!</h1>
</body>
</html>

→ 여기서 <h1>안녕하세요!</h1>가 요소이다.

HTML 파일 구조

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

!DOCTYPE

  • HTML 파일 맨 위 첫줄에 위치한다.
  • HTML태그는 아님
  • HTML 버전을 브라우저에 알린다.
  • !DOCTYPE은 HTML5버전을 의미한다. (HTML5버전이 가장 최신이고 많이 쓰임)

html

  • <!DOCTYPE>을 제외한 모든 elements는 <html>태그로 감싸져 있다.
  • 브라우저는 <html>태그를 통해 html이 시작됨을 안다.
  • 항상 <html>태그 다음에 오는 태그
  • 사이트 제목, 설명, 부가정보, 기술적 내용(모바일인지 등)이 들어간다.
  • <meta charset="UTF-8"> : 한글, 일본어, 중국어가 포함되어있다면 utf-8로 문자 인코딩을 설정한다.
    • utf-8 : 전세계 대부분 문자를 표현할 수 있는 인코딩 방식(유니코드)
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 디바이스의 가로 너비 == 웹 페이지의 가로 너비 ⇒ 추가하지 않으면 데스크탑 버전 웹페이지가 축소되어보임
  • <title>Document</title> : 브라우저 탭 제목

body

  • 항상 <head> 다음에 오는 태그
  • 화면에 보여지는 태그들이 들어간다.

HTML Tag 종류

h1~h6

  • 제목 등에 주로 사용된다.
  • heading의 줄임말이다.
  • 숫자가 커질수록 글씨 크기는 작아진다.(h1이 제일 큰 글자)
  • h1은 한 페이지에서 한번만 사용해야 한다.
  • h2부터는 여러번 사용해도 된다.
  • h1은 숫자 순서대로 사용해야 한다. h3을 사용하려면 그 전에 h1, h2 태그가 반드시 존재해야 한다.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

a

  • 페이지 링크를 걸어서 이동할 수 있게 한다.
  • href 속성에 이동할 주소를 작성한다.
  • target 속성 : _blank 는 링크 클릭 시 새 창에서 열린다.
<a href="www.google.com" target="_blank">구글로 이동</a>

p

  • 텍스트에 주로 사용한다.
  • paragraph의 줄임말이다.
  • 문단을 구분한다.
  • 줄바꿈이 있다.
<p>문단입니다.</p>

span

  • 텍스트를 주로 넣는다.
  • 줄바꿈이 없다.(한줄로 이어진다.)
  • inline-element : 한 줄에 이어서 나오는 요소

div

  • division의 줄임말
  • 섹션을 나눈다.
  • 아무런 의미, 기능이 없다.

HTML Attributes

  • 태그마다 사용할 수 있는 attributes(속성)는 다르다.

id

  • 태그에 고유한 이름을 붙인다.
  • 웹 페이지에서 같은 값의 id는 존재할 수 없다.
  • 한 요소에만 스타일을 적용하고 싶을 때 사용한다.
  • JavaScript에서 id를 가지고 요소를 찾을 수 있다.
<p id="red">빨간색</p>
<p id="yellow">노란색</p>
<p id="blue">파란색</p>

→ 위 코드에서 p태그에 빨간색을 설정하면 모든 p태그에 적용이 되지만, id가 red인 태그만 빨간색을 적용하면 다른 p태그는 적용이 되지 않는다.

class

  • id처럼 태그에 이름을 붙이지만 중복되는 이름을 붙일 수 있다.
<p>빨간색</p>
<p>노란색</p>
<p>파란색</p>
<div class="my_button">버튼1</div>
<div class="my_button">버튼2</div>

→ class가 my_button인 요소들에 디자인을 한번에 적용할 수 있다.

속성 여러개 추가하기

  • 하나의 태그에 여러 속성을 넣을 수 있다.
  • 속성은 띄어쓰기로 구분한다.(스페이스바 한칸)
  • 순서 상관없다.
<div id="red" class="my_button">버튼1</div>

CSS🎨

HTML태그에 디자인을 입힌다.

CSS적용

인라인 스타일

  • 태그에 style속성으로 직접 스타일을 작성한다.
<p style="color: red;">content</p>
  • 빠르고 편하다.
  • 스타일이 많아지면 가독성이 떨어진다.
  • 유지보수가 힘들다.

style태그

  • HTML파일 내에 CSS 코드를 작성한다.
<head>
	<style>
		div {
			color : red;
		}
	</style>
</head>
<body>
</body>
  • HTML 파일에 HTML코드와 CSS코드를 모두 작성할 수 있어서 빠르고 편하다.
  • 한 파일 내에서 기능적으로 구분되지 않아 유지보수가 힘들다.
  • CSS 파일을 따로 만드는 것이 개발 시 좋다.

CSS 파일 작성

  • HTML파일에 태그를 사용하여 CSS파일과 연결한다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="back_style.css" type="text/css">
  <title>Document</title>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>
  • <link>
    • 사용할 CSS파일을 연결한다
    • rel : HTML파일과 CSS파일의 관계
    • href : CSS파일이 있는 경로
    • type : 로 연결되는 파일이 어떤건지 명시

CSS 작성법

  • 세미콜론을 기준으로 여러 속성을 적용한다.
div {
	color: red;
	background-color: yellow;
	font-size: 14px;
}

선택자

tag name

  • 태그이름으로 요소를 선택한다.
/*p태그 선택*/
p {
  font-size: 12px;
}

className

  • HTML태그에 있는 class이름으로 요소를 선택한다.
  • class명 앞에 . 을 붙인다.
.title {
  font-weight: bold;
}

idName

  • HTML태그에 있는 id이름으로 요소를 선택한다.
  • id명 앞에 # 을 붙인다.
#content {
  border-width: 1px;
  border-color: black;
  border-style: solid;
  text-align: center;
}

class, id를 태그와 결합

p.pClassName {
	color: gray;
}
/*p태그이면서 class명이 pClassName이라는 뜻*/

요소 안의 요소 선택

.side span {
	color: blue;
}

/*class이름이 side인 요소 안에 있는 span이라는 뜻*/

우선순위

  • 만약 스타일이 겹쳐도 아래 우선순위에 따라 스타일이 적용된다.
    • inline styling(코드에 직접 작성): 1000점
    • id: 100점
    • class: 10점
    • tag: 1점

Font Style

font family

  • 폰트 종류를 지정한다.
  • 사용자가 어떤 브라우저를 사용할 지 모르기 때문에 여러 폰트를 나열한다.
  • 띄어쓰기가 있는 폰트는 “” 안에 작성한다.
p {
	font-family : "dotum", "Noto Sans KR", "sans-serif", serif;
}

→ 브라우저가 돋움 폰트를 지원하면 돋움 폰트 적용

→ 돋움 폰트가 없으면 Noto Sans KR 폰트 적용

→ 돋움, Noto Sans KR폰트가 둘 다 없으면 sans-serif 폰트 적용

→ 앞의 세 폰트가 다 없으면 최종적으로 serif 폰트 적용(serif는 모든 브라우저에서 지원한다)

font size

  • 폰트의 사이즈를 지정
  • 단위 : px, em, pt 등
h1 {
  font-size: 30px;
}

h4 {
	font-size : 50px;
	/*h1보다 글씨 크기가 커진다!*/
}

→ h1은 큰 글씨이지만 css코드를 통해 폰트 사이즈를 바꿀 수 있다.

브라우저는 태그에 적용된 스타일보다 class, id에 적용된 스타일을 우선순위로 적용한다!

font weight

  • 글씨 두께를 조절한다.
  • 값 : normal, bold, 100, 200, 400, 700, 900 등
  • 400 == normal
  • 700 == bold
.boldText {
  font-weight: bold;
}

font style

  • 글씨 스타일을 바꾼다.
  • italic : 이탤릭체
a {
  font-style: italic;
}

color

  • 글씨 색상을 지정한다.
  • red, yellow처럼 색 이름으로 지정할 수 있다.
  • hex값 : #eb4639
  • rgb값(빨강, 초록, 파랑) : rgb(235, 70, 57)
  • hsl값(색상, 채도, 명도) : hsl(4, 82%, 57%)
/*모두 같은 색이다*/
h1 {
 color: #eb4639;
}
h1 {
 color: rgb(235, 70, 57);
}
h1 {
 color: hsl(4, 82%, 57%);
}

검색방법 : color picker / color picker hex color / color hex to rgb 등

Text Style

text-align

  • 텍스트 정렬
  • 왼쪽, 가운데, 오른쪽 정렬이 있다.
  • 값 : left / center / right
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
  • 기본값은 left이다.
  • <span>같은 inline element는 태그의 내용만큼만 영역을 차지하므로 text-align 속성이 먹히지 않는다.

indent

  • 들여쓰기
<blockquote class="jsDescription">
<!-- 
blockquote : 인용구문을 넣는다. 
브라우저에서는 양쪽 여백을 기본으로 넣는다.
-->
.jsDescription {
  text-indent: 50px;
}
  • html코드에서 스페이스, 엔터를 여러번 쳐도 브라우저에서는 인식되지 않는다. → 스페이스를 추가하고 싶으면   를 넣는다.
    <p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>
<!-- &nbsp;를 6번 넣었으므로 기본 1번에 6번 추가되어 총 7칸이 띄어진다. -->

margin, padding

  • 여백
  • margin : 테두리 바깥쪽 여백.
  • padding : 테두리 안쪽 여백.
  • 실질적인 박스가 차지하는 영역 : 요소의 너비+padding+border

margin

/*아래 세 코드는 모두 같은 margin을 나타낸다.*/
p {
	margin: 50px;
}

p {
	margin: 50px 50px 50px 50px;
	/*top right bottom left 순서*/
}

p {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

padding

/*아래 세 코드는 모두 같은 padding을 나타낸다.*/
p {
	padding: 50px;
}

p {
	padding: 50px 50px 50px 50px;
	/*top right bottom left 순서*/
}

p {
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

Border

  • 테두리
  • border: 두께 종류 색;
  • margin은 고정값이므로 반드시 순서를 외워야 하지만 border는 상관없다. → 하지만 약속된 코딩 규칙(coding convention)에 따라서 순서를 맞춰주는 것이 좋다.
div {
	border: 5px solid red;
}

div {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
	/*이렇게 따로 지정할 수도 있다.*/
}

  • 선 종류

    • dotted
    • dashed
    • solid : 많이 사용(직선)
    • double
    • groove
    • ridge
    • inset
    • outset

  • text-decoration: underline; 대신 border-bottom을 사용하는 사람이 많다.
    → text-decoration은 스타일을 따로 지정할 수 없기 때문

box-sizing

  • 박스 사이즈를 고정시킬 수 있다.
  • div같은 요소에 width를 직접 지정해도 padding, border 스타일때문에 지정한 width보다 더 길어지는 경우가 많다. 직접 계산해서 padding을 적용하려면 어렵다. 이럴때 box-sizing을 설정하면 자동으로 width에 맞춰서 padding이 적용된다.
div {
  box-sizing: border-box;
}
  • 대부분 웹페이지는 box-sizing을 기본적으로 적용한다.
/* *선택자를 이용하여 모든 태그를 선택한다.*/
* {
	box-sizing: border-box;
}

Inheritance(상속)

  • CSS 특성
  • 부모의 스타일이 자식에게까지 적용된다.
  • 자식이 본인의 스타일을 가지고 있다면 부모의 스타일은 자식에게 상속되지 않는다.
<body>
	<p>안녕하세요</p>
	<span>반갑습니다</span>
</body>
body {
	color : red;
	font-size: 14px;
}

/*p태그의 내용인 "안녕하세요"도 빨간 글자, 14px로 나타난다.*/

span {
	color: blue;
}

/*span태그는 color스타일이 blue로 지정되어있으므로 부모인 body태그의 font-size만 상속받는다.*/

Grouping(여러 선택자)

  • 여러 선택자를 한번에 지정할 수 있다.
.className, span {
	color: red;
}

처음 써보는 TIL이라 오늘 공부한 내용을 정리해서 올리긴 했는데 역시나 양이 너무 많다!
꾸준히 쓰면서 글 쓰는 실력을 더 높여야 겠다는 생각이 들었다.

profile
da.circle
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧
다음 포스트

[TIL-2]

0개의 댓글