<태그이름 속성="속성값">컨텐츠</태그이름>
태그
<br/> //줄바꿈 <input/> //입력창 <link rel="icom" href=""> // favicon추가 <head></head> // 메타데이터, 스타일, 타이틀 등 안보이는내용 <title></title> // 텝제목 <body></body> // 보이는 본문 <p></p> // 문단 표현, 긴텍스트 <strong></strong> // 강조(진하게) <em></em> // 강조(기울임) <s></s> // 취소선 <sub></sub> // 아래첨자(작은글씨) <sup></sup> // 위첨자(작은글씨) <pre></pre> // 적혀있는 그대로 출력 <a href="링크" target="속성">텍스트</a> // 하이퍼링크(_blank:새로운창) <ul></ul> // li와 세트(숫자없는 목록) <ol></ol> // li와 세트(숫자있는 목록) <li></li> // 목록 작성 <script src=""></script> // 자바 파일연결
시맨틱 태그
<main> // 본문, 한번만 사용가능 <footer> // 연락처 등 <article> // 독립적인 하나의 내용 <section> // 어떤 것의 일부분 영역 <figure> // 이미지+설명 영역
멀티미디어 태그
<img src="파일경로" alt="대체 텍스트"> // 이미지 넣기 <video></video> // 비디오삽입(autoplay:자동재생, muted:음소거, controls:컨트롤추가) <audio src="파일경로"></audio> // 오디오삽입(autoplay:자동재생, controls:컨트롤추가) <iframe src="파일경로"></iframe> // html안에 html넣기
캐스케이드(우선순서)
user agent(브라우저기본스타일) < css파일 < 인라인(HTML)
먼저 쓴 선택자 < 마지막에 쓴 선택자
개발자도구에서 윗쪽에 있는 선택자
명시도 점수가 높은 선택자
상속 확인법
개발자 도구-Inherited from 에서 진하게 표시된게 상속된것
display
display 2가지 요소
block(세로로 가능) :<h1>, <p>, <div>
inline(너비-높이 지정불가, 가로로만 가능) :<a>, <br>, <img>, <span>
display: inline-block;// 인라인을 블록처럼 크기조정, 자리차지할때 사용
<div></div>
block 컨테이너 요소
항상 새로운줄 시작
전체 너비 차지
한줄을 모두 차지함
다른요소가 들어오지 못함
<span></span>
lnline 수준의 컨테이너 요소
한줄에 여러개 작성가능
줄바꿈없이 일부 텍스트만 묶어서 스타일적용할때 사용
position
static // 기본값
relative // 원래 있던 위치에서 공간을 주고 이동(마진은 밀림, 포지션은 안밀림)
absolute // 가까운 조상 포지셔닝 기준으로 이동, 자리 차지 안함(inset: 모든방향)
fixed // 브라우저 기준 이동, 고정(자리차지안함)\
sticky // top기준 달라붙으면 고정(자리차지함)
z-index: 숫자; // 앞뒤 순서 정함(값이 클수록 앞으로 옴)
테이블(표)
<table></table> // 테이블만들기(이안에 다 넣으면 됌) <tr></tr> // 행만들기 <thead></thead> // 테이블 머릿글 <tbody></tbody> // 테이블 본문 <tfoot></tfoot> // 테이블 바닥글 <th></th> // 헤더셀 굵은글씨 <td></td> // 데이터표시 border-collapse: // 테두리여백없애기 border-spacing: // 테두리여백늘리기
폼(입력받기)
<form> <label for=""></label> // 인풋 설명태그 <input id=""> // 입력창 <button></button> // 버튼(submit=전송, reset=초기화) </form> // 폼만들기 <label for="123"></label> // (input의 ID와 for연결) <input type="타입유형" placeholder="입력내용힌트" name="넘길때 쓸 이름" > <textarea name="넘길때 쓸 이름" placeholder="입력내용힌트" cols="행 개수" rows="열 개수" </textarea> // 여러줄 텍스트 입력 <input name="" type="checkbox"> // 한개 체크용("on"데이터 전달) <input name="" type="checkbox" value=""> // 여러개 체크(value값으로 데이터 전달) <input name="" type="email"> // 이메일 받기 <input type="password"> // 비밀번호 받기 <input type="number" min="" max="" step=""> // min에서 max사이 step만큼 증가,감소 <input name="" value="" type="radio"> // 둥근체크버튼 value값 보내기 <input name="" min="" max="" type="range"> // min~max 사이 값 선택 <select name=""> // 미리설정된 option값 중에 선택 <option value=""></option> <option value=""></option> </select> <input name="" type="date"> // 날짜로 데이터 전달 <input name="" type="file" accept=".png,.jpg"> // 파일받기(확장자 지정, multiple=여러개받기) <input name="" placeholder=""> // 힌트 <input name="" type="" required> // 필수입력 <input name="" type="" autocomplete=""> // 자동완성
선택자
tag // 태그명으로 호출 .class // 온점클래스명으로 호출, 공백으로 나눔 #Id // #아이디로 호출, 하나의 요소에 하나의 id 할당가능 선택자1, 선택자2 // 여러가지 선택자에 같은 규칙 적용 태그#아이디.클래스 // 여러조건 동시만족하는 요소선택 선택자 > 선택자 // 자식 결합자 선택자 선택자 // 자손 결합자 * // 모든요소 선택자 선택자 > * // 해당 선택자 모든 자식 요소 선택 선택자 :first-child // 선택자의 첫번째 자식 선택 선택자 :nth-child(3) // 선택자의 3번째 자식 선택 선택자 :last-child // 선택자의 마지막 자식 선택 선택자 :nth-child(even) // 선택자의 짝수번째 자식 선택 선택자 :nth-child(odd) // 선택자의 홀수번째 자식 선택
가상 클래스 선택자
해당태그오른쪽버튼-Force-state
:hover // 마우스 커서가 요소 위에 있을 때 스타일 적용 :active // 요소를 활성화(클릭 등) 했을 때 적용 :focus // 포커스를 받았을 때 적용(입력창을 눌렀을때) :visited // 방문했으면 보라색으로 바꿈
가상 요소 선택자
::before content: "컨텐츠" // 요소의 앞에 컨텐츠 추가 ::after content: "컨텐츠" // 요소의 뒤에 컨텐츠 추가
부모 자식 선택자
.부모클래스 > .자식클래스 {} .선택자 .선택자 {} // 자식선택자
텍스트 스타일링
font-family: // 글씨 체 font-size: // 글씨 사이즈 font-weight: // 글씨 굵기 font-style: // 글씨 스타일 text-aligh: // 글씨 정렬 line-height: // 행간 설정 letter-spacing: // 글자 간격
박스 모델
margin : 위 오 아래 왼 // 밖 여백 border : 굵기 스타일 색깔 // 테두리 border-radius : 둥글게할크기 // px단위로 모서리 동그랗게함 padding : 위 오 아래 왼 // 안 여백 content : // 제일 안쪽 내용 * { box-sizing: border-box; } // 보더까지 포함한 크기 설정, 기본으로 제일위에 깔고 시작하는것을 추천
이미지, 배경설정
background-color: 색상 // 배경색 background-image: url('이미지 파일경로') // 배경 이미지 background-image: linear-gradient(각도, 시작색깔 퍼센트, 끝색깔), url('이미지 경로') // 이미지위에 그라데이션 각도에맞게 퍼센트만큼 만들기(추천도구: CSS그라디언트) background-repeat: no-repeat // 배경이미지 반복안하기 background-position: center // 배경이미지 정렬 background-size: cover // 꽉채우기 잘림 background-size: contain // 비율유지하면서 꽉채움 안잘림 box-shadow: 가로 세로 흐린영역 퍼질영역 색상; // 그림자만들기 opacity: 불투명도; // 전체 불투명하게 만들기 overflow : scroll // 넘치는 내용 세로 스크롤 만들기 white-space: nowrap // 가로 스크롤 만들기 float: // 이미지를 글의 왼쪽 오른쪽을 밀고 그자리에 배치가능
flex(1차원)
display: flex; // 기본(가로) 박스 만들기 display: inline-flex; // inline으로 박스만들기 flex-direction: row // 왼쪽에서 오른쪽으로 flex-direction: row-reverse // 오른쪽에서 왼쪽으로 flex-direction: column // 위에서 아래으로 flex-direction: column-reverse // 아래에서 위로 flex-grow: 숫자; // 요소 늘리기(기본값 0, 숫자클수록많이늘어남) flex-shrink: 숫자; // 요소 줄이기(기본값1, 0이면 고정됨 숫자클수록 늘어남)
flex-넘칠때
flex-wrap: wrap; // 교차축방향으로 넘어가서 정렬(다음줄로 넘어감) flex-shrink: 숫자; // 줄여서 배치하기
flex-메인정렬(기본축)
justify-content: flex-start // 기본 정렬(왼쪽정렬) justify-content: flex-end // 끝 정렬(오른쪽정렬) justify-content: center // 중앙 정렬 justify-content: space-between // 좌우는 붙여서 정렬 justify-content: space-evenly // 좌우 사이 간격 다 일정
flex-교차축정렬
align-items: stretch // 기본 정렬(위아래 늘려서 배치하기) align-items: flex-start // 시작 정렬(위 정렬) align-items: felx-end // 끝 정렬(아래 정렬) align-items: center // 중앙 정렬
flex-간격
gap: 세로 가로; // 간격설정 repeat(반복횟수, 반복값) // 1fr 4개 인경우, repeat(4, 1fr) minmax(최소값, 최대값) // 최소 최대 폭지정 auto-fill, auto-fit // 갯수 지정없이 자동맞춤
Grid(2차원)
display: grid; // block그리드 만들기 display: inline-grid; // inline그리드 만들기
그리드 세팅(나누기)
단위
px = 고정크기 (ex.grid-template: 10px 10px; // 10픽셀 2개)
fr = 유연하게 배율 (ex.grid-template: 1fr 1fr; 1배씩 두개)
minmax(px, fr) = 최대크기 (ex.grid-template: minmax(10px, 20px) minmax(10px, 1fr); // 최소10 최대20까지 1개, 최소10 1배까지 1개 *fr은 max에만 사용가능)
repeat(갯수, 크기) = 여러개만들기 (ex.grid-template: repeat(6, 1fr); // 1fr 6개만들기)grid-template-rows: 숫자 숫자; // 가로 너비정해서 배치 grid-template-columns // 세로 높이 정해서 배치 grid-template: 가로 가로 가로 / 세로 세로 세로; //한번에 쓰기그리드셀이 너무 많을때
grid-auto-rows: 크기; // 로우설정안하고 이걸로 로우자동지정 grid-auto-colums: 크기; // 컬럼설정안하고 이걸로 컬럼자동지정 grid-auto-flow: row; // 자동지정 방향 설정
그리드 위치지정(숫자좌표)
grid-column: 숫자; // 한 영역 지정 grid-column: 시작점 / 끝점; // 영역 지정(시작점에서 끝지점까지 차지) grid-column: 시작점 / span 3; // 영역 지정(시작점에서 3칸차지) grid-row: 시작점 / 끝점; ( 위와 동 )
그리드 위치지정(이름좌표)
grid-area: 이름; // 이름 정하기 grid-template-areas: "로우이름 로우이름" "칼럼이름 ." // 자리배치하기 2x2 에 마지막칸은빈칸(.)
Position
position: relative; // 포지셔닝 기준점
position: absolute; // relative에서 상대적으로 이동
position: fixed; // 전체화면(뷰)에서 이동
방향: 100px // 조상위에서 방향으로 이동transform
transform: rotate(각도); // deg,turn단위 회전
transform: scale(배율); // 확대 및 축소
transform: skew(x축각도, y축각도) // deg,rad단위 비틀기
transform: translate(x축, y축) // 이동transition(중간상태 제어불가)
transition-property: border; // 효과적용할 속성
transition-duration: 0.2s; // 효과 지속시간
transition-timing-function: linear; // 타이밍 함수(일정하게)
transition-delay: 1s; // 효과 나타나기 전 지연 시간animation(중간상태 제어가능)
@keyframes 애니메이션 이름 {
from {
}
to {
}
}
animation: 지속시간 타이밍 지연시간 반복횟수 출발도착지변경 스타일유지media query
@media screen and (미디어 특성) and (미디어 특성) {
main {
}
}viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">페이지의 너비 = 디바이스 너비
초기배율 1.0
링크
./ : 현재 폴더
../ : 상위 폴더
/ : 최상위 폴더
# : URL프래그먼트(ID이용, 주소의 일부분으로 이동)
target="_blank" // 새로운 탭에서 이동
비전공자의 IT 일대기 + 우당탕탕