HTML(Hyper Text Markup Language)란?
- 웹 페이지를 만들기 위한 언어
- 다양한 태그들로 구성 (a, span, div, header, body)
- 브라우저가 태그 및 속성들을 이해하고 사용자에게 보여줌
Tag 간단 정리
<!DOCTYPE> - HTML을 나타내는 태그, 제일 첫줄에 위치, HTML 5버전 사용 의미
<head> - 사이트의 제목, 부가 설명 등 meta, title이 들어감
<body> - HTML의 본문 역할, 화면에 보여지는 내용
<h1>,<h2> - 중요 내용 글씨 크기 설정
<span> - 한 줄로 나오는 텍스트, 개행 x
<p> - 한 단락으로 구성, 개행 o
<a> - 하이퍼 링크, 클릭시 사이트로 이동
<div> - html에서 사용도가 높은 태그Block Level Element vs inline Element
Block Level Element - div, form, p
- 기본적으로 개행이 이루어짐
- 한줄로 이루어지며 좌우 폭이 최대로 맞춰짐
inline Element - span, a, p
- 단락의 흐름을 방해하지 않음
- 개행이 이루어지지 않음
display, inline 속성을 이용하면 아래와 같이 수정 가능
block => inline
inline => block
CSS(Cascading Style Sheets)란?
-
HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할
-
끌꼴이나 배경 너비 및 위치를 조정하거나 뼈대를 꾸며주는 중요한 역할
브라우저별로 태그마다 기본 css가 있어 reset.css를 이용하면 브라우저 상관없이 초기조건인 0으로 시작 할 수 있다!!
- CSS 선택자
- HTML 안에 있는 원하는 요소에 효과를 주고 싶을 때 선택가능하게 해주는 것
All Selector(전체 선택자)
* {
margin: 0 0 0 5px
}
// 모든 요소를 선택할 시 사용Type Selector(타입 선택자)
<span>span태그</span>
// p, body, div 등 타입을 선택할 시 사용Class Selector(클래스 선택자)
<div class="hi"> exmaple </div>
.hi{
background-color: red;
}
// 보통 많은 요소들을 선택하고 스타일을 지정하고자 할 때 사용ID Selector(아이디 선택자)
<div id="hi2"> exmaple2 </div>
#id{
color:red;
}
// 고유한 id를 설정해 특정 요소(소수)를 선택하여 스타일 지정하고자 할 때 사용
- CSS 선택자 우선순위
tag << class << id << inline 속성
중복 선택자로 인해 속성이 겹치는 경우 위의 우선순위에 따라 css를 적용Font
font-family
font-family: Georgia, "Malgun Gothic", serif;- 폰트의 스타일을 지정하는 속성
- 왼쪽부터 브라우저가 폰트를 지원해주면 적용, 없으면 오른쪽으로 차례대로 넘어가면서 적용
font-style : italic(이탤릭체), normal, oblique(기울어짐 꼴)
- 폰트의 스타일(모양)을 지정하는 속성
font-weight : 폰트 굵기를 설정하는 속성
- 100 => light, 400=> normal, 700:blod, 900:bolder
margin과 padding
- margin : 테두리 밖의 영역의 거리를 지정하는 속성
- padding: 테두리 안의 영역의 거리를 지정하는 속성
- margin or padding : 0px 0px 5px 12px : 왼쪽부터 위쪽,오른쪽,아래쪽,왼쪽!!!
- auto를 이용하면 가운데 정렬 가능
border
- 기본적으로 테두리를 꾸미는 속성
- border : 1px solid black와 같이 크기 선스타일 선색상 적용
box-sizing
- border-box : 테두리를 기준으로 크기를 적용
- content-box : 콘텐츠를 기준으로 크기를 적용
table
<td>, <th>, <tr>, <thead>, <tbody> // 등 다양한 태그로 구성
<td> - 열, <tr> - 행, <thead> - 표 제목, <tbody> // 표 본문내용position
abolute, relative, fixed, static(안씀) 등 다양한 속성으로 구성
-
absolute : 절대적인 위치를 나타냄, 이것을 사용하려면 부모에게 relative,abolute,fixed 등 셋 중 하나 꼭 필요
-
relative: 상대적인 위치를 나타냄, 기본적으로 별 의미는 존재하지 않음
-
fixed : 상대적인 위치를 나타내고 스크롤을 해서 내려도 지정한 위치에 고정됨
float
-
이미지 주위를 텍스트로 감싸는 경우 사용
-
만약 2개의 div가 겹치는 경우 clear속성을 사용해 공간을 비워줘야 함
-
이미지 크기가 div보다 큰 경우 overflow:auto를 이용하여 크기를 맞춤
inline-block을 사용하는 이유?
- clear 속성을 사용하지 않아도 같은 효과를 냄
- 너비와 높이를 지정할 수 있음
media query
- 반응형 디자인을 위해 필요한 css 기능 (모바일 화면 크기 조정)
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
// 위와 같이 사용, 480px이하의 경우 font-size 적용- React의 .scss을 이용하여 변수를 이용해서 쉽게 관리하기
$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";
@media #{\$phone} {
.big-box {
display: none;
}
}
@media #{\$desktop} {
.big-box {
display: block;
}
}
Front End. Dev