HTML >
*제목, 문단
-문단
-제목
h1
~
h6
강조
링크
이미지
alt는 이미지가 안뜰시,
설명을 해줌
목록
-
- {
box-sizing: border-box;
}
정의 리스트
</dd>자주쓰는 태그
form /
input /
label
<label for="user-id">아이디</label>
<input id="user-id" type="text" placeholder="아이디를 입력하세요" maxlength="13" require value="Tomson" /> 입력
*type은
-text / email / password / number / tel / file
radio /
-maxlength 최대입력 길이
-require 는 무조건 입력해야하는 창이다라는뜻.
-value 초기값 혹은 값
<label for="user-file">첨부 파일</label>
<input id="user-file" type="file" accept=".png, .jpg" />
-accept는 허용 하는 확장자
<label for="구독중">구독중</label>
<input type="radio" name="subscription" value="구독중" id="구독중" />
<label for="비구독">미구독</label>
<input type="radio" name="subscription" value="비구독" id="비구독" />
*레디오 타입 / 체크박스 타입일떄, (갯수가 여러개든 뭐든,,)일떄,
name은 다같게 하고,
value는 다르게 해야
서버에서 알아먹음.
<button type="submit">submit</button>form
select
Skill HTML CSS JS submit*textarea
자기소개 글쓰기
버튼
type은
-button 버튼
-submit 서버로 제출
-reset 작성했던 폼에있는거 리셋할떄 잘안씀
테이블
| 테이블 헤더 | 테이블 데이터 |
|---|---|
| 테이블 바디 | 테이블 데이터 |
| 테이블 풋 | 테이블 데이터 |
예>
| 월 | 화 | 수 | 목 | 금 | |
| 1교시 | 왕초보 HTML & CSS | 모각코 | 왕초보 HTML & CSS | 모각코 | 왕초보 HTML & CSS |
| 2교시 | Javascript 스킬업 | Javascript 스킬업 | |||
| 3교시 | Javascript 시작반 | Javascript 시작반 | Javascript 시작반 | ||
| 점심시간 | |||||
| 테이블 풋 | 테이블 데이터 |
===================================
미디어
기타
abbr
ADHD
console.log("hello");
============================================================
=======================================================
CSS
width
height
padding
border
margin
display:
block 면, 영역, 잡기, 길막, 부모영역 사이즈 만큼 차지, 나머진 마진으로채움
블락으로 좌우 영역 잡으려면,
일단, 부모영역안에서, 자식 블락을 잡으면,
중간 위치하려면, margin: 0 auto; 하면 중간이 되고,
즉, 이거는 margin-left: auto; margin-right: auto; 라는 뜻임
왼쪽 가려면,
margin-left; auto;
오른쪽은
margin-right; auto;
--
lnline 선, 흐름, 흐른다, 영역 없을시 줄바꿈함, 일반글쓸떄처럼 똑같음,
인라인은, width, height, padding-top,bottom border-top,bottom, margin-top,bottom
이거 는 사용하면 이상하게됨. 사용안하는게 낫다. 레프트 라이트는 됨.
참고로 블락은 다됨.
--
lnlineBlock 일단 옆으로 나열 가능하고,
width 값이 잘 적용이 된다.
즉, 위에 말한,
width, height, padding-top,bottom border-top,bottom, margin-top,bottom
요것들이 다 잘 적용이 된다는 말임.
--
flex
*Float
플롯은,
보통
태그에
display:block;
일떄,
위에 덮어서 위치하고 싶을떄, 쓴다.
플롯을 먹이면,
블락으로 된다.
플롯은
다음에 정리...
*position
포지션은,
요소를 원하는 위치에 자유롭게 위치시킬때 사용하는데,
static
relative
absolute
fixed
sticky
이렇게 있는데,
포지션 쓸떄,
저위 중(type 중에,,)에 하나를 쓸떄,
무슨 기준으로 쓰는지만 알면 된다.
static은 기본값이고,
relative는 , 자기자신이 원래 있던 자리가 기준점임.
즉, 자기있던 자리에서, 붕뜨게되고 그렇지만 레이아웃은 유지된다 자기자리는 인식을 계속함,
여튼, 그 자리에서 왔다갔다 하는거다.
그래서,
top:20px;
left:20;
하면 그자리서 위로, 왼쪽으로 20px 가는것이다.
아무튼 그렇게 위치를 이동시키면 된다.
absolute는,
쓰면,
붕띄워지는데, 주위 요소들에 영향을 줘서,
레이아웃은 망가진다.
그리고 block으로 바뀜.
즉,width height margin 다 적용은 시킬수 있다.
근데 기본적으로 margin은 안생긴다.
적용시켜야 마진이 생김.
레이아웃은 어떻게 망가지냐면,
집을 나갔다고 생각해서,
부모 사이즈도 같이 줄어든다.
물런 옆 요소도 같이 쏙 들어가 버림.
그러면 애초에
레이아웃을 짤떄,
포지션 먹일 애는,
상관없는 애로 만들어버린다음,
작업하면 편하겠죠.
그리고 중요한거는,
어떤 기준으로
위치 시키냐면,
부모중에,
position:relative 혹은, absolute, fixed, sticky인요소
가 먹인 가까운 부모에 달라붙는다.
즉, static 제외하고, 그외 것에 달라붙는다는 말임.
즉,
그 요소중 static제외한 포지션에 해당 요소에
top: 0
left: 0
하거나
암튼
0 0 을 기준으로 달라붙고,
이동을 더 시키려면,
숫자를 늘리거나 줄여가면 됨.
fixed
픽스드는
자신의 기준점이 명확하다.
viewport사이즈를 기준으로 한다.
뷰포트는 브라우져 전체 창의 크기를 뷰포트라 고한다.
position: fixed;
top:0;
계속 위에 고정된 상태로 있다,
스크롤해도 똑같음.
position 쓸떄는 보았다 시피,
top
bottom
left
right
로 이동을 기본적으로 시킴.
근데,
쓸떄,
top bottom 중 하나만 쓰고,
left right 중 하나만 쓰는게
정신건강에 좋다.
즉,
top left 쓰든,
bottom right쓰든,
이렇게 하지
top bottom 같이 쓰지말고,
left right 같이 쓰지말라는거임.
position 쓸때,
z-index 도 쓰는데,
수직 방향 설정할때 씀.
즉,
포지션을 쓰면, 뭐 static제외하고,
어차피 다 붕뜨는데,
붕뜨는것도 레이어를 넣을 수 있다.
z-index 쓰면,
누가 가장 밑에 깔릴지
위에 뜰지 그 높낮이를 설정하는거다.
겹쳐야 할떄
쓰는 용도다.
요소에
position:relative
z-index:0
z-index:3
이런식으로 하면 됨.
*flex
display:flex
인데,
일단 정렬하고자하는 해당 요소의 부모한테
display:flex
먹이면 되고,
먼저,
가로 인지 세로 인지 설정하고,
flex-direction: row or column;
한줄에 정렬할껀지, 여러줄 정렬 할지 설정하고,
flex-wrap: nowrap;
노 랩은 감싸지 안겠다 는 뜻이다.
즉, 한줄로 배치하고싶으면,
강제로 요소들이 사이즈가 알아서 줄어든다.
알아서 마치 반응형?처럼은 아니더라도,여튼
크기는 줄어든다.
근데,
아니면,
사이즈 변경하지않고,
걍 밑으로 떨구더라도
정렬하고싶으면,
flex-wrap: wrap;
하면된다.
그리고
세로축 정렬은,
중간 정렬은
flex-direction:
row 일떄는,
justify-content: center;
하면되고,
justify-content: flex-start;
왼쪽정렬
justify-content: flex-end;
오른쪽정렬
그리고
띄엄띄엄 정렬하려면,
justify-content: space-between;
등등 있다.
flex-direction:
column
일때는,
똑같이 저스티파이 컨텐츠 쓰면된다.
그리고
가로축 정렬은
요소전체를
중간정렬하고싶으면
align-items:center;
쓰면되고,
flex-start
flex-end
등등 으로
근데 젤 중요한건,
이런걸 다 쓰려면,
즉,
align-content 를 쓰려면,
flex-wrap:wap 이 되어야 한다.
꼭 기억해라.
해깔리면,
선 align-items 써보고,
안되면,
후 align-content
써봐라.
더 좋은 기능이 있다.
order 라는건데,
순서대로 정렬을 시켜준다.
order: 1;
order: 2;
order: 3;
========================================
반응형 웹
미디어 쿼리
일단
쓰려면 설정되어야 할꺼는,
html head 에 meta 설정,
즉,
viewport meta 설정이 되있어야하고,
그리고,
css에
media query
코드를 작성하면 된다.
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 768px)
and (max-width: 991px) {
}
css 에서
크기 단위는,
vh 는
viewport height 라는뜻임.
1vh = 뷰포트 기준에서 1% 차지한다는 뜻임.
즉,
height: 100vh;
하면 뷰포트 기준으로 100퍼센트 다 차지하겠다는 뜻임.
vw 는
viewport width 임.
css 가상요소>>
자주 쓰임
css에서 가상으로 만드는 요소임.
선택자에 추가하는 키워드고,
선택한 요소에 스타일을 설정해주는것.
기본적으로 :: 으로 설정해줌
html 을 안건드리고 하는거임.
div::before {
하면 디브요소 앞쪽에 새컨텐츠 추가
}
div::after {
하면 디브요소 뒤쪽에 새컨텐츠 추가
}
"::before", "::after" 2개만 새 컨텐츠를 추가하는 가상 요소이고,
나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상 요소입니다.
::before 요소 내용 앞쪽에 새 컨텐츠를 추가.
::after 요소 내용 끝에 새 컨텐츠를 추가.
::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.
::marker 목록 아이템 앞에 붙는 마커를 선택.
::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택.
::first-line 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택.
예>
.box::after {
content: '';
}
*CSS 글자 폰트 관련 스타일링
font-size:24px;
폰트 단위 :
-px 절대단위
-em
(상대단위 비례값
즉,어떤 값을 기준으로 바뀜)
em은 실제 적용된 폰트사이즈 로 적용되는거임.
즉, 24px 이면 1em = 24px 이 되는거임.
그럼, 20em 이면,
20*24 = 480px 이 되는것임.
em 은 잘 안씀.!!!!!!!!!
-rem
(상대단위 비례값
즉,어떤 값을 기준으로 바뀜)
rem 은
html 에 적용된 폰트 사이즈를
1rem으로 본다는것임.
html {
font-size:20px;
}
이렇게 줫으면,
p {
font-size: 3rem;
}
하면
3rem 은 20px * 3 = 60px 이 되는것임.
line-height
줄의 높이
즉, 줄 간격
보통 수직 정렬할때,
많이 사용함.
여기서도,
px em rem 쓰는데,
주로 em 을 많이씀,
왜냐면,
적용된 폰트 사이즈에 비례해
높이를 적용하는게 편함.
line-height: 30px;
이렇게 해도되고,
line-height : 1.5;
뒤에 아무것도 안적어도
즉 생략이 가능함.
자동 em이 적용됨.
.text {
font-size: 16px;
line-height: 1.5;
}
글자 사이에 자간 조정
글자 사이 간격 조정할때 씀.
.text {
font-size: 16px;
line-height: 1.5;
letter-spacing: -.03em;
}
폰트 서체 나열할떄,
.body {
font-family:
}
폰트 적용임.
폰트 굵기
font-weight
font-weight:400;
이거는 199 단위로 적용됨.
글자 색
color
hex
rgb
rgba
텍스트를 정렬할때 씀.
text-align
left
right
center
text-align : center;
텍스트 들여쓰기
text-indent : 100px;
앞 문장 글자에 들여쓰기 적용됨.
text-transform
한글 중국어 등은 해당안되고,
알파벳 베이스 언어만 적용됨.
none
capitalize
uppercase
lowercase
모든 앞단어
대문자
소문자
모든단어 소문자
이런거 설정임.
text-decoration
none
underline 글자밑줄
line-through 글자중간 줄
overline 글자 위에 줄
a {
text-decoration:none;
color: black;
}
font-style
italic
oblique
================================
background 설정
-background-color
-background-image: url('/')
-background-position: center center;
-background-size: auto 80%;
-background-repeat: no-repeat;
-background: url('') auto 80% no-repeat center center
================================
트랜지션
transition
전환
요소의 속성값 바꿀떄,
암튼, 뭔가 변화가 감지될떄?
즉, 거의 애니메이션 줬을떄,
(근데 애니메이션에서는 에니메이션대로 따로 설정할수도있음.)
여튼,
자연스럽게 바뀌게 해주는 설정을 하는게 트랜지션임.
즉,
"스르륵" 이 트랜지션임.
-property 속성명시
-duration 지속시간 ms / s
-[timing-funtion] 변화속도 설정 (생략가능)
ease-in / ease-out / ease-in-out / cubic-bezier() https://cubic-bezier.com/#.17,.67,.83,.67
-[delay] 지연 / 즉, 몇초후에 트랜지션 일어남
예시>
.box {
transition: font-size 2500ms;
transition: all 2500ms;
transition: all 2500ms ease-in-out;
transition: all 2500ms cubic-bezier(0,1.93,1,-0.72);
transition: all 2500ms cubic-bezier(0,1.93,1,-0.72) 1000ms;
개별적으로 따로 설정
transition: font-size 1000ms ease-in-out,
background-color 2000ms cubic-bezier(0,1.93,1,-0.72) 1000ms;
}
애니메이션
animation
--
animation-name: 애니메이션 이름을 적어야하는데,
@keyframes
애니메이션줄때, 젤 중요한거, 키프레임 사용해서,
어떤 애니메이션을 줄지 정의 해야함.
이름은 키프레임 이름을 적는다는것임.
예>
@keyframes name {
from {
}
to {
}}
혹은,
@keyframes name {
0% {
}
50% {
}
100% {
}}
예시,
.box {
position: relative; 여기 포지션 relative먹이고, 위치 설정은 아래 키프레임에서함.
width: 300px;
height: 300px;
background-color: #0066ff; 디폴트 컬러로 여기 선언해주는 이유는, 애니메이션이 끝나면 밑에 컬러가 사라지기떄매, 애니메이션 효과가 끝나도 디폴트컬러는 적용되라고 적어주는거임.
animation-name: move-box; 키프레임 이름 여기다 적음.
animation-duration: 2000ms; 애니메이션 지속시간.
animation-timing-funtion: ease-in-out;
animation-delay; 1000ms; 1초후 실행됨.
animation-iteration-count: 3; 3번 반복됨.
animation-iteration-count: infinite; 무한 반복됨.
animation-direction: alternate; 애니메이션 움직임 방향이, 번갈아 진행.
}
@keyframes move-box {
from {
top: 0; 여기 포지션 시작 위치적고,
background-color: #0066ff;
}
to {
top: 300px; 여기 포지션 최종위치적고.
background-color: #ff4949;
}}
=====================================================
ETC.
box shadow
google 에
box shadow 검색해서 소스 찾아서 쓰면됨.
.box {
box-shadow: 0 10px 1y6px 0 rgba(255, 73, 73, 0.35);
}
투명도
opacity: 1;
overflow
어떤 크기,
width height 값을 가지는 요소나 그 자손들이
크기에서 벗어낫을떄,
커버치기위해 쓰는 것이다.
넘처 흘렀을때, 어떻게 할지 설정해주는것.
visible 기본값 , 보여줘라, 내비두는거
auto 알아서~
scroll 옆에 스크롤바가 생김.
hidden 숨기기 / 가려버림
예>
overflow-x: scroll;
overflow-y:hidden;
transform
트랜스폼
변형하다.
주로,
position: absolute 할떄,
가운데 배치 할떄 주로 씀.
보통
transform:
translate(x, y)
포지션 앱솔루트 가운데 베치할떄 씀.
scale()
rotate()
3개정도 많이 씀.
position: absolute 할떄,
추가설명하자면,
앱솔루트일떄는, 기본적으로 붕 뜨는데,
그 붕뜨는걸 방지 하려면,
즉,
그 원래 위치를 기억하게 만들어주려면 이거쓰면됨.
(모든 transform 함수들에 다 적용이 되긴함.)
transform: translate()
해서 이거쓰면
위치도 변경이됨.
x축, y축 해서
transform: translate(-40px, 50px);
transform: translateX(-40px);
transform: translateY(50px);
여튼 이렇게 위치 이동시키고,
이동시켜도 다른요소에 영향없이 이동함.
즉,
뭐 position:absolute할떄 뿐 만이 아니고,
단독으로 쓸때도,
즉,
요소 이동 시킬떄
깔끔하게 이동이 가능함.
그리고
단위 적을때,
px
말고도
% 로 적을 수 있음.
% 먹일 시 자기자신의 사이즈를 기준으로 함.
즉, 만약
transform: translate(100% 100%);
width : 300px
이면
300px 의 100% 가 되는것임.
--
다음은,
scale(숫자)
스케일인데,
자기 사이즈를 키우고 줄이고 할떄 쓰는 함수임.
.box {
transform: scale(2);
사이즈가 해당요소기준으로 2배로 커짐
}
scale(0.5); 자기 사이즈의 반만큼 줄어듬
scale(1); 넣으면 그냥 자기자신 사이즈임.
각각 다르게 넣으면
scale(0.5, 3);
하면
x축은 반만큼 줄고, y축은 3배 커진다.
rotate(숫자deg)
각도 로테이트 시킬때 씀.
transform: rotate(45deg);
transform: rotate(90deg);
transform: rotate(360deg);
=======================================
=======================================================
visibility: visible or hidden;
요소를 보여 줄 꺼냐 안보여 줄꺼냐.
즉,
opacity 가 0인 상황을 만드는거다.
근데,
display: none; 이랑은 다른게, 뭐냐면
display 는 박스의 타입을 설정해주는거고,
박스의 타입이 없는거니까.
주변 요소들에 영향을 미치는거고,
visibility 는 그냥 그 요소부분이 존재는 하는데,
시각적으로 안보이게 처리하는거다.
================================================
==========================================================
CSS 선택자 >
==============
기본적으로 현재 해당 요소만 선택할떄는,
css에서는 붙여서 써주면된다.
-엘리면트, 즉 요소 선택자
-클래스 선택자
클래스는 한 요소에 여러개 가질 수 있다.
.box_0.box_1.box_2 {
}
#box_title.box_0 {
}
-아이디선택자
자식 / 자손 / 형제 선택자
자식/자손/형제 선택시에는,
띄워서 써주면된다.
즉,
반갑습니다.
안녕하세요
div h1 { 즉, div 밑에 모든 h1 을 선택할떈, 여기를 띄워서 작성하면 됨.
color: red;
}
--
근데,
title 클래스의 h1 만 하고 싶으면,
.title > h1 {
이렇게 하면됨.
}
--
.active ~ li {
이런건, 액티브클래스 밑의 모든 li 형제들 선택할떄.
}
.active + li {
이런건, 액티브클래스 바로 밑의 li 하나만 선택할떄.
}
구조적 가상 클래스
li:first-child {
li 요소가 7개 있을떄,
위에 하나만 선택할떄,}
li:latest-child {
li 요소가 7개 있을떄,
마지막 하나만 선택할떄,}
li:latest-child {
li 요소가 7개 있을떄,
마지막 하나만 선택할떄,}
li:nth-child(3) {
li 요소가 7개 있을떄,
3째 li 선택할떄,}
동적 가상 클래스
자주쓰임
a:hover
앵커태그 위에 마우스 올리면,
효과 줄떄 쓰는게 호버임
input:focus
input {
outline:none;
box-shadow:none;
이거는 그냥 기본 스타일 없애는거고,
}
input:focus {
인풋에 포커스가 되었을떄, 즉 인풋태그에 클릭했을떄, 색을 바꾸겠다.
border-color: #1fb6ff;
}
a:active
a태그에 클릭누르는 찰나에 순간에
효과를 주고싶을떄,
이런거임.
참고로
css 효과중
cursor: pointer; 이거는 커서에 손모양 즉, 포인터를 주는거고
cursor: none; 이거는 포인터 없애는거고
=====================================
=============
선택자가
어떻게 우선순위로 적용되나?
젤 강력한건,
css에서는
!important;
(보통 잘 쓰이진 않음)
이게 젤 강력한 우선 순위긴하고,
html 에서는 바로 작성된, 즉,
인라인(html 에 style 해서 적어논거) 으로 적어논게 가장 우선이고,
그 다음은,
그다음이
ID 선택자,
그다음이
클래스
그다음이
요소 선택자 임.
그리고,
일반적으로
css에서는
가장 아래에 있는게 적용이 된다.
p {
color: black;
}
p {
color: red;
}
레드가 적용됨.
근데
근데 합해서 점수가? 높을수록
위에 있더라도,
먼저 적용 되는 경우가 있음.
.box p {
이게 먼저 적용이 된다.
클래스 + 요소선택자라서 그렇다.
}
p {
}
=========================================================
=========================================
디자이너는
기본적으로
그리드 시스템이라는
룰을 가지고 작업을 하는경우가
일반적이다.
그리드
grid
는
격자라는 뜻이다.
일종의 가이드라인 같은거다.
뭐 사진 찍을때도,
사진을 3분활을 할지,
그 라인을 켜놓고 작업하면,
편하듯이 그런 것이다.
디자이너도
깔끔하고
일관성 있는 디자인을 하기 위해서,
기본적으로 그리드라는것을 만들어 놓는다.
그리드 안에서 작업을 한다.
일단
디자인,
개념 3가지가 있는데,
-container
-column
-gutter
--
컨테이너는
전체 영역
즉, html의 바디태그 같은 거라고 보면된다.
즉, 그리드 시스템이 적용되는 범위를 말한다.
컬럼은
컨테이너 안에,
가로줄로
일정한 간격으로 이루어져있다.
그 한칸을
컬럼이라고 한다.
그럼 만약 12 컬럼이면,
12칸이 가로줄로 되어있는거다.
12 가 좀 기본인 숫자이다.
왜냐면
12 는
12 / 2 의 배수이기도 하고,
12 / 3 의 배수이기도 하고,
12 / 4 의 배수이기도 하고,
12 / 6 의 배수이기도 하고,
그래서 12 그리드를 많이 쓴다.
12칸으로 짤라 놓으면 굉장히 다양한 레이아웃을
만들 수 있어서,
좋다.
여튼,
한 칸을 컬럼 이라고 한다.
컬럼이 굉장히 중요한데,
이 한 컬럼을 통해서
어떤 요소의 width 사이즈를
결정하기 떄문이다.
디자이너는
어떤 요소의 width값을 결정할떄,
랜덤하게 하지않고,
1컬럼 먹인다.
2.5컬럼 먹인다.
3컬럼 먹인다.
6컬럼 두개로 한다.
뭐,
이렇게 정한다.
예를들어,
상단 바는
6컬럼 두개로 배치하고
여백을 줘야되는데,
그 여백은 gutter라고 부른다.
양쪽 여백 먹이고,
여백(거터) 15px 씩 먹인다.
이런식이다.
이걸 편하게 잘 나타내 줄 수 있는게,
부트스트랩인데,
css 프레임 워크임.
