(TIL 1일차) HTML+CSS

빡기·2020년 2월 11일
0

TIL(Today I Learned)

목록 보기
1/43

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에서 사용도가 높은 태그

Tag 정리 사이트 참조!!!!

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;
	}
}
profile
Front End. Dev

0개의 댓글