2020.03.11
파일 확장자
- Beautify : 코드정렬
- Custom Work : 상단에 탭 메뉴 기능
- Indent Guides : 코딩 라인 가이드 (보기>인덕트가이드 활성화)
- (좌측 마법봉 누르면 자동으로 정리)
- Emmet : 단축키
단축키
- 복사 : Ctrl + c
- 붙여넣기 : Ctrl + v
- 전체복사하기 : ctrl + A
- 4칸 이동하기 : Tab
- 4칸 반대로 이동하기 : Shift+Tab
태그 용어
- <p> </p> : 태그 문단이나 문장을 쓸 때
- <ul>
<li></li>
</ul>
=문단 쓰기 - ul>li*10 탭키 누르기 알아서 쫙 나옴
- <p> = < p >
- description : 사이트에 대한 설명
- keywords = 노출 될 수 있는 키워드
- title =타이틀 (기본적으로 바꿔야 하는 것)
- src =주소
2020.03.12
단축키
- ★ ! +Tab : 기본적인 레이아웃 만들어주는 단축키spabn
- ★ w크기 + Tad / h크기 + Tad : 크기 쉽게 쓰기
- ★ 색상 지정 : bgc#색갈코드 + Tad
- (bgc : backgroung)
- ctrl +d : 줄복사
- 태그 + teb : 태그 값에 대한 자동 완성
태그 용어
- <div> <div> : 영역박스
- img src="이미지 경로" alt="사진대처문자" style="width=크기" : 이미지 넣기
- 전체 선택 : *
- 여백 지우기 : {margin: 0; padding: 0;}
- 코드처럼 보이게 하기 : code
- font-size: 글 사이즈
- text-align: 글자 위치
- 링크 넣기 : a href="파일 위치"
2020.03.13
엔티티코드 : 기호를 표현해주는 코드
태그 용어
- ★ 블록한테만 먹히는 속성이 있고, 인라인 한테만 먹히는 속성이 있다.
- text-align: center; : 글자 크기 가운대로 두기
집에서 복습 할 수 있는 링크:https://wtss.tistory.com/category/SITE/01%20WEBSTANDARD
2020.03.16
단축키
div#wrap>div*3
<div> id="wrap"
<div> </div>
<div> </div>
<div> </div>
태그용어
- class와 id 태그는 똑같다
id = #
class = .
2020.03.17
태그용어
- bgc : rgba ( 00,00,00,00)
inherit: 부모의 값을 상속 받는 태그 (layout07 참고)
첫 번째 : R
두 번째 : G
세 번째: B
네 번째 : 불투명도
EX) 70%면, 0.7
2020.03.18
태그용어
- tr 과 th,td 같이 써야 테이블이 만들어진다
table은 위 아래가 같아야 깨지지 않는다. ex)위 7칸, 아래7칸- ca = 센터 얼라인 (가로로 가운데) / va = 버티컬 얼라인 (세로로 가운데)
css를 미리 만들어 놓은 것. - <td rowspna="2"> = 아래로 두 칸 합치기
- <td rowspna="3"> = 아래로 세 칸 합치기
- <td colspan="2"> = 옆으로 두 칸 합치기
- <td colspan="3"> = 옆으로 세 칸 합치기
2020.03.19
간략화
border-width: 1px; border-style: solid; border-color: #f00; = border:1px solid #fff
css 기본 규칙 : 뒤에 있는 속성일 수록 우선순위가 된다
svg 파일 = ex) 일러스트로 구를 하나 만들면, 그 구를 코드로 볼 수 있는 파일
2020.03.23
단축키 overflow(넘쳐 흐르다) : hidden (숨기다)
- ovh =
overflow : hidden
블릿기호 없애는 태그
list-style: none
웹표준 사이트 (다음) http://darum.daum.net/
2020.03.24
태그 용어
aria-hidden="true"= 접근성을 위해 넣어주는 속성 (두 번 읽지 않기 위한 것)
단축키 $ >자동으로 번호 매김
.col$*6 + tab
<div class="col1"> </div>
<div class="col2"> </div>
<div class="col3"> </div>
<div class="col4"> </div>
<div class="col5"> </div>
<div class="col6"> </div>
aria-hidden="true" = 접근성을 위해 넣어주는 속성(두 번 읽지 않기 위한 것)
크로스 블라우징
- 어떤 브라우저로 해도 똑같은 화면이 나오도록 하는 것
ex) explorer7 , explorer8m, explorer9
2020.03.24
태그 용어
alt ="" 이게 아닌, 의미가 없을 때 alt 라고만 쓴다
2020.04.07
태그 용어
aria-hidden="true" 시각리더기가 읽지 않는 태그
div:last-of-type div 박스 안에있는 div박스의 마지막 태그만 선택
2020.04.09
태그 용어
srcset:이미지 주소 셋팅