FE가 되고싶니? 나도✨

FLEX 속성

▶기본적으로 아이템을 좌측에서 우측, 수평 방향으로 배치한다. 우측에서 좌측이나, 수직방향으로 배치하려 할 때에도 사용할 수 있다.

flex : 부모요소에 적용하는 속성

display : flex; → 부모인 자신은 블록요소 속성으로 유지하고, 자식 요소에 flex환경을 설정해서 좌우배치를 한다.

display : inline-flex; → 부모인 자신은 인라인 요소 속성으로 유지하고, 자식요소에 flex 환경을 설정해서 좌배치를 한다.

flex-direction : 자식요소의 정렬 방향을 지정한다.

: column / column-reverse / row / row-reverse

row(가로): 기본축이 가로로 정렬 (기본값) 좌 → 우

column (세로): 기본축이 세로로 정렬(block 요소일 경우 flex하기 전과 같음) 위 → 아래

reverse(반대): 자식요소 콘텐츠를 가로/세로 역순으로 정렬 우→좌 / 아래→위

flex-wrap:자식 요소의 줄 바꿈을 적용시킨다.

wrap: 자식요소의 줄 바꿈 가능 (기본값)

nowrap: 자식요소의 줄 바꿈 불가능, 요소의 부피 때문에 공간이 부족해도 줄바꿈X

▶flex-flow: flex-direction와 flex-wrap을 한번에 적용

단점, 자바스크립트에서 인식을 하지 못해서 잘 사용하진 않음.

EX) flex-flow: row-reverse wrap;

justify-content : 기본축으로 정렬하는 방법을 제공

▶flex-star : 기본값, 자식요소를 시작방향으로 정렬

▶flex-end : 자식요소를 종료방향으로 정렬

▶center : 자식요소를 가운데로 정렬

▶space-between : 자식요소 사이에만 균일한 간격을 두고 정렬

즉, 양 끝에 자식요소를 하나씩 배치하고 남은 공간을 균일한 간격을 두고 정렬

▶space-around : 모든 자식요소의 둘레에 균일한 간격을 두고 정렬

→ ( 1 2 2 2 1 )

▶space-evenly : 모든 자식요소의 균일한 간격을 두고 정렬

→ 간격을 동일하게, 끝과 끝 배치X, 사이에 간격 겹치지X ( 1 1 1 1 1 )

align-items : 반대축으로 정렬하는 방법을 제공

▶align-items : center; 반대축의 중앙에 배치하는 방법

▶align-content : space-between, space-around, space-evenly를 사용하기 위한 방법

★felx로 요소를 중앙에 배치하는 방법★

부모요소에 display:flex; 부여하고, justify-content :centerl, align-items : center; 가운데 배치 완성

그림자 효과

▶box-shadow와 text-shadow 가 있다.

▶X축 / Y축/ 블러 / 퍼지는 효과 / 색깔

→보통 바깥으로 퍼지는 그림자

→inset을 설정하면 안쪽으로 퍼지는 그림

▶box shadow: x position y position blur spread color;

EX )box-shadow: 5px 5px 5px 5px gray;

▶box-shadow: 5px 5px 5px 5px gray inset;

▶x-position(필수) : 가로 위치 . 양수(+)면 오른쪽에 , 음수(-)면 왼쪽에 그림자가 만들어진다 .

▶y-position(필수) : 세로 위치 . 양수(+)면 아래쪽에 , 음수(-)면 위쪽에 그림자가 만들어진다 .

▶blur : 그림자를 흐릿하게 . 값이 클 수록 더욱 흐려 집니다

▶spread : 양수(+)면 그림자를 확장하고, 음수(-)면 축소한다.

▶color : 그림자 색을 정한다.

▶inset : 그림자를 안쪽으로 넣어줍니다 . 기본값은 바깥쪽에 그림자를 넣어주는 것이다.

Float & Clear

▶CSS의 float 속성을 이용하면 웹페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있다.

▶float은 우리말로 하면 '(물 위나 공중에서) 떠가다, 뜨다, 부유하다' 등의 뜻이 있다.

▶하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서 float 속성의 영향을 받게 된다.

▶float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고자 할 때에는 clear 속성을 사용한다.

▶clear 의 속성 값 = left, right, both : 이전에 사용된 'float:left(right, both)'의 기능을 해제한다.

float으로 레이아웃을 잡는 방법

1. 가로로 배치하고자 하는 요소와

(좌우로 배치하고자 하는 요소)

같은 항렬 모두에 float:left;을 쓴다

2. 부모요소에 float을 해제한다

float은 float이라고 적용된 자식요소를 부모 요소가 높이를 인식하지 못한다.

▶해결방법 : 플롯을 해제한다

플롯 해제 방법

▶가상선택자를 잡아서 해제하는 방법

1. 부모에 높이값이 있다면 지워야한다

2. 부모요소에 :after로 가상선택자를 잡아

3. 가상선택자안에

content: '';

display: block;

clear: both; 를 적는다

4. 특이사항 : 하나라도 float을 적용한다면 float이 필요없는 나머지요소들도 모두 float을 적용시켜야 한다.

CSS 선택자

▶CSS의 선택자(selector)는 CSS로 꾸미고자 하는 HTML의 영역을 선택하는데 사용된다.

1. 클래스 선택자 : .

.txt : 클래스가 txt인 모든 요소를 선택

2. 클래스 선택자_both (띄어쓰기 X)

.txt.is : 클래스가 txt 이면서 is를 동시에가지는 요소를 선택

3. 자손 선택자 : (사이에 띄어쓰기 되어있음)

.txt .is : 클래스가 txt인 요소의 자식 중 클래스가 is인 요소를 선택

4. 아이디 선택자 : #

#txt : 아이디가 txt 요소를 선택

5. 전체선택자 : *

* : 모든 요소를 선택

.txt* : 클래스가 txt인 요소 전부다! => 실무에선 잘 사용하지 않는다.

reset.css에서나 사용하는 정도..?

6. 요소선택자

태그이름 : 태그 전부를 선택

EX) p : p태그 전부를 선택

7. 직계자식 선택자 : >

.txt>p : 클래스가 txt인 요소의 자식 중에 직계(바로 뒤에 오는) p태그를 특정해서 선택

cf) .txt p VS .txt>p 다른 선택자이다.

1. class가 txt인 요소 안에 모든 p태그

2. class가 txt인 요소 안에 바로 직계 p태그

8. AND 선택자 : ,

.txt, .text : 클래스가 txt인 요소와 클래스가 text인 요소를 선택

9. 인접 형제 선택자 : +

.txt + p : 클래스가 txt인 요소 바로 뒤에 배치된 첫번째 p태그

10. 일반 형제 선택자 :

.txt ~ p : 클래스가 txt인 요소부터 모든 p태그를 선택

11. 속성 선택자

11-1. : @[]

a[href] : a 태그 중에 속성이 href가 있는 모든 요소

11-2. : @[=""]

a[href="http"] : a 태그 중에 속성 href의 값이 http인 모든 요소

11-3 : @[~=""]

a[href~="http"] : a 태그 중에서 속성 href의 값 중 http 가 포함된 모든 요소

11-4 : @[^=""]

a[href^="http"] : a 태그 중에서 속성 href의 값 중 http로 시작하는 모든 요소

11-5 : @[$=""]

a[href$="http"] : a 태그 중에서 속성 href의 값 중 http로 끝나는 모든 요소

12. 구조 가상 선택자

구조적 가상클래스란 문서 구조에서 위치나 다른 요소와의 관계에 따라

요소를 선택하게 해주는 선택자이다.

E:nth-of-type() E와 같은 유형인 요소중에 (n)번째인 요소

E:nth-child() E의 부모요소에서 n번째에 해당하는 자식요소

단, 그 n번째의 요소가 E와 같은 유형이 아닐경우 해당되지 않음

부모태그 해당요소:nth-child()

부모태그 해당요소:nth-of-type()

부모태그 해당요소:last-child

부모태그 해당요소:last-of-type

(괄호 안에) 음수가 들어가면 무시가 된다.

13. 상태 선택자

13-1

a:focus : 포커스가 있는 요소, 포커스란? 탭으로 넘어가지는 상태

ex) 플레이스테이션에서 스틱으로 포커스를 옮길 수 있다.

13-2

input:checked : 선택된 모든 input 요소( 선택이 가능한 것은 checkbox, radio 버튼)

14. 가상 선택자 (혹은 문자 선택자)

14-1

a::after : a 태그 요소의 뒷부분에 가상으로 만들어지는 요소를 선택

가상으로 만들어지기 때문에 가상 선택자라고도하고,

문자를 넣을 수 있어서 문자 선택자라고도 한다.

14-2

a::before : a 태그 요소의 앞 부분에 가상으로 만들어지는 요소를 선택

가상선택자

▶CSS에서 가상으로 컨텐츠를 추가 가능

▶html 에 들어가는 내용이 아니므로 스크린리더기가 정보를 읽지는 못함

▶꾸미는 효과로 주로 사용하고, 스크린 리더기가 읽으면 안되는 요소를 만들 때 사용

▶가상요소에 태그는 넣지 못하고 오로지 텍스트만 입력가능

CSS 색상

▶입력 방법이 다양함

⑴ 미리정해저 있는 컬러이름

EX) red, blue, green 등

⑵ RGB 색상코드를 사용하는 방법

EX) rgb(0,255,200)

⑶ RGBA 색상코드를 사용하는 방법

EX) rgba(0,100,255,0.3)

⑷ 16 진법 색상코드를 사용하는 방법

EX) #0042af

RGB (Red, Green, Blue)

▶Red, Green, Blue 빛의 3 원색을 조합하여 만드는 색상표로 0~ 255 까지의 범위를 가진다.

▶0 은 없음 즉 흑색을 255 는 백색을 의미한다

▶rgb(255,255,255) 는 백색

▶rgb(0,0,0) 은 흑색

16진법 표기 웹 색상 표기법

▶16 진법 : 0~F (0123456789 abcdef) 의 표현으로 색상을 표시하는 기법으로 6 자리를 가진다

▶#으로 시작해서 뒤에 red, greed, blue 의 채널을 16 진법으로 표시한다

EX) dc143c (다홍색)

▶단 3 가지 채널의 값이 모두 각각 같은경우 6자리가 아닌 3 자리로 쓸수있다

EX) #00ff33 => #0f3

display

▶레이아웃을 위한 속성이다. 태그의 속성을 변경 할 수 있다.

▶block, inline, inline-block, none / none 은 태그를 없애는 것

▶모든 HTML 요소는 display 속성의 초기 값이 미리 설정되어 있어 설정된 대로 요소가 화면에 표시된다.

▶inline-block 속성 : 인라인 방식에서와 같이 요소가 수평으로 배치되지만 줄 바 꿈은 일어나지 않는다.

→base는 인라인 속성이다.

요소의 위치를 정하는 속성 (Position)

▶위치라는 개념을 요소에 부여하기 위한 속성값으로 요소(element)의 좌표값을 부여하기 위해서 필수로 우선 부여해야된다.

▶브라우저의 좌표 : URL 창을 제외한 브라우저의 좌측 상단 지점이 기준점(0,0)이고 수평축(가로)을 X, 수직축(세로)을 Y로 둔다.

▶위치는 x, y, z 축의 개념이 있으며, x 는 left, rigth y 는 top, bottom 이 있고 z 는 z index 라는 요소가 있다.

▶sticky : 기본값, 움직임X

▶relative : 기준을 부여해줌. 브라우저의 좌상단이 항상 기준이라고 했는데 어느 위치에서 해당 요소를 기준점이라고 부여하면 기준점이 이동한다. 해당 요소에 아무런 영향을 끼치지 않음. 단순히 기준점만 가지고 온다.

▶absolute : 엄청 중요한 요소! 해당 요소에 지대한 영향을 끼친다. 자식 요소에 사용할 경우 부모요소가 인식을 하지 못한다. 해당 요소를 뜯어내 기준점 위에다 붙힌다.

▶fixed : 브라우저에 해당 요소를 고정. 유지시키는 속성. ex)네이버 웹 사이트에서 스크롤을 내려도 검색창은 고정된다. 단순히 포지션만 부여할 경우 사용

강제 줄 바꿈

▶br은 HTML에서 강제 줄 바꿈 태그이다.

▶CSS에서 white-space : 공백 문자 처리 방식을 지정 할 수 있다. css로 더 깔끔하게 줄 바꿈 지정 가능

EX) div {white-space : pre-line;} = <br>

CSS 텍스트 효과

배경(background)

▶background-color : 배경색상

▶background-image : 배경 이미지 지정

▶background-position : 배경 이미지의 위치를 지정

▶background-repeat : 배경 이미지를 반복할지 여부

▶background-size : 배경 이미지의 크기를 지정

▶한번에 사용 하려면 “color→image→repeat→position→attachment” 순서로 작성하며, 속성마다 띄어쓰기로 구분 (부여하지 않는 속성은 생략)

EX) p {background:red url('sample.jpg') no-repeat x10 y10 fixed;}

단! background-size는 한번에 사용되지 않는다.

IMG 태그 vs background

▶해당 콘텐츠 영역에서 중요한 의미를 가지는 이미지의 경우 img 태그를 사용한다. 그래야 alt 속성을 통해 스크린 리더기에서도 이미지를 접근 할 수 있으니까!

▶중요한 이미지이기 보다는 디자인을 위한 그림을 넣어야 할 때 background 속성을 이용한다.

css3의 기능

▶선택자(selector) : 스타일을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것.

▶박스모델(Box Model) : 모든 HTML 요소는 Box 형태의 영역을 가지고 있다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.

웹 디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.

▶HTML 요소 : 텍스트, 이미지, 동영상, 단락, 목록 등의 웹 페이지를 구성하고 있는 요소

▶경계선(border) : HTML 요소를 둘러싼 경계를 나타내는 선

▶마진(margin) : 경계선과 다른 외부의 요소와의 간격

▶패딩(padding) : 경계선과 HTML 요소 사이의 간격

▶배경과 경계 : CSS3는 그라데이션을 만들고, 여러 배경 이미지를 적용하고, 둥근 모서리를 만드는 기능을 포함하여 배경과 경계를 스타일링 하기 위한 더 많은 옵션을 제공

▶텍스트 효과 : CSS3는 텍스트 그림자, 텍스트 그라데이션 및 텍스트 래핑 제어하는 기능을 포함하여 텍스트 스타일을 위한 새로운 속성을 제공

▶변환 : CSS3는 회전, 축적, 스큐, 번역과 같은 새로운 변환 기능을 도입하여 요소의 모양, 크기, 위치를 조작할 수 있다.

▶애니메이션 및 전환 : CSS3는 애니메잇ㄴ 및 전환을 만들기 위한 새로운 속성을 제공하여 웹 페이지에 시각적 효과와 상호 작용을 추가할 수 있다.

▶미디어 쿼리 : CSS3는 다양한 화면 크기, 해상도 및 장치에 대해 다양한 스타일을 정의할 수 있는 미디어 쿼리를 도입.

※에릭 마이어(eric meyer)의 reset.css는 대표적인 reset 문서지만 자신의 환경에 맞춰서 하나씩 추가해 나가는 것이 좋다.

https://meyerweb.com/eric/tools/css/reset/

Box model

▶Content 는 요소에 실제로 들어가는 내용이 들어가는 영역이다. 이 영역의 크기는 width 와 height 속성으로 조정할 수 있다.

▶Padding 은 Content 와 Border 사이에 위치하며 , 요소의 내부 여백을 지정한다 . Padding 은 padding top, padding right, padding bottom, padding left 속성을 사용하여 각각의 면을 조절할 수 있다.

▶Border 는 요소의 외곽선을 지정하는 역할 . Border 는 border top, border right, border bottom, border left 속성으로 각 면을 조절할 수 있으며 스타일(style) , 두께(width) , 색상(color), 모서리의 둥굴기(radius) 등을 지정할수 있다.

▶Margin 은 Border 와 다른 요소들 사이의 간격을 지정하는 역할을 합니다 . Margin 은 margin top, margin right, margin bottom, margin left 속성을 사용하여 각 면을 조절할 수 있다.

▶margin :10px 20px; ⇒ 값을 두개 적으면 상·하값 / 좌·우값

▶3개의 값을 입력하면 상 / 좌·우 / 하

▶4개의 값을 입력하면 상/ 우 / 하 / 좌 ⇒ 시계방향

▶margin: 0px auto; or margin: 100px auto; ⇒ 가운데 정렬 가능(요소가 블록속성일 때)

→위 아래 간격은 0px 혹은 100px 거리를 두고 좌우는 컴퓨터가 알아서 맞춰주세요.

border, margin, padding

▶부모요소(element)에서의 패딩(padding)은 자녀요소(element)에겐 마진(margin)이다.

▶ [box-sizing : border-box;] : 선의 두께에 따라 px이 추가 될 수 있었는데 해당 명령에 따라 정해진 픽셀에 맞춰서 만들 수 있다.

문서의 스타일을 초기화 하는 이유?

▶브라우저가 기본적으로 적용하는 스타일을 제거, 웹 디자이너가 의도한 스타일링을 더 쉽게 할 수 있도록 하는것

▶브라우저마다 기본 제공 스타일이 다름. 기본 스타일 제거하지 않으면 웹디의 스타일을 적용하는데 어려움을 겪을 수 있다.