복습(CSS기초, HTML/CSS활용)

1.CSS(Cascading Style Sheets)의 각 규칙이나 규칙 집합은 하나 이상의 셀렉터와 하나의 선언 블록을 이룬다.

2.아래의 우선순위에 충돌이 나는 경우 아래의 우선순위로 마무리 작업을 할 경우 작동을 하지 않아 당황할 수 있다.
(실제로 대부분 css가 먹히지 않는 상황은 아래 우선순위 중요도에서 밀린 탓일 것이다.)@@@@@@
CSS 우선 순위 (높은 순위에서 낮은 순위 순)
1.중요성-‘!important’은 이전의 우선 타입들을 덮어쓴다.
2.인라인-HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
3.미디어 타입-미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티는 모든 미디어 타입에 적용된다.
4.사용자 정의-대부분의 브라우저가 접근성 기능을 갖추고 있다:사용자 정의 CSS
5.셀렉터 특정성-특정 컨텍스트 셀렉터(#heading p)는 일반 정의를 덮어쓴다.
6.규칙 순서-마지막 규칙 선언은 가장 높은 우선 순위를 가진다.
7.부모 상속-프로퍼티를 지정하지 않으면, 부모 요소에 상속된다.
8.HTML 문서 안에서의 CSS 프로퍼티 정의-CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
9.브라우저 기본값-가장 낮은 우선 순위: 브라우저 기본값은 W3C 초기값 사양에 정의되어 있다.

3. 
UI=user interface
UX=user experience 

body(Selector/셀렉터){
(Declaration block/선언블록={}을 의미)
-(Declaration/선언)
-(Declaration)
--(Property/속성명) : (Value/속성값);
---(예시)color : red; // font-size : 30px; 등
}



4.시멘틱 요소를 사용할 때는
-------header------- 이런 형태로 작성되며 
nav    main   aside  nav와 footer에는 주로 ul과 li를 이용한다.
-------footer------- 

5.<li class="menu-item selected">Home</li> 등 ' '(공백)을 이용해 여러개의 class를 동시에 적용할 수 있다.

6.색=color / 테두리 색=border-color / 배경 색=background-color / 글꼴=font-family:"글꼴" / 크기=font-size / 굵기=font-weight / 밑줄=text-decoration / 자간=letter-spacing / 행간=line-height / 정렬=text-align / 세로정렬=vertical-align(display 속성이 반드시 table-cell이며  정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수있다.)

7.절대 단위: px, pt /상대 단위: %, em, rem, ch, vw, vh 등
글자의 크기는 1rem이 기본이며 크기에 따라 조절하기 쉽다.
vw와 vh는 viewport width와 viewport height을 의미하며 너비/높이의 1/100씩을 의미한다. 화면에 꽉 차는 내용을 설정하고 싶은 경우 유용하다.

8.<p>, <div>, <h1>등 block박스는 줄을 전부 차지하며(flex등 예외 제외) <span>같은 inline박스는 내용물 또는 설정 값 만큼의 자리만 차지한다.

9.네가지 방향의 입력의 경우는 주로 위, 오른쪽, 아래, 왼쪽의 시계방향 순서로 배치되며 -top -right 등의 단어를 붙여서 특정 방향만의 조절도 가능하다.
외부와 border 그리고 content를 기준으로 했을 때 외부와 border의 사이에 들어가는 공간을 margin값으로 조절하며 border와 content박스의 사이 공간 조절을 padding값으로 할 수 있다.

10. 셀렉터는 전체선택(*), 태그명(tag), 클래스명(.class), 자식셀렉터(selecor > selecor2), 후손셀렉터(selecor selecor2 {}), 형제셀렉터(selecor ~ selecor2 {}), 인접 형제 셀렉터(selecor + selecor2 {}), 섹렉터 내부 속성셀렉터(selecor[tag])??, 셀렉터의 첫번째/마지막 자식 셀렉터(selecor:first-child), n번째 자식 셀렉터(selecor > selecor2:nth-child(n)), 형제중 처음/마지막 셀렉터(selecor:first/last-of-type), 셀렉터2 제외 셀렉터(selecor:not(selecor2))등이 있다. 사용 또한 자동완성 기능이 있기 때문에 눈에 익는 정도만 더 보면 자연스럽게 사용 가능하다.

11. link, visited, hover, active, focus등은 더 숙달이 필요하다.@@@
 
12.wireframe은 와이어로 설계된 모양을 의미하며 웹이나 앱의 인터페이스를 미리 묘사해 구조를 보여주는 용도로 설계를 위해 제작하며 잘 만들 경우 와이어프레임만으로 용도를 쉽게 파악할 수 있다. 

13.화면은 수직분할(ㅣㅣㅣ)과 수평분할(三)순서로 적용하며(상황에 따라 다를 수 있다) 내부 비율분할(width: 70%/height: 40% 등)로 쉽게 나눌 수 있다.

14. 정렬기능에는 아래와 같은 속성과 값들이 있다.
justify-content(flex-end / center / space-between / space-around / space-evenly)
align-items(flex-start / flex-end / center / baseline / stretch(default))
flex-direction(row (default) / row-reverse / column / column-reverse)
order(... -1, 0(default), 1, ...)
align-self(flex-start / flex-end / center / baseline / stretch)
flex-wrap(nowrap(default) / wrap / wrap-reverse)
flex-flow(<flex-direction> <flex-wrap>)
align-content(flex-start / flex-end / center / space-between / space-around / space-evenly / stretch(default))

justify-content(가로선 정렬) / align-items(세로선 정렬) / flex-direction(정렬할 방향 지정) / order(순서지정) / align-self(기존 세로선 정렬을 무시하며 자신만 지정된 방식으로 세로선 정렬) / flex-wrap(플렉스 요소 줄바꿈) / flex-flow(정렬방향 지정 + 줄바꿈) / align-content(여분 공간이 있는 경우 세로방향 간격 조절)

15.flex:<grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
기본값은 'flex: 0 1 auto' 상태이며 -grow -shrink -basis등을 붙여 각 값만 따로 지정할 수 있다. 이 flex속성은 자식값에 직접 할당되어 근처의 다른 형제들의 flex값과 비교된다.(그렇기 때문에 자식에 각각 할당해야 하는 것)
팽창지수가 모두 1(flex:1)인 경우 빈 공간이 있을 경우 각자 동일한 비율로 할당되는 것을 알 수 있다. 

!단 basis의 값이 있기 때문에 grow값이 0이라고 해도 shrink값은 1이기 때문에 기존 할당값 미만으로 줄어들지는 않는다.


복습을 해도 시간상 모든걸 다 파악하고 넘어가기는 쉽지 않다.

복습은 해도 해도 부족한 것 같다.

 

내일은 개구리(flex)와 코드스테이츠 CSS문제를 한 후 초밥(css)까지 클리어 해야곘다.

선택자를 정확하게 사용하는 실력과 flex정렬만 제대로 할 줄 알아도 대부분의 배치 문제는 쉽게 해결할 수 있지 않을까?

오늘 배운 우선순위 또한 시간이 날 때 제대로 파악해야 할 문제다.