국비지원 UX UI 디자인/코딩 수업

[수업노트](20.10.13)D+3 앵커태그<a>/줄바꿈태그 <br>/젠코딩/text-align/hover

papiliofly 2020. 10. 31. 23:47
728x90

1. 키보드 사용법
Home : 줄에서 맨 앞으로 이동
End : 줄에서 맨 뒤으로 이동
Ctrl + Home : 맨 위으로 이동
Ctrl + End : 맨 아래으로 이동
Ctrl + C : 선택영역 복사
Ctrl + X : 선택영역 잘가내기
Ctrl + V : 붙여넣기
Ctrl + A : 전체선택
Ctrl + Z : 이전 히스토리로 한 단계 이동
Ctrl + Y : 이후 히스토리로 한 단계 이동
Shift + 키보드 이동 : 글 선택
Cabs Lock/Insert : 절대 사용하지 않는다.
Shift + 영문 소문자 입력 : 대문자 입력


2. (HTML)앵커태그, br태그


<br.>: 줄바꿈 태그 셀프클로즈드 태그
<ahref="">: 하이퍼링크 연결태그
<ahref="" target="_blank">: 하이퍼링크 연결 새창 태그 (기본속성 inline)


 

3. (HTML,CSS)젠코딩
- html, css코딩의 생산성을 향상시켜주는 문법
 ex)
  - 일반: div+tab= <div> </div>
  - 선택자 속성 속성값 글내용: a[href="#"][target="_blank"]{네이버}+tab= <a href="#" target="_blank">네이버</a>
  - 부모자식 앨리먼트: a>br+tab= <a href"#"> <br> </a>
  - 형제 앨리먼트:div+div+tab= <div></div>

                                          <div></div>


4.(CSS)젠코딩 후손선택자
- css에서 부모엘리먼트에 속한 특정 후손선택자에게 속성값을 지정할때 사용
 ex)section a{color:red;}
     a{color:green;} 일때, 특정 후손선택자를 지정한 section a{color:red;}가 화면에 송출 됨

 

* 우선순위: 후손선택자>긴 엘리먼트>하단 엘리먼트



5. (CSS) text-align
- 텍스트 정렬 속성(선택된 엘리먼트 자체를 정렬시키는게 아니라, 텍스트만 정렬)
  ex) section{text-align:center;}시 섹션 엘리먼트가 정렬되는것이 아닌 섹션 엘리먼트의 텍스트만 정렬
 * 글자가 아닌 엘리먼트를 정렬하는 방법?
  display:inline-block;만 적용된다 왜냐하면 인라인 블럭 속성값은 글자화하는 성질이기때문에


6. (CSS) hover
- 마우스 커서가 올라갔을 때 적용되는 속성
  ex) div:hover{ background-color:blue;}일때 div앨리먼트에 커서가 올라가면 배경색이 파랑색으로 바뀜

728x90