HTML5 - 190609 Basic Study 32(Note)

html강좌 19번게시판

link:css -> ctrl+e

기본글자크기 16 -> 14로 변경하면 16/14 = 0.875 14px 이면 14*0.875 = 12.25

a태그는 글자 색 상속이 안된다.

테두리, 마진, 패딩 등은 자동 상속이 안되고 수동 상속을 해야된다.

스타일 우선순위는 스타일을 중복 선언시 적용되는 우선 적용되는 순위가 있다.
1) 마지막에 입력한 스타일이 적용된다.
태그선택자 1점 / ul li 2점 / 클래스선택자. 10점 / li.abc 11점 / ul li.abc 12점 / 아이디선택자 100점 / li#abc 101점 / ul>li#abc 103점 / 인라인스타일 1000점
!important 만점

제이쿼리로 스타일을 변경하면 인라인스타일로 코드가 입력된다.

상속과 우선순위

속성선택자 : ~(공백) |(하이픈(-)) ^(시작) $(끝) *(포함)

16px -> 32px
16*1.5 ->  24px
body{font-size:14px}
2em; 200%

: 가상요소선택자

:after ★★★
:before ★★★
:target ★
:not

탭메뉴 구현하기

css 속성

배치 속성
html 자료실 100번
html 강좌 18번

위치 속성
position:static - 기본값. left top 좌표지정이 안된다.
 relative - 자식박스가 position:absolute를 주면 부모박스는 position:relative를 줘야 기준좌표가 생성된다. 부모박스에는 widht와 height 값을 입력해야된다(지정 안하면 위치가 어그러진다 / 안정화 작업).
상대좌표
 absolute - 공중부양 포토샵에 레이어 비슷 left top right bottom 위치 지정
 fixed - 화면에서 고정 / 고정 네비게이션 바
float
z-index:숫자 - 레이어층의 순서 / 숫자가 높으면 위로 나옴 / 기본적으로 태그입력순으로 가장 마지막에 입력한 태그가 위로 배치된다.
overflow:visible - 기본값
 hidden - 자르기
 scroll - 스크롤바 항상 표시
 auto - 내용이 넘칠때 스크롤바 표시
 x:scroll;
 y-scroll;

div#box$*3

자식 박스를 부모박스에서 가로 자동으로 가운데 정렬하기 : margin:auto;

박스내에서 글자를 가로 방향으로 가운데 정렬하기 : text-align:cener;

박스내에서 글자를 수직 가운데 정렬하기 : line-height:부모높이

calc : css 계산 도움

박스에 패딩을 주면 패딩값만큼 박스크기가 커진다

html 강좌 16번

css 레이아웃 구현하기
1) float를 이용한 레이아웃
2) position을 이용한 레이아웃
---------------
1) table 구조
2) frame 태그 구조
3) div 구조 - ★
4) 시만택 태그 구조 - ★

보기 - 스타일 - 스타일 없음

태그 만 복사하기
구조를 분석

header
section
footer

text-transform:대소문자로 변환

가로크기?
몇 픽셀?
단위 %? 펙셀?
데스크탑PC -> 960px 이상
1024px 이상
모바일 480px
태블릿 768px
데스크탑 960px

margin:auto는 박스 가운데 정렬
position 이나 float 속성을 주면 margin:auto는 해제된다.

html 활용예제 38번

포트폴리오
디자인

css import


display:none/block 화면과 공간에서 사라진다.
visibility:hidden/visible 공간은 차지한다

opacity 투명도를 낮춘다
height()
text-indent:-9999px; 글자를 사라지게 활용

position:absolut;
left:-9999px 위치 변경

[박스 속성]
width 가로
height 세로
margin 외부여백
padding 안쪽여백
border 테두리

박스가 차지하는 가로영역
세로영역 - height
가로영역 = width + border*2 + margin*2 + padding*2
box-sizing:content-box*;

box-sizing:border-box;
width+margin*2 테두리와 패딩은 width에 포함된다.

margin - left
     top
 right
 bottom
 입력방식은 padding 과 동일
 
테두리속성
실선 점섬 경사선
dash
dotted
double
inst
outset
groove

테두리 : 전체스타일을 먼저입력하고 부분스타일을 나중에 입력하자.

border:5px solid red;

outlines 순수하게 디자인용 부분스타일은 없다 / 레이아웃에는 영향이 없다 / 방향 지정이 안됨

outline-style
outline-color
outline-offset
outline-width

모서리 둥글게

상속 우선순위
배치속성 테두리속성 박스속성

html 122

css 레이아웃 배치
css 동적인구현