웹 사이트 제작시 고려사항
- 웹 표준 : 웹에서 요구하는 공식 표준이나 기술 규격을 만족하는지 여부
- 웹 접근성 : 장애 여부와 상관 없이 모두가 웹 사이트를 이용할 수 있는지 여부
- 크로스 브라우징 : 모든 브라우저와 기기에서 웹사이트가 제대로 작동하는지 여부
HTML
html 문서 구조
<!DOCTYPE html> - html5로 문서 선언
<html>
<head> - 요약 정보로 웹에 노출되지 않는다
<meta charset="UTF-8"> - 모든 문자를 웹에서 깨짐없이 표현
<title>title</title>
</head>
<body>
</body>
</html>
기본 태그
image 태그
<img src="...png" alt="텍스트">alt 속성은 웹 접근성을 고려하는 옵션으로, 시각장애인들이 사용하는 스크린 리더 프로그램에서 읽힌다.
h 태그
<h1> 태그는 가장 중요한 정보만 담으며, 하나의 html 문서에서 한 번만 사용하자.
p 태그
Paragraph의 약자로 본문을 담는다.
ol / ul 태그
ol은 Ordered list, ul은 Unordered list의 약자로 나열할 때 사용하며 <li> 태그를 자식으로 사용한다.
구조 태그 (비 필수적)
header 태그
웹 사이트의 머리글을 담으며 일반적으로 nav태그를 담는다.
nav 태그
navigation을 담는 태그이다. <ul>, <li>, <a>와 함께 사용함이 일반적
main 태그
메인 영역을 담는 태그, 반드시 <main role="main"> 형태로 명시해야함. 익스플로러에서 지원하지 않기 때문
article 태그
문서의 주요 이미지, 텍스트 등을 정보를 담는 태그
반드시 <h#></h#> 태그가 존재해야한다.
footer 태그
웹 사이트의 가장 하단에 들어가는 정보를 표기할 때 사용
CSS
캐스케이딩
CSS의 우선순위를 결정 짓는 요소를 의미하며 순서, 디테일, 선택자가 있다.
순서 : 나중에 작성한 CSS가 우선순위
디테일 : 더 구체적으로 작성된 CSS가 우선순위
선택자 : style > id > class > type 순으로 우선순위
Inline
span 태그가 대표적이다. 내부 컨텐츠 만큼 크기를 점유하고 수평 배치가 가능하다.
width와 height를 적용할 수 없고 margin / padding-top & bottom이 적용 불가능하다.
line-height로 감싸고 있는 태그의 전체 크기에 적용되는 height를 사용할 수 있다.
자식으로 inline 태그만 가질 수 있다.
Block
div 태그가 대표적이다. 가로로 한 줄을 차지하는 태그로 수직 순차 배치가 가능하다.
자식으로 inline 및 block 태그 모두 가질 수 있지만 <p> 태그는 inline 태그만 자식으로 가질 수 있다.
Inline-block
block 속성을 지니고 있으면서 width와 height를 적용할 수 있다.
배치
//요소를 왼쪽으로 배치
Float: left;
//해당 요소를 float 요소로부터 독립되게 배치
clear: both;Float 속성으로 요소들을 자연스럽게 배치할 수 있다. 글로 하는 설명보다 그림을 보면 쉽게 이해할 수 있다.
플로팅(float) 레이아웃과 clear 속성
레이아웃 디자인 - Floating 뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float , clear 속성에 대해 알아보겠습니다. 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)을
webclub.tistory.com
레이아웃
레이아웃에서 가장 많이 쓰이는 것이 아래의 두 가지이다.
Grid는 쉽게 말해 격자 형태의 레이아웃으로 레이아웃에서 가로와 세로의 규격을 정해놓고 내부를 배치한다.
Flex는 1차원의 레이아웃으로 가로로 배치하거나 세로로 배치하는 형태를 갖출 수 있다.
Grid Layout
#grid{
display: grid;
//column을 형성한다.
grid-template-columns: 200px 200px 500px; //정해진 크기대로
grid-template-columns: repeat(5, 1fr); //1의 비율로 5개의 column
//최소 16%의 너비에서 최대 1fr(비율)의 너비까지를 가질 수 있다.
//공간이 남으면 auto-fill에 따라 공간을 요소로 채운다.
grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
//공간이 남으면 auto-fit에 따라 요소를 늘린다.
grid-template-columns: repeat(auto-fill, minmax(16%, 20%));
//row를 형성한다.
grid-template-rows: 1fr 1fr; //1의 비율로 균일하게 row를 생성한다.
//column과 row간 간격을 형성한다
grid-gap: 24px;
}
Flex Layout
#flex{
display: flex;
//세로 배치 레이아웃 형성
flex-direction: column;
//가로 배치 레이아웃 형성
flex-direction: row;
//가로 정렬
justify-content: space-between;
//세로 정렬
align-items: center;
}간단하게 정리했지만, 레이아웃에 관해서는 코딩을 통해 여러가지를 시도해보면서 더 깊은 이해가 필요하다!
Transform
transform 속성으로 요소를 회전하거나 확대, 이동, 비틀기 등을 할 수 있다.
#transform{
transform: rotate(45deg) //45도 회전
transform: scale(2,3) //가로로 2배, 세로로 3배 확대
transform: translate(100px, 200px) //가로로 100px, 세로로 200px 이동
transform: skew(10deg, 20deg) //비틀기
Transition
요소에 특정한 이벤트가 동작해 속성이 변경되었을 때 발동되는 애니메이션이다.
#transition {
transition-property : width; //width 옵션에만 적용한다.
transition-duration : 2s; //2초간 지속된다.
transition-timing-function : linear; //애니메이션의 방식
transition-delay: 1s; //1초 후 발동된다.
//또는 한줄로 정리 가능하다. duration이 delay보다 앞에 와야한다.
transition: all 2s linear 1s;
}
Animation
특별한 이벤트 없이도 곧바로 발동되는 애니메이션이다. keyframes로 디테일하게 애니메이션을 조절할 수 있다. 또한, 무한 반복도 가능하다.
#Animation{
//keyframes를 삽입
animation-name : changeWidth;
animation-duration : 3s;
animation-timing-function : linear;
animation-delay : 1s; //렌더링 후 1초 후 시작
animation-iteration-count : 6; //6번 반복, infinite로 무한 반복 가능
//alternate는 애니메이션 진행 방향을 새로운 애니메이션 마다 변경한다.
//즉, 날아오는 애니메이션이 진행되었다면 그 이후에 왔던 방향으로 다시 날아가게 된다.
animation-direction:alternate;
}
@keyframes changeWidth {
//width 크기를 늘인다
from {width:300px;}
to {width: 600px;}
//아래와 같이 percent로도 표현 가능하다
0% {width:300px;}
100% {width:600px;}
}
반응형을 위한 Media Query
<meta name=“viewport” content = “width:device-width, initial-scale=1.0”>반응형을 위해 반드시 위의 태그를 html <head>내에 입력해주자. 기본 width를 장치에 맞추고 확대 비율을 1로 고정한다는 의미이다.
#box{
width: 200px;
}
@media (min-width:320px) and (max-width:640px){
#box{
width: 100px;
}
}위와 같이 명시해주면 기기의 width가 320px ~ 640px 사이라면 내부에 명시된 요소의 속성으로 기존 속성이 덮어지게 된다.
Position
position: fixed;
//좌표에 따라 위치를 고정한다. 주로 floating button에 사용한다.
top: 0; //top, left, right, bottom과 함께 사용
//div의 width가 100%이 아니게 된다.
position: relative;
//position: static인 상위 요소를 기준으로 한다.
//마찬가지로 top, left, right, bottom과 함께 사용
position: absolute;
//position: static이 아닌 상위 요소를 기준으로 한다.
//마찬가지로 top, left, right, bottom과 함께 사용
//div의 width가 100%이 아니게 된다.태그들의 위치를 결정하는 속성이다.
'React > CSS&HTML' 카테고리의 다른 글
| [CSS] scroll 영역의 크기를 100%로 만드는 방법 (1) | 2021.11.19 |
|---|---|
| [React] SASS 기초 문법 (0) | 2021.08.29 |