JAVA 웹개발 과정 국비 33일차 정리

33일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

32일에는 시험을 봤다.
오늘은 CSS를 배우는 날이다.

1. CSS

1) CSS란?

Cascading Style Sheet.
생성되어 있는 HTML Element Layout 및 색깔, 크기, 애니메이션 등등의 꾸밈 효과를 주는 언어.

2) CSS의 구조

대부분 External CSS 방식을 많이 사용한다.

① External CSS

CSS 전용 파일을 생성해서 외부 파일을 참조하여 HTML을 작성하는 방식.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

② Internal CSS

CSS 관련 내용을 HTML 상단부에 작성하는 방식.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

③ Internal CSS

HTML 태그의 속성으로서 CSS가 작성되는 방식.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

3) 여러가지 선택자

태그 선택자, id 선택자 등은 ,(콤마)로 여러개 스타일을 한번에 지정해 줄 수 있다.

① 전체 선택자 *

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

② 태그 선택자

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

③ id 선택자 #

중복을 불허하여 단일 항목에 부여할 스타일을 설정한다.
#를 안붙이면 태그로 인식하므로 꼭 #를 붙여준다.
id는 두 개 이상 같은 요소를 붙이지 않는 것이 좋다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

④ 클래스 선택자 .

겹쳐도 상관없는 class 속성을 쓰면 여러개에 스타일 적용이 편하다.

• 클래스 : 사용자 정의로 분류된 카테고리

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑤ 속성 선택자 [ ]

속성 선택자가 다른 선택자보다 큰 범위를 가진다.
id를 쓰거나, 아무렇게나 써도 동작한다.
프레임 워크 등을 쓸 경우, ID를 붙이기가 까다로운 상황이 발생하는데 이럴 때 사용한다.

1. * : 특정 단어를 포함하는 모든 선택자
2. ^ : 특정 단어로 시작하는 선택자 = start with
3. $ : 특정 단어로 끝나는 선택자 = end with

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑥ 자손 선택자 >

부모 태그의 바로 밑(직계) 태그만 선택 가능하다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑦ 후손 선택자 (띄어쓰기)

후손은 자손을 포함하는 모든 밑에 있는 것이다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑧ 동위 선택자 + ~

선택자	설명
+	바로 뒤의 동위 태그를 선택한다. 앞쪽은 선택 불가능하다.
~	뒤쪽의 모든 특정 태그를 선택한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑨ 반응 선택자

사용자가 어떤 액션을 취했을 때 발생하는 선택자이다.
아래 예제의 cursor : pointer 속성은 커서 모양을 손가락 모양으로 바꿔주는 기능이다.

선택자	설명
hover	마우스를 요소 위에 올렸을 때
active	요소를 클릭하고 있을 때(누르고 있는 상태)

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑩ 구조 선택자

선택자	설명
first-child	처음 직계 자손
last-child	마지막 직계 자손
nth-child(순번)	직계 자손 중 n번째 자손
nth-of-type(순번)	선택한 것 중에서 n번째 인 자손

nth-child와 nth-of-type 의 차이를 잘 이해해야 하는데, nth-child와 선택한 것 두 개의 관계는 and 조건으로 둘 중 하나라도 조건이 false라면 아예 style이 적용되지 않는다.
p:nth-child(2)는 p 태그 중에 2번째 인 것이 아니라, p 태그이면서 2번째 인 것으로 해석해야 하며,
p:nth-of-type(2)는 p태그 중에서 2번째 인 것 이라고 해석해야 한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑪ 가상 선택자

선택자	설명
link	링크 클릭 전 상태
visited	링크 클릭 후 상태

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑫ not 선택자

파이썬에서 not과 같은 역할을 하는 선택자.
괄호 안의 조건과 일치하지 않는 것들은 선택한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

⑬ 선택자 우선순위

하나에 여러 스타일이 겹치게 되면 아래쪽이 스타일을 덮어 쓰게되어 아래쪽 스타일이 보여진다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

스타일을 지정하는 선택자 사이에는 우선순위가 존재한다.
이해하기 쉽도록 얘기한다면 선택자는 범위가 넓을 수록 우선순위가 떨어진다.

선택자 우선순위
(낮음) 전체 선택자 < 태그 선택자 < 클래스 선택자 < id 선택자 < inline-style < important (높음)

important는 가장 우선순위가 높은 키워드로 !(느낌표)와 함께 사용한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

4) 실습 문제

CSS Diner 라고 구글에 검색하면 CSS 선택자 연습 게임을 할 수 있다.

수업에서 들었던 부분을 게임으로 적용해 볼 수 있어서 좋았다.
막히면 오른쪽에 hint가 있기 때문에? 재밌고 쉽게 풀 수 있었다!

5) Layout

레이아웃 변화 과정
Table -> span + inline-block (패) VS div + float (승) -> flex

초창기에 레이아웃을 Table 태그로 만들었는데, 사용성이 좋지 않아서 발전한 레이아웃 방법이 바로 span + inline-block 과 div + float 방법이다.
두 방법 모두 레이아웃 용도로 쓰이던 태그들을 사용하는 것이 아니기 때문에 불편한 점이 있었으나 block 파가 우세하여 두 방법 중에는 div + float 파가 승리하였다.
그리고 flex라는 방식이 탄생했는데, 여전히 div+ float도 현업에서 많이 쓰이기 때문에 알아둘 필요가 있다고 한다.

div + float 방식으로 레이아웃을 만드는 방법을 배우기 전에, inline 요소와 block 요소의 차이점을 알아두어야 한다.
CSS에 display 속성을 주면, inline / block / inline-block 중 하나를 적용할 수 있다.

① Inline 요소

1. 태그 내에 존재하는 내용 만큼의 공간만 확보한다.
2. width, height 값이 조정 불가하다.

② block 요소

1. 태그 내에 존재하는 내용의 양과 상관 없이 한 Line을 독차지한다.
2. 사이즈 조정이 가능하다. (사이즈 조정을 해도 1번특성은 없어지지 않는다.)

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.