[HTML, CSS] 기초 리뷰

소금·2021년 9월 2일

html

Chapter. HTML 기초

웹페이지를 구성하는 Markup 언어 / 구조를 표현하는 언어
<>로 시작하여 </>로 끝냄
tag들로 구성되어 있음

🌱 태그

<!DOCTYPE html> : html 문서라는 정보 제공
<html> </html> : html 문서 전체의 틀
<head> </head> : 문서의 메타데이터
<title> </title> : 문서의 제목
<body> </body> : 문서의 내용
<script> </script> : 문서의 자바스크립트
<h1> </h1> : 문서의 제목 태그 -- 폰트 사이즈
<div> </div> : 한 줄을 차지하는 컨테이너 블록 요소
<span> </span> : 컨텐츠만큼의 크기를 차지하는 컨테이너 인라인 요소
<img src = ""/> : src를 주소로하는 이미지
<a> </a> : 하이퍼링크를 요소에 추가하는 태그
<ul> </ul> : unordered list
<ol> </ol> : ordered list
<li> </li> : 위의 리스트 태그 안에서 한 줄의 태그
<input type="???"> : 요소를 input하는 태그
- text : 텍스트박스 ; placeholder 속성을 통해 텍스트박스의 초기값 설정
- radio : 라디오 체크박스, 중복체크 X ; name 속성을 통해 하나로 묶음
- checkbox : 체크박스, 중복체크 O ; checked 속성을 통해 초기 선택값 설정
- button : 버튼 ; <button> </button>으로도 입력
- submit : 입력한 폼의 제출 버튼

🌱 시멘틱 태그

태그의 이름으로 html에서 어떤 영역을 직관적으로 표시하는 태그 의미론적인 태그

<article> : 해당 문서에서 완전히 독립적으로 구성할 수 있는 요소
<asie> : 문서의 다른 콘텐츠와 약간 연관이 있지만 해당 컨텐츠와 분리시킬 수 있는 콘텐츠로 구성된 영역
<details> : 사용자가 직접 조작하여 보거나 숨길 수 있는 세부사항 명시
<figure> : 이미지나 사진과 같이 문서의 주요 흐름으로부터 독립적인 컨텐츠
<footer> : 문서나 특정 섹션의 footer를 정의
<header> : 문서나 특정 섹션의 header를 정의
<main> : 해당 문서의 <body>요소의 주 컨텐츠 정의
<mark> : 하이라이트 된 텍스트를 정의
<nav> : 네비게이션 링크들의 집합을 정의
<section> : 문서에 포함된 독립적인 섹션을 정의
<summary> : <details> 요소에 의해 생성되는 대화형 위젯에서 보이는 제목을 정의
<time> : 사용자가 읽을 수 있는 형태의 날짜와 시간 데이터 정의

Chapter. CSS 기초

🌵 CSS

Cascading Style Sheets, 웹페이지 구성 요소의 스타일을 정의하는 언어
컨텐츠의 배치와 위치 - 레이아웃 디자인
가독성을 위한 타이포그래피

인라인 요소로 스타일 지정 : <span style="color : red">Chocolate</span>
HTML 내부에서 스타일시트로 작성 : <style> </style> ; 보통 <head> 안에 작성
HTML 외부에서 스타일시트 import : <link rel ="stylesheet" type="text/css" href="index.css">

🌵 CSS 문법 구성

body{ //selector 선택자
  color:red; // 속성명 : 속성값
  font-size:18px;
}

🌵 셀렉터

태그에 id 또는 class 속성을 할당하여 스타일 지정
css 스타일 시트에서 #id .class 로 선택한 후 {}안에서 스타일 코드 작성
id는 문서 내에 한 id당 한 개씩만 존재할 수 있음
반면 class는 여러개 지정할 수 있어 해당하는 모든 class 요소에 스타일을 적용가능

🌵 레이아웃

width : 컨텐츠의 가로 길이
height : 컨텐츠의 세로 길이
border : 컨텐츠의 테두리 선
padding : 컨텐츠 내부에서 컨텐츠와 테두리 사이 공간
margin : 컨텐츠 외부에서 테두리와 해당 섹션 사이 공간
* margin: 10px 20px 30px 40px - 상 우 하 좌

🌵 Position

static : 정적인 위치 - 초기값
차례대로 좌 > 우, 상 > 하 순서로 쌓임
relative : 상대적인 위치
해당 태그가 static 이었을 때 기준으로
top right bottom left 방향으로 주어진 픽셀만큼 이동
fixed : 고정됨, 페이지가 스크롤 되더라도 항상 고정된 위치
absolute : 페이지 스크롤과 함께 이동, relative 기준 절대적 위치
static 속성을 가지고 있지 않은 부모를 기준으로 이동
만약 그런 부모가 없다면 (?) 가장 상위 태그인 <body> 기준
sticky : 스크롤 위치에 따라 relative, fixed 뷰포트를 기준 배치 및 스크롤 되면 고정

🌵 Box-sizing

content-box : 기본 css 박스 크기 결정법을 사용하며,
만일 컨텐츠의 너비가 100px인 경우
100px + 테두리 + 안쪽 여백의 크기 = 요소의 크기
border-box : 테두리와 안쪽 여백의 크기도 요소의 크기가 됨
만일 컨텐츠의 너비가 100px인 경우
컨텐츠 + 테두리 + 안쪽 여백의 크기 = 100px
// 컨텐츠 영역이 줄어들어 총 너비를 100px로 유지 = 직관적임

🌵 z-index

레이아웃의 z축 순서를 지정, 큰 값을 가진 요소가 가장 위에 존재함

🌵 float

정렬하기 위에 사용되는 속성
텍스트 및 인라인 요소가 그 주변을 감싸는 컨테이너의 좌우측을 따라 배치됨

none : 띄우지 않음 - 기본값
left : 왼쪽에 띄움
right : 오른쪽에 띄움

🌵 display

속성을 블록과 인라인 요소 중 어느 쪽으로 처리할 때 사용되고,
또한 자식 요소를 배치할 때 사용할 레이아웃을 설정

none : 보이지 않음 & 영역 차지 x
block : 블록 박스, 한 영역을 차지하는 박스형태를 가지는 성질
기본적으로 width값이 100%이며 라인이 새로 추가됨
ex ) <div> , <p>
inline : 인라인 박스, 주로 텍스트를 주입할 때 사용됨
컨텐츠 영역만큼 width 및 height이 잡히고 라인이 추가 되지않음
ex ) <span>
inline-block : inline의 특징과 block의 특징을 모두 가짐,
줄바꿈이 없고 width와 height을 지정 가능하나, 지정하지 않을 시 컨텐츠 만큼 영역 차지

🌵 flex

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해
크기를 키우거나 줄이는 방법을 지정하며,
flex: flex-grow, flex-shrink, flex-basis
과 같은 방식으로 지정할 수 있음

🌵 text

색상 : color
글꼴 : font-family
크기 : font-size
굵기 : font-weight
밑줄, 가로줄 : text-decoration
자간 : letter-spacing
행간 : line-height
정렬 : text-align = left, right, center, justify

🌵 단위

절대 단위 : 기기나 브라우저 사이즈같은 환경에 영향을 받지않는 절대적인 크기
- pt font 사이즈
- px pixel 사이즈
상대 단위 : 반응형 웹에서 기준점을 만들 때 사용
- em 부모 엘리먼트에 상대적인 크기
- rem 최상위 엘리먼트에 상대적인 크기
- vw 뷰포트의 너비에 상대적인 크기
- vh 뷰포트의 높이에 상대적인 크기
- % 부모 엘리먼트에 따라 퍼센트로 차지하는 크기