Day_1

LontoJ·2020년 5월 25일
0

정리 전

HTML의 요소

ex) <p class=“start”> 화이팅!!!</p>

<p> : 시작태그(opening tag)
<class=“start”> : 속성(attribute)
화이팅 : 내용(content)
</p> : 끝태그(closing tag)
<p>화이팅!!!</p> : 요소(element)

HTML의 기본 구조

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


<!DOCTYPE> : 브라우저에게 어떤 버전의 html 파일을 사용하는지 알려주는 역할

Ex) <!DOCTYPE html> : HTML5 버전을 사용한다는 의미

<html> : <!DOCTYPE>을 제외한 모든 HTML 요소를 담는 역할

<head> : 사이트의 제목, 설명, 부가정보, 기술적 내용 등이 들어가는 머릿말 같은 역할

Ex) <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지의 경우 글자 깨짐을 방지하기 위해 utf-8이라는 문자 인코딩을 추가해주는 역할

<meta name="viewport" content="width=device-width"> : 사용하는 기기의 가로 크기 = 웹 페이지의 가로 크기, 모바일 웹사이트 구현시 도움이 되는 기능

<title>repl.it</title> : 브라우저 탭에 표시되는 페이지 이름을 나타내는 역할

<body> : 주로 화면에 보여지는 요소들을 넣어주는 장소

Ex) <h1>, <h2><h5> : Heading의 줄임말. 주로 제목에 사용하는 태그로 숫자가 올라갈 수록 글자 크기가 줄어듬 

<span> : 주로 텍스트를 표현하는 태그. 개행이 되지 않고 한 줄로 이어서 출력되는 특징. Inline-element

<p> : paaragraph의 줄임말. span 태그와 마찬가지로 텍스트를 표현하는대 주로 사용되는 태그이지만 개행이 일어나는 특징.

<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">div 태그?</a>

<a> : 클릭하면 화면이 이동하는 역할. 주로 href 속성(attribute)에 이동할 주소를 입력해주는 형식으로 사용된다. Target 속성에 _blank 값을 넣어주면 새창으로 주소가 열린다.

<div> : Division의 줄임말. 특별한 기능 없이 용도별 그룹 짓기, 레이아웃 분리, id나 class 속성을 활용한 css 적용 등에 활용.

HTML의 속성

Id : 각 태그에 이름을 붙여주는 태그. Id 값은 중복 없이 오로지 하나만 허용

Class : id와 비슷한 역할이지만 중복된 이름을 사용할 수 있음.

하나의 태그에 여러개의 속성을 넣을 수 있으며 한칸 띄워쓴 후 추가하면 됨. 

CSS

HTML 태그에 디자인을 입혀주는 역할

CSS를 적용하는 3가지 방법 : 태그 안에 직접 작성하는 인라인 스타일, html 파일 내에 <style> 안에 css 를 넣어주는 방법, css 파일에 따로 작성하는 방법.

내용과 디자인을 분리하기 위해 css 파일을 따로 작성하는 방법이 유리.
 
Html 파일에 css 파일을 추가하기 위한 태그

Ex) <link href="index.css" rel="stylesheet" type="text/css" />

Link : css 파일을 html 파일에 링크
Href : css 파일의 경로를 설정
Type : link 태그로 연결되는 파일이 어떤 것인지 알려주는 역할.
Rel : html 파일과 css 파일이 어떤 관계인지 설명하는 역할.

css의 기본적인 구조

Ex)
p {
  font-size: 12px;
}

P : 선택자(selector)
Font-size : 속성(property)
12px : 속성값(property value)

Class : 클래스는 선택자 앞에 .을 추가

id: 아이디는 선택자 앞에 #을 추가


Font style

Font-family : 글꼴을 지정하는 속성으로 브라우저가 지원하는 폰트부터 차례대로 적용된다. 

Font-size : 폰트의 사이즈를 지정하는 속성으로 단위는 px, em, pt 등 이 있다.

Font-weight : 폰트의 두께를 설정하는 속성으로 normal=400, bold=700이다.

Font-style : 폰트 스타일을 변경하는 속성. 주로 이탤릭체를 쓸 때 사용된다. Italic

Color : 폰트의 색을 변경한다. 색상값은 크게 16진수로 표현하는 hex, 레드그린블루 값으로 표현하는 rgb, 색상 채도 명도로 표현하는 hsl 등 이 있다.

문구 스타일

text-align : 텍스트 정렬에 사용하는 속성, 속성값은 left, center, right가 있다. Span 태그는 inline-element 이기 때문에 오른쪽 정렬을 하여도 변화가 없다.

Text-ident : 들여쓰기 속성

<Block quote> : 인용구문에 사용하는 태그로 양쪽 여백이 자동으로 들어간다.

공백을 추가할 때 : &nbsp; 를 사용한다.

margin과 padding

Margin : border의 외부 여백
Padding : border와 요소 사이의 공간

속성값을 하나만 넣으면 4방향 모두 일괄된 값이 들어가지만 top, right, bottom, left 순으로 각각 다른 값을 넣을 수도 있다.

Border : 두께 선스타일 색 순서대로 설정한다. Text-decoration: underline; 으로 밑줄을 만들 경우 세세한 커스터마이징이 어렵기 때문에 border-bottom을 이용하여 밑줄을 만드는게 유리하다.

Box-sizing : width 값을 설정한 후 padding 값을 넣었을 때 원래 생각했던 너비와 달라지는 현상을 방지하기 위해 box-sizing: border-box;를 넣어준다. 모든 태그에 적용하기 위해서는 *셀렉터를 사용한다.

상속, 그룹

상속 : 부모 그룹의 속성 값은 자식 그룹에게 그대로 적용된다. 자식 그룹에 부모 그룹의 속성과 동일한 속성값을 가지고 있으면 자신이 가진 고유 값으로 대체된다.

그룹 : 원하는 셀렉터들에 한꺼번에 스타일을 지정할 수 있다.

셀렉터와 우선순위

셀렉터의 조합 : class나 id가 셀렉터일 경우 태그와 결합 가능, 붙여 쓸 경우 a 이면서 b인 셀렉터가 된다. 띄어 쓸 경우 후자는 전자의 하위 목록이 된다.

셀렉터의 우선 순위 : 태그<class<id<inline css

이미지 태그

Ex) <img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

Alt : 이미지를 불러오는데 실패했을 경우 출력되는 텍스트

Src : 이미지의 경로

Background-image : css에서 배경 이미지를 추가하는 속성

css의 속성값을 이용해 이미지를 추가할 경우 태그의 영역에 이미지를 보여주기 때문에 태그의 영역 크기를 따로 설정해주는 것이 유리. 다만 원본 이미지를 보여주는 영역만 조절되기 때문에 background-size: 100% 속성값을 이용하여 영역 크기에 맞게 원본 이미지 크기도 수정되게 가능함.

Block vs Inline

Block : 요소의 양옆이 폐쇄
Inline : 요소의 양옆이 개방

Display : block, inline 속성들을 변경할 수 잇으면 none 속성값을 이용해 요소를 숨길 수도 있다.

레이아웃

Block 요소일 때 width 값을 주면 양옆이 개방된다. 이 때 margin 속성에 auto 값을 주게 되면 중앙으로 정렬 된다. 이때 브라우저 창이 엘리먼트 너비보다 좁아지면 문제가 발생. Width 대신 max-width를 사용하면 작은 창, 특히 모바일 환경에서 유리해진다.

Margin 속성 값에 2개의 값을 주게 되면 각각 위,아래 값과 좌우 값을 나타낸다.

리스트

<li> : ol이나 ul 태그 내에 리스트 목록들을 나타내는 태그

<ol> : ordered list의 약자로 리스트들에 자동으로 숫자를 붙여준다.

<ul> : unordered list의 약자로 리스트들에 조그맣게 원을 붙여준다.

List-style : none 속성값으로 리스트에 자동으로 붙는 숫자나 원을 제거해준다.

리스트 선택자

First-child : 첫번째 리스트
Last-child: 마지막 리스트
Nth-child(odd) : 홀수번 리스트
Nth-child(even) : 짝수번 리스트

테이블

행 다음 열 순서로 진행한다.

<tr> : table row의 약자로 행을 의미한다
<td> : table data의 약자로 열을 의미한다
<th> : table heading의 약자로 가운데 정렬, 볼드체로 변한다.

rowspan=“” : 행을 입력한 숫자만큼 병합한다.
colspan=“” : 열을 입력한 숫자만큼 병합한다.

Input : 사용자가 직접 텍스트를 입력할 수 있는 태그

Ex) <input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

Type : 속성값은 일반적인 텍스트인 text, 비밀번호 같은 비공개 입력값을 원하면 password, 숫자만 입력할 수 있도록 제한하려면 number 으로 나뉜다.

Placeholder :  초기에 입력값이 없을 시 도움말로 보여지는 텍스트

Textarea : 주로 방명록이나 댓글 등을 입력할 때 약간 긴 텍스트를 입력받는 태그

Value : 초기 입력값을 지정하고 싶을 때 사용하는 속성

Input, texture, button 모두 inline element 이기 때문에 각각 <div> 태그로 감싸는게 유리

입력창의 크기를 통일하고자 할때는 부모 태그에 width 값을 주고 자식 태그에 width 100%로 설정하면 유리하다.

Placeholder 선택자 : 속성값을 선택자로 불러오기 위해 ::를 사용한다.

Input 타입별 선택자 : input[type=""] 를 사용하여 선택한다.

버튼 이벤트 : 버튼에 마우스 커서를 올렸을 때 이벤트를 선택하려면 :hover를 사용한다.

Cursor : pointer 외 다양한 커서 모양이 있다.

Position

Static : 디폴트 위치

Relative : top, right, bottom, left 프로퍼티와 함께 사용될 때 디폴트 위치에서 속성값 만큼 이동한다.

absolute : 특정 부모 위치를 절대적인 기준으로 이동한다. 기준을 잡고 싶은 부모에게 static을 제외한 relative 등의 프로퍼티를 부여하여 위치를 지정하면 절대적인 기준이 된다. 기준이 되는 부모가 없을 경우 엘리먼트를 빠져나와 문서 본문이 기준이 된다.

fixed : 스크롤을 따라서 언제나 화면에 고정되어 움직이는 포지션.

rgba(45,45,45,0.95) : 투명도값까지 포함된 rgba 속성값

포지션 속성값을 비율로 설정할 경우 부모의 크기 비율에 맞춰서 이동.

Float 기반 레이아웃

Float : 주로 이미지 주변을 텍스트로 감싸기 위한 프로퍼티.  이미지가 컨테이너를 뚫고 나오는 등의 문제가 발생한다면 부모 태그에 overflow: hidden; 속성을 추가해준다.






0개의 댓글