학습 언어

CSS

학습 내용

1. 선택자

2. flex 레이아웃

3. 웹 폰트 사용 방법

4. 폰트

5. 단위

1. 선택자 

가상 클래스 선택자 / 가상 요소 선택자 / 형제 요소 선택자

1) 가상 클래스 선택자

1.first-child / first-of-type

first-child 와 first-of-type

first-child의 경우 부모의 첫번째 자식 요소와 CSS 선택자가 동일해야 적용됩니다.

부모의 첫번째 자식이 아닌 첫번째 태그에 CSS에 적용하기 위해서는 first-of-type를 사용해야합니다. 

last-child 와 last-of-type / nth-child() 와 nth-of-type() 도 동일합니다.

* nth-child(n+숫자) 를 입력할 경우 n번째부터 '숫자'번째 까지 효과 적용합니다.

.container p:**nth-of-tpye(3)**{
	color : red;
}

2. :active

**활성화된 요소를 선택**하는 가상 클래스 선택자입니다.

❗️ 활성화 된 요소란 버튼등을 클릭해서 요소의 동작이 활성화 되어있는 상태를 뜻합니다.

3. :focus

**focus를 받고있는 입력창들의 요소를 선택**하는 가상 클래스 선택자입니다.

❗️focus를 받고 있는 요소입력창의 커서가 활성화 되어있는 요소를 뜻합니다.

4. :visited

**사용자가 방문한 적 있는 링크를 선택**하는가상 클래스 선택자입니다.

❗️ 방문한 적 있는 링크는 말 그대로 링크를 눌러 해당 경로를 방문한 기록이 브라우저 상에 남아 있는 링크를 말합니다. 방문한 적이 있을 경우에는 기본적으로 보라색으로 표시합니다.

2) 가상 요소 선택자

:before , :after

<!-- 가상요소 선택자 사용시 html-->

<div class="box1">
 나는 박스1입니다.
</div>
.box1{
    width : 200px;
    height: 300px;
    background-color: yellow;
}
.box1:after{
    content:"나는 박스2입니다.";
    display: block;
    background-color: blue;
}

3) 형제 요소 선택자

A ~ B {
	property : value
}                                                 A와 같은 부모를 가지고 있는 형제 요소들 중 B만을 선택할 수 있습니다.

.text ~ span {
	background : red
}

2. flex 레이아웃 

1) flex-direction

2) justify-content

3) align-items

4) flex-wrap : flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것 인지 결정 (기본값 : nowrap)

5) align-content 

6) flex-flow (flex-direction과 flex-wrap의 단축 속성)

7) flex-item ; flex가 적용된 item들의 순서나 사이즈를 조절 할 수 있습니다.

flex-item 속성order : item의 순서를 지정합니다.flex-basis : item의 기본사이즈를 지정합니다.flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됩니다.flex-grow : flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.위의 속성 이외에도 flex-item에는 여러가지의 속성이 있습니다.

3. 웹 폰트 사용 방법

4. 폰트 관련 속성 _ 20강

1. font-size

2. font-weight

3. text-decoration

4. color

5. line-height : 텍스트의 행간을 설정

6. letter-spacing : 텍스트의 자간을 설정합니다.

7. word-spacing : 텍스트의 단어 간 간격을 지정합니다.

8. text-align : 블록요소나 표안에서 텍스트의 가로 정렬방식을 지정합니다.

9. vertical-align : 인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정합니다.

10. text-indent : 텍스트의 들여쓰기를 설정합니다.

11. text-transform: 영문 텍스트의 대소문자를 바꿀 수 있습니다.

12. word-break : 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정합니다.

13. overflow-wrap : 단어가 콘텐츠 박스 영역 밖으로 넘쳤을때, 줄바꿈 여부를 설정합니다.

14. overflow : 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄 지 설정합니다.

15. text-overflow : 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정합니다.

5. 단위

1.절대 단위

외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위 (px, pt, cm, m, ms 등)

px = 화소 ( 디지털 화면은 수많은 작은 네모들로 구성이 되어있으며, 이 네모 한 칸이 1px입니다. )

2. 상대 단위

외부 요인의 영향을 받아 유동적인 값을 지니는 단위 (%, rem, em )

1) %

  • 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.

2) em

  • 스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정합니다. (부모가 아닌 본인 font-size 속성값에 비례)
  • /* font-size : 16px 인 경우 */ 1em => 16 * 1 = 16px 0.8em => 16 * 0.8 = 12.8px 3em => 16 * 3 = 48px

3) rem

  • 최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.
  • /* font-size : 16px 인 경우 */ 1rem => 16 * 1 = 16px 0.8rem => 16 * 0.8 = 12.8px 3rem => 16 * 3 = 48px

폰트 관련 속성 디테일

1. font-size

2. font-weight

3. text-decoration : 텍스트에 장식용 선을 추가합니다.

text-decoration: underline | overline | line-through | none

4. color

/* rgb색상 이용시 */
color : rgb(0,0,0)

5. line-height : 텍스트의 행간을 설정

6. letter-spacing : 텍스트의 자간을 설정합니다.

7. word-spacing : 텍스트의 단어 간 간격을 지정합니다.

8. text-align : 블록요소나 표안에서 텍스트의 가로 정렬방식을 지정합니다.

*justify를 이용해서 띄어쓰기 구격을 변경하여 끝을 맞춰 줄 수 있습니다.

9. vertical-align : 인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정합니다.

10. text-indent : 텍스트의 들여쓰기를 설정합니다. (단위 :px, %)

11. text-transform: 영문 텍스트의 대소문자를 바꿀 수 있습니다.

12. word-break : 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정합니다.

13. overflow-wrap : 단어가 콘텐츠 박스 영역 밖으로 넘쳤을때, 줄바꿈 여부를 설정합니다.

14. overflow : 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄 지 설정합니다.

15. text-overflow : 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정합니다.

text-overflow: clip | ellipsis

❗️ text-overflow를 적용하기 전 선행 조건

  1. white-space : nowrap;
  2. overflow : hidden;

overflow-wrap vs word-break

-> 언뜻 보기에 두 속성은 비슷한 역할을 하는 것 같습니다. 어떤 차이점이 있을 까요?

break-all을 사용하는 word-break의 경에는 모든 단어를 음절 단위로 쪼개게 됩니다. 따라서 예시와 같은 문장의 경우엔 오히려 문단을 읽기가 불편해집니다.

반면에 break-word를 사용하는 overflow-wrap같은 경우에는 사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈을 합니다. 단어가 길어서 content 영역 밖으로 넘칠때에만 단어 중간에 줄바꿈을 하게 됩니다. 따라서 가독성이 좋겠죠?

소감

+ Recent posts