2022.03.01_17일차_css(1)

17일차 학습내용

1. css 2. css단위 3. css선택자 selector 4. box 모델 5. background 관련 속성 6. CSS block과 inline 7. position 속성

[css]

1. CSS Cascading Style Sheets
HTML : 웹사이트 내용 나열 HTML5
CSS : 디자인 구성 css3
Javasscript : 웹 상에서 프로그래밍 언어라고 할 수 있다.
  이벤트처리 등 여러 로직과 기능 구현하여 동적인 페이지로 보이게 가능.

css 독립적으로 사용 불가. HTML에 디자인적 도움을 주는 언어.

1) CSS selector(선택자)
HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 
특정 부분을 선택하기 위해 선택자를 사용해야 함.

2) CSS 적용 형식
선택자 { 속성명 : 속성값; 속성명 : 속성값; ... } //w3schools 어떤 속성명이 있는지, 어떤 값이 매칭되어야 하는지 정해져있음.. css properties
  속성명 = 프로퍼티
  속성값 = 값

선택자 : selector, 스타일을 어디에 적용할 것인지 지정하는 것.
{} : 스타일 적용 코드 영역

/* 주석  */

3) CSS 적용방법 3가지
#1. 외부 스타일 시트(추천) : CSS 파일 별도로 작업하여 연결 (.css) //가장많이씀. 프로젝트 페이지 많으니까 동일하게 적용해야하니까~~
<link href = "css파일의 전체경로" rel="stylesheet" type="text/css" />
#2. 내부 스타일 시트 : HTML파일에 <style>태그로 작업
#3. 인라인 스타일 시트 : HTML태그에 style 속성으로 작업 //제일비추

2. Reset CSS
W3C에서 공식적으로 권장히는 방식은 아니나,
실무에서 크로스브라우징 이슈때문에 사용되는 경우가 있다.
기본 태그에 지정된 스타일 초기화 시키기.
(nomalize css cdn)
https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

cdn : 라이브러리 직접 다운받아 적용되는 것이 아니라, (오프라인 작업시 직접 다운)
온라인상으로 배포된 다른 서버상의 라이브러리 파일의 링크(주소)를 적어,
라이브러리를 배치하는 방식

3. CSS 단위

/* 크기 단위 */
1) px    : 화소 단위
2) %     : 백분율 단위의 상대 단위
3) em    : 배수 단위. 16px -> 1em = 16px, 2em = 32px //중첩태그일 때 바로 상위태그 값을 기준으로 하기 때문에 상대적으로 바뀌게 됨. 부모격인 태그를 기준으로 배수...
4) rem   : root em 으로, 최상위요소(html) 사이즈를 기준으로 하는 배수단위. //기준이 바뀌지 않는다. 

* 반응형 viewport 단위 * 
반응형   : 사용자의 디바이스 디스플레이스 사이즈에 따라 하나의 사이즈가 
자동으로 크기 변경되도록 하는 기능
viewport : 웹브라우저에서 웹페이지가 표시되는 영역

vw    : viewport 너비 1vw = 1% / 100vw = 100%
vh       : viewport 높이
vmin     : viewport 너비 또는 높이 중 작은 쪽 1/100 (1%)
vmax     : viewport 너비 또는 높이 중 큰 쪽의 1/100 (1%)

* 색상 표현 단위 *
1) 색상 이름 : https://www.w3schools.com/cssref/css_colors.asp
2) 16진수 : #ffffff 와 같이 표현 #fff 
3) RGB    : rgb(138,42,225)
4) RGBA   : rgba(137,34,65,0.5) //알파값 투명도 1.0완전불투명. 0완전투명 //opecity 투명도 따로 지정하는 태그도 있음. 상속이 안된다...


4. selector 선택자
1) 전체 선택자 : *
2) 태그 선택자 : 태그명
3) id 선택자 : #id속성값
4) class 선택자 : .class속성값

5) 속성 선택자 
[속성명]  : 속성을 가지는 모든 태그
[속성명=값] : 속성에 저 값을 갖는 태그들
[속성명^=값]: 값으로 시작하는(대소문자 구분)
[속성명$=값]: 값으로 끝나는
[속성명*=값]: 값을 포함하는
<css05.html

6) 복합선택자 <
후손 선택 : 스페이스 간격으로 표시  ex) p a span - p태그 안에 a태그 안에 span태그 안에
자식 선택 : > 바로 아래 자식  ex) ul > li
인접형제선택자 : + ex) li.text + li //떨어져있으면 선택이 안됨
일반형제선택자 : ~ //중간에 껴있어도 상관없음

7) 가상 클래스 선택자 (수동클래스)
어떤 요소 이벤트가 발생할 때 선택되는 문법
선택자 뒤에 : (콜론)을 사용해서 표시

:link : 방문하지 않은 링크가 적용된 요소
:visited : 방문한 링크가 적용된 요소
:hover : 마우스가 올라간 상태
:active : 클릭하고 있는 상태
:focus  : 포커스가 있는 상태


<css06.html


8) UI 요소 상태 성택자 (체크박스나 .... 
특정 요소의 UI 상태에 따른 선택자

:enabled : 사용 가능한 상태
:disabled : 사용불가능한 상태  disable="true"
:checked : 체크된 상태
:indeterminate : 상태가 결정되지 않은 상태

<css07.html 

9) 구조 가상 클래스 선택자
자식선택자:구조가상선택자

:first-child
:last-child
:nth-child(n)   : n번째 자식 요소 (1부터 시작)
:nth-last-child(n) : 뒤에서부터 n번째

<css08.html

10) 부정 선택자 
:not (선택자)  그것만 빼고~~

11) 가상 요소 선택자
요소의 내용 중 특정부분을 선택, :: 콜론 두개 사용

::first-letter
::first-line
::after 요소의 맨 뒤
::before 요소 전
::selection 드래그한 부분 (safari 노지원... )

css09.html


5. CSS Box Model
html 요소들을 박스형태로 정의하는 방법
박스모델은 마진, 패딩, 테두리 등 박스가 여러겹 들어있다.

1) 박스 모델 종류
블록 레벨 요소 : 혼자 한줄 차지하는 요소. p, h, ul, ol, div, form, table 등
인라인 레벨 요소 : 혼자 한줄 차지하지 않는 요소. img, br, span, input, textarea, button-

2) 박스 모델 기본 구성
margin :


css10.html 

3) 주요 프로퍼티 (속성)  
#1. width / height
너비, 높이를 나타내는 속성으로 사이즈의 기준을 정하는 
box-sizing 속성에 따라 너비, 높이의 기준이 달라짐
box-sizing 속성의 디폴트값은 content-box가 지정되어있음.
-> w/h는 content의 너비와 높이가 됨
box-sizing : border-box로 지정하면
-> content+padding+boder 영역의 너비/ 높이가 된다. //마진을 뺀 나머지


박스 안에꺼 속성은 다 상속이 안돼~~~ 

박스 크기 지정시 그보다 내용물이 많으면 오버플로우... 지정 크기보다 너무 크면 빈공간이 많이생기지


#2. margin / padding
상하좌우 여백 세부적으로 적용 가능

4개 적을 시 : 상우하좌(시계방향) 순으로 지정
3개 적을 시 : 상 좌우 하
2개 적을 시 : 상하 좌우
1개 적을시 : 모두 일괄 적용

*auto : margin 에 auto를 지정하면 양쪽 마진이 적절히 분배되어
중앙정렬 효과를 낼 수 있다.
이 때 width가 명시적으로 지정되어야 양쪽 여백이 생겨
효과를 낼 수 있다. (가로사이즈 계산을 해서 그 중간을 찾아야 하니까)
 margin:0px auto; 배치초기화로 많이 쓴다.

<동일문서 #3.보더의 속성 

border로 굵기 스타일 컬러 한번에 지정 가능
radius는 별도로 설정해야함
#3. box-sixing
content-box : default : width, height의 기준을 content 사이즈로 지정
border-box : width, height의 기준을 content+padding+border 합친 사이즈로 지정

css12.html

6. background 관련 속성
*유용한 참고 사이트 : www.cssreference.io  16진수 rgb, rgba... hsl 그라데이션...

1) background-image 속성
url(경로나 파일명)

2:45 css13.html

2) background-repeaat 속성
repeat : default
space : 반복해서 채우고 처음과 마지막 반복이미지 양끝에 고정 후
round : 이미지 반복, 이미지가 짤리지 않도록, 이미지 사이즈 재조정됨. //알아서 맞춰줘서 제일 편함 사진은 일그러짐.
no-repeat : 반복안함

3) background-size 속성
auto : 이미지 크기 유지 default
length : px, % 등으로 값 설정
  cover : 요소 사이즈 다 채울 수 있게 이미지 확대 / 축소, 가로/세로 비율 유지
contain : 요소 사이즈를 벗어나지 않는 최대 크기로 이미지 확대/축소, 가로세로 비율 유지

4) background-attachment 속성
fixed : 고정시킴 -> 스크롤해도 계속 화면에 보임
scroll : default -> 스크롤하면 배경이미지도 스크롤에 따라 올라간다~

5) background-position 속성
위치 지정
좌측상단이 default (x,y) 좌표로 지정 가능

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

x y : %, px, ex등으로 좌표값으로 위치지정가능. 0% 0% (left top), 100% 100% (right bottom)?
px로 하면 모니터 해상도에 따라 위치 달라지니까 퍼센트로 해서 브라우저에서 다 동일하게 보이게 하든지 위치 지정 left top으로 쓰든지~~


1~5까지 한방에 지정
* background : color image repeat attachment position 이 순서대로~~ 


7. CSS block과 inline
모든 html 태그는 각 태그마다 디폴트로 block 또는 inline특성을 가짐
display 속성을 통해 변경 가능.

1) block 특성
width, height, margin, padding 속성 설정 가능
block 안에 inline 포함 가능
div, h, p, ol, ul, li, hr, table, form 등

2) inline 특성
content 너비만큼 가로폭 차지.
width, height, margin, padding 속성 설정 불가능.
상하 여백은 line-height로 지정 가능
span, a, strong, img, br, input, select, textarea, button등 

3) CSS display 속성
block -> inline, inline-> block 변경 가능

block  : block 레벨로 지정
inline  : inline 레벨로 지정
inline-block : 양쪽 모두의 속성을 섞어서 갖는 형태
none : 화면에 표시하지 않음 (차지하는 공간까지 사라짐)

4) visibility 속성
요소를 보일지 말지 설정

visible : 보이게 default
hidden : 안보이게 (차지하는 공간은 그대로 남겨둠 ) vs. display:none 이랑 다른 점
collapse : table에서 사용하는 속성값, 행이나 열을 보이지 않게 함.
none : table 요소의 행 열을 보이지 않게 함.

5) inline-block
한줄 차지하진 않지만, 인라인 내부에 with height margin padding 속성값을 지정하고자 할 때
//일렬로 쓰지만 whmp을 넣고싶어

8. CSS font 관련 속성
1) font-size : 문자 크기
midium : 웹브라우저에서 정한 기본 글자 크기 (default. 보통 16px정도..)
xx-small, x-small, small, large, x-large, xx-large 문자형형태로 값 가짐
smaller larger...부모요소...
또는 length값 숫자 값을 직접 입력 (단위: px % em rem 등 )

2) font-family : //사용자에게 깔려있는 폰트여야 함.. so
일반적으로 font-family에 여러 폰트를 설정하는 경우가 많음.
font-family : 첫번째폰트, 두번째 폰트, 세 번째 폰트...;
@font-face: 웹폰트를 사용. @ 웹 바로 다운받아서 적용가능하게 함. 

3) font-weight : 글씨 굵기
normal/ bord/ bolder/ lighter/ 100/ 200 (narmall==400)

4) font-style
normal/italic/ oblique
3:54 폰트 확인  //여기개졸았다

5) line-height  //폰트의 위치 3:56
(인라인) 라인 높이 설정 : 상/하 여백 조정
  normal
px, em, rem

6) text-overflow 속성
아래 조건이 설정되어있는 상태에서 설정 가능
- width 소성
- white-space : nowrap(자동줄바꿈X)
- overflow 속성이 visible이외의 값 (hidden)

값
- clip : 텍스트 잘라냄
- ellipsis  : 텍스트가 잘렸다는 것을 ...로 표시


css16.html 

9. position 속성 
html 요소 위치를 결정하는 방식 지정으로 크게 4가지 방식이 있음.

1) 정적위치 static position (default)
2) 상대위치 relative position - 원래 있어야할 곳 기준으로
3) 절대위치 absolute position - 부모기준으로
4) 고정위치 fixed position - 고정 좌표값으로 지정

10. (position관련) z-index
: 큰 숫자값을 지정할 수록 화면 전면에 출력 (레이어)
다른 애들도 다 absolute로 해놓고 부모기준으로 다 똑같이 줄세워놓고 해야... 아니면 아예 안해주면 겹치지 않고 죽 나열됨..
absolute를 쓸 때는 그거의 기준 되는 relative도 하나 지정깔아주자 

(parallax효과 등 여러개 사용할 때 쓸 수 있어...)

11. css float //배치기법 float floatbox grid flex... //float하는순간 요소 다 틀어짐...
요소를 띄우는 속성으로 웹페이지에서 텍스트와 함께 이미지 배치를 위해 고용되었지만,
수평 정렬을 위해 사용되었음.

1) float 속성
none : default
right : 오른쪽으로 띄우기
left : 왼쪽으로 띄우기
2) clear 속성 // float를 지정을 다 하든지, 아니면 clear로 지정해줘야
none : float 사용 default
right : 오른쪽 float 해제
left : 왼쪽 float 해제
both : 양쪽 float 해제 / 보통 이걸쓰지. 

12. css flexbox  
https://www.outpan.com/app/1b970b008f/flexbox-playground
https://flexboxfroggy.com/ 게임

수평정렬과 수직정렬을 감싸는 애가 있어야함

css19.html

1) flex container
flexbox는 상위요소인 container와 하위(자식) 요소인 item들로 구성함

* 속성 *
display  : flex 컨테이너 정의 : flex, inline-flex
flex-direction : 주측(main-axis) 설정 : row 좌->우 , column 위->아래 -reverse(반대로)
flex-wrap : 한줄? 여러줄? 지정 : nowrap(default, 한줄에 다 배치), wrap(자동줄내림), wrap-reverse
flex-flow : direction+flow 한번에 지정 : flex-flow : direction wrap;
justify-content : 주측을 기반 수평 정렬방법 
align-content : 주측 기반 수직정렬 기반 (메인축 아니라 각 행마다 적용)
align-items : 수직정렬  (복수의 행을 하나의 그룹처럼 적용)

* 정리 *
수평 가운데 정렬 : justify-center : center;
수직 가운데 정렬:  align-content : center;

order 속성
배치 순서
default = 0, 정수값으로 설정, order 값이 낮은 순서대로 배치