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를 붙이기가 까다로운 상황이 발생하는데 이럴 때 사용한다.
- * : 특정 단어를 포함하는 모든 선택자
- ^ : 특정 단어로 시작하는 선택자 = start with
- $ : 특정 단어로 끝나는 선택자 = 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 요소
- 태그 내에 존재하는 내용 만큼의 공간만 확보한다.
- width, height 값이 조정 불가하다.
② block 요소
- 태그 내에 존재하는 내용의 양과 상관 없이 한 Line을 독차지한다.
- 사이즈 조정이 가능하다. (사이즈 조정을 해도 1번특성은 없어지지 않는다.)
See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.
댓글남기기