FE가 되고싶니? 나도✨

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이 추가 될 수 있었는데 해당 명령에 따라 정해진 픽셀에 맞춰서 만들 수 있다.

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

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

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

HTML 속성 class, id

▶HTML 태그는 태그 내에 속성(Attribute)을 가질 수 있다.

▶속성은 HTML 태그가 가지는 특성을 지정

▶속성은 태그에 대한 추가 정보를 제공, 어떻게 표시, 기능이나 동작과 관련된 정보를 전달 하는 등 다양한 용도로 사용된다.

▶속성의 이름과 값은 “=”기호로 구분된다.

▶수학에서의 등호와 다름. “등호의 오른쪽에 있는 값을 왼쪽에다 대입한다.” 라는 뜻이다.

▶id는 고유해서 하나만 가질 수 있고 class는 원하는 대로 부여할 수 있다.

▶각 태그에는 반드시 필요한 속성과 옵션인 속성도 있는데 속성은 태그마다 다르다.

▶for과 id는 이름이 같아야 한다. NAME에 for과 id랑 똑같이 들어가도 되지만 연결된것은 아님. 백엔드 개발자들이 열어보지 않아도 확인 할 수 있게 해주는 것. 

▶라벨은 항목들을 하나로 묶어주는 역할도 한다. ex) 취미 항목에서 스포츠, 독서, 음악감상의 name을 hobby로 통일시킴

▶취미에 라벨태그가 붙지 않는 건 여러가지 중에 선택 할 수 있기 때문이다.

▶name : 백엔드 개발자에게 알려주는 이름(라벨)

▶id : label의 for과 같은 이름을 부여해주어야함.

▶value : 컴퓨터에게 진짜 값을 알려주는것.

→스포츠가 스포츠인걸 인식시켜줌.

▶radio : 여러 개 중에 하나 선택 할 수 있음.

<form> : 서식

▶웹 페이지에서 사용자가 키보드로 데이터를 입력하거나 마우스로 선택할 수 있는 서식을 폼(form)양식이라고 한다.

▶<input> : 입력요소 / type : 입력방식

▶form : get

→<form action="회원가입 완료 후 보여줄 페이지로 보내줌" method="get"></form>

→ex)회원가입 완료창, 로그인창, 메인창 등

▶form : post

→get, post는 백엔드 개발자가 정해줌. 프론트엔드 개발자에겐 권한이 없다.

▶<fieldset> : 폼 태그를 감싸는 또 하나의 태그

→회원가입을 페이지 한 줄로 할 땐 별로 의미 없지만 간혹 두, 세 개를 가로 페이지로 나눠져서 회원가입을 할 때가 있음. 그 땐 폼을 두개 쓰는게 아니라 필드셋을 2개를 써주는 것이다.

▶<legend> : 필드셋의 제목 태그

→ex)회원가입 양식 폼 : 보통 미각적으로 예쁘지 않아서 사용자의 시각에 보이게 적진 않는다. But 접근성, 스크린 리더기가 읽어줄 때 무슨 내용에 관한것인지 알아야 하기 때문에 적긴 한다. 안보이게만 할 뿐.

<table> : 웹 페이지에 테이블을 삽입 할 때

▶<table border=“숫자"> ⇒ 요즘엔 회원가입 할 때만 거의 사용

▶테이블 태그에서 제목은 h1을 사용하지 않음, <caption>을 사용

▶<tr> : 테이블의 행(=가로, 줄, row)을 만드는데 사용

▶<th> : 각 열(=세로, 칸, column)의 제목을 만드는데 사용

▶<td> : 각각의 셀을 표현하는데 사용, 테이블의 설명

▶thead - 정보가 되는 테이블

▶tbody- 내용이 되는 테이블

<table> 태그 응용, 셀 합치기

▶테이블은 좌측 상단부터 우측으로 차례대로 숫자를 부여한다.

▶가로 테이블 합치기 :　합쳐서 지울 셀을 먼저 지우고, 앞에 있는 테이블은 놔둔다.

ex)7, 8 번의 테이블이라면 8번은 지우고 7을 놔둔다

→7번 의 태그 코드에 colspan 을 적고 합칠 줄의 갯수만큼 입력한다. 

<td colspan="2">7</td>

▶세로 테이블 합치기 : 합쳐서 지울 셀을 먼저 지우고 앞에 있는 테이블은 놔둔다.

ex)5, 10번의 테이블 합치기 : 5번을 놔두고 10번을 지운다

→5번의 태그 코드에 rowspan을 적고 합칠 행의 갯수만큼 입력한다.

<td rowspan="2">5</td>

→가로, 세로 다 합치기 : 14,15,19,20을 하나의 테이블로 합치려고 하면 15, 19, 20은 지우고 14에다가 태그 붙여준다.

<td colspan="2" rowspan="2">14</td>

※가로 = row 지만 세로 테이블을 합칠 때 rowspan을 사용, 세로 = column 이지만 가로 테이블을 합칠 때 colspan을 사용한다.