Ruby's Diary

서체: font-family
크기: font-size
색상: color
두께: font-weight
수평 정렬: text-align
선을 넣거나 제거: text-decoration
대/소문자 지정: text-transform
그림자: text-shadow
자간: letter-spacing
행간: line-height

글꼴 관련 스타일

font-family 속성 - 글꼴 지정하기

font-family:글꼴 이름;

@font-face 속성 - 웹 폰트 사용하기 

@font-face { 
    font-family:Aboreto;
    src:url('../fonts/Aboreto-Regular.eot');
    src:url('../fonts/Aboreto-Regular.woff') format('woff');
}

구글 웹 폰트 사용하기 : https://fonts.google.com/

@import 소스 복사해서 사용

웹 폰트 업로드 하여 사용하기 

웹 폰트 변환하여 사용

font-size 속성 - 글자 크기 조절하기

font-size: 글자 크기(px 또는 em 등);

1em = 15.8px

font-weight 속성 - 글자 굵기 지정하기

font-weight: nomal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 ...;

텍스트 스타일

color 속성 - 글자 색 지정하기

color:색상;

글자색 바꿀 때 사용

색상 값은 16진수나 rgb 또는 rgba, hsl 또는 hsla, 색상이름으로 지정 가능

text-decoration 속성 - 텍스트에 줄 표시하기 / 없애기

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

text-transform 속성 - 텍스트 대소문자 변환하기

text-transform: none | capitalize | uppercase | lowercase | full-width;

text-shadow 속성 - 텍스트에 그림자 효과 주기

text-shadow: none | 가로거리 세로거리 번짐 정도 색상;

text-shadow:1px 1px 2px #000;

text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 만듬

letter-spacing과 word-spacing 속성 - 텍스트 간격 조절하기

letter-spacing: nomal | 크기;
word-spacing: nomal | 크기;

letter-spacing은 낱 글자 사이 간격을 조절 (자간조절)

word-spacing은 단어와 단어사이 간격을 조절

문단 스타일

direction 속성 - 글자 쓰기 방향 지정

direction: ltr | rtl;

텍스트 방향을 지정하는 속성

ltr : 왼쪽에서 오른쪽으로 텍스트를 표시 (기본값)

rtl : 오른쪽에서 왼쪽으로 텍스트를 표시

text-align 속성 - 텍스트 정렬하기

text-align:start | end | left | right | center | justify | match-parent;

text-align 속성은 문단의 텍스트 정렬 방법을 지정

속성 값으로 워드나 한글 문서 작업 때 흔히 사용하는 '왼쪽 정렬', '오른쪽 정렬', '가운데 정렬' 등으로 지정

line-height 속성 - 줄 간격 조절하기

line-height: nomal | 숫자 | 크기 | 백분율 | inherit

line-height 속성을 이용하면 원하는 만큼 줄 간격을 조절할 수 있음

text-overflow 속성 - 넘치는 텍스트 표기하기

text-overflow: clip | ellipsis;

👍 텍스트를 줄바꿈하지 않고 끝부분을 ... 으로 표시

1. 텍스트 줄바꿈을 제거한다.

white-space:nowrap;

2. 텍스트가 박스이 너비값을 넘어서면 ... 으로 표현한다.

text-overflow:ellipsis;

3. 박스 영역 외부를 안보이게 지정한다.

 overflow:hidden;

목록 스타일

list-style-type 속성 - 목록의 불릿과 번호 스타일

list-style-type : none | 순서 없는 목록의 불릿 | 순서 있는 목록의 번호;

list-style 속성 - 목록 속성 한꺼번에 표시하기

list-style:none;

중국어회화 (13)

护士：先生，发生什么事情了？
hù shì ：xiān shēng ，fā shēng shen me shì qíng le ？
간호사: 선생님, 무슨 일이 발생했나요?

敏洙：这位女士刚刚遇到了一场车祸。
mǐn zhū ：zhè wèi nǚ shì gāng gāng yù dào le yī chǎng chē huò 。
민수: 이 여성분을 방금 교통사고에서 만났습니다.

*车祸(chēhuò) 교통사고

护士：请冷静一下，先生。医生马上给她做检查。
hù shì ：qǐng lěng jìng yī xià ，xiān shēng 。yī shēng mǎ shàng gěi tā zuò jiǎn chá 。
간호사: 진정해주세요, 선생님. 의사선생님이 곧 그녀를 진찰해주실겁니다.

*请冷静一下(qǐnglěngjìngyīxià) 냉정하세요, 진정하세요

敏洙：谢谢。
mǐn zhū ： xiè xiè 。
민수: 고맙습니다.

护士：请填一下这张表。
hù shì ：qǐng tián yī xià zhè zhāng biǎo 。
간호사: 이 표를 작성해주세요.

医生：你的额头上有些轻微的擦伤。
你能告诉我还有别的地方受伤吗？

yī shēng ：nǐ de é tóu shàng yǒu xiē qīng wēi de cā shāng 。
nǐ néng gào sù wǒ hái yǒu bié de dì fāng shòu shāng ma ？

의사: 이마에 작은 철과상을 입었군요.
저에게 다른곳의 부상을 알려주실 수 있습니까?

*额头(étóu) 이마
*轻微(qīngwēi) 가벼운
*擦伤(cāshāng) 철과상을 입다
*受伤(shòushāng) 부상을 입다

珍妮弗： 我的手腕有点疼。
Zhēnnīfú： wǒ de shǒu wàn yǒu diǎn téng 。
제니퍼: 제 손목이 조금 아프네요.

*手腕(shǒuwàn) 손목, 팔목

医生：我看看。
yī shēng ：wǒ kàn kàn 。
의사: 제가 볼게요.

珍妮弗：哎哟，疼。
zhēn nī fú ：āi yō ，téng 。
제니퍼: 아이구, 아파요.

医生：你最好去照一下X光。
yī shēng ：nǐ zuì hǎo qù zhào yī xià X guāng 。
의사: X-Ray를 찍어보는게 좋을 것 같군요.

4대 웹 콘텐츠
웹 콘텐츠는 텍스트, 이미지, 비디오, 오디오가 있으며, 웹 콘텐츠를 저장할 때 태그를 사용한다.

    <p>텍스트</p>
    <div class="box">이미지
        <img src="imgs/pelican.jpg" alt="팰리컨">
    </div>
    <video muted autoplay preload loop>비디오
        <source src="media/video.mp4" type="video/mp4">
    </video>
    <audio src="media/audio.mp3" muted cotrols>오디오

웹에서 사용하는 이미지 형식

1. GIF (Graphic Interchange Form)

2. JPG / JPEG (Joint Photographic Experts Group)

3. PNG (Portable Network Graphics)

이미지 삽입하기 <img>태그

<img src="경로" alt="이미지설명">

웹에 이미지를 삽입할 때 사용하는 태그

<img>태그의 필수 속성인 src에는 이미지의 경로를 입력하고, alt에는 이미지에 대한 설명을 입력 (웹 접근성 향상) 

스크린 리더에서 alt값을 읽어 알 수 없는 여러 오류들로 이미지를 표시할 수 없을 때 alt 텍스트 내용을 대신 가져와 보여줌

경로란?

절대 경로 : 이미지(리소스)가 원래 가지고 있는 절대적인 고유한 경로

ex) 웹 이미지 절대경로(http://www.naver.com/ruby.png), PC컴퓨터 절대경로(C:\user\ruby\ruby.png)

상대 경로 : 작성하는 파일의 위치가 경로의 시작점인 경로 (루트디렉토리)

ex) / 또는 상위 폴더 ../ 또는 하위 폴더 

하이퍼링크(hyperlink)란?

정보구조를 구성할 때 반드시 필요한 것이 '하이퍼 링크 기능'이다. 

하이퍼 링크 기능은 웹 페이지를 전환하는 기능이다. 

하이퍼 링크 기능은 <a> 태그로 구현한다.

링크 만들기 <a>, 속성 href

<a href="링크할 주소"></a>

요소(시작 태그 < + 웹콘텐츠 + 끝 태그 >) 유형은 세가지가 있다.

1. 블록형(block) 요소
너비값이 100%로 줄바꿈한다. 레이아웃 스타일시트 적용이 잘 된다.
ex) <img>, <a>, <input>, <label>, <span> 외 나머지

2. 인라인-블록형(inline-block) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 된다.
ex) <img>

3. 인라인형(inline) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 안된다.
ex) <a>, <input>, <label>, <span>

제목 태그 <hn>

<h1>제목</h1>

제목을 뜻하는 heading의 줄임말인 'h'와 제목 크기를 나타내는 숫자(1~6)을 사용하여

<h1> <h2> <h3> <h4> <h5> <h6> 으로 표현한다.

<h1> 이 가장 큰 제목, <h6> 이 가장 작은 제목 이다.

단락 만들기 <p>

<p>텍스트</p>

텍스트를 표시할 때 가장 많이 사용하는 태그

paragraph의 줄임말로 텍스트 단락을 만드는데 너비값에 따라 자동으로 줄바꿈 처리 된다.

줄 바꾸기 <br>

<br>

줄 바꿀 위치에 <br>태그를 사용, break의 줄임말로 닫는 태그가 없다. (단일태그)

줄바꿈 없이 영역묶기 <span>

<span>내용</span>

텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용

그 외 수평줄 넣기 <hr>태그, 인용문 넣기 <blockquote>태그, 입력하는 그대로 화면에 표시하기 <pre>태그,

굵게 표시하기 <strong>태그와 <b>태그, 이탤릭체로 표시하기 <em>태그, <i>태그, 인용 내용 표시하기 <q>태그,

형광펜 효과내기 <mark>태그, 동아시아 글자 표시하기 <ruby>태그, 아래 첨자 <sub>태그, 위 첨자 <sup>태그 등이 있다.

순서 없는 목록을 만드는 태그 : 목록태그 <ul>, 항목태그 <li>

<ul>
    <li>내용</li>
    <li>내용</li>
</ul>

순서가 필요하지 않은 목록(unordered list)를 만들 때 <ul> 태그를 사용

<ul> 태그 안에 <li> 태그(list item)를 사용해 각 항목을 표시

순서 있는 목록을 만드는 태그 : 목록태그 <ol>, 항목태그 <li>

<ol>
    <li>내용</li>
    <li>내용</li>
</ol>

항목을 나열하되 순서가 필요한 목록(ordered list)을 만들 때 <ol> 태그를 사용

속성값을 이용해 목록의 숫자와 순서를 지정해 줄 수 있음

표를 만드는 태그 <table>, 행 <tr>, 열 <td>와 <th> 태그

<table>
    <tr>
        <td>내용</td>
        <td>내용</td>
        . . . . . .
    </tr>
    . . . . . .
</table>

<table> 태그로 표 자리를 만듬 (stylesheet 적용O)

<tr>태그로 행을 만듬 (stylesheet 적용X)

<td>태그로 각 행마다 열을 만듬 (stylesheet 적용O)

<th>태그는 <td>대신 사용하여 칼럼의 제목을 굵게 표시할 수 있음

표 구조 정의 <thead>, <tbody>, <tfoot> 태그

table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이 합쳐진 태그이며,

표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문

그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI 요소 - 테이블</title>
    <style>
        table {border:3px dotted blue;}
        th {border:3px dashed orange;}
        td {border:3px solid red;}
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
        </tr>

        <tr>
            <td>1</td>
            <td>제목 테스트01</td>
            <td>작성자01</td>
            <td>2023-08-10</td>
        </tr>
    </table>
</body>
</html>

CSS 이란?

Cascading Style Sheets 의 줄임말

위에서 아래로 흐르는 스타일 시트

HTML이 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면

CSS는 웹 문서의 디자인 요소를 담당하며 웹 문서에 생기를 불어 넣어 주는 역할을 한다.

스타일 우선순위 - 위에서 아래로 적용

스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 적용

다른 어떤 스타일보다 최우선으로 적용해야 할 스타일 시트는 !important

스타일 시트 적용 범위 (Specificity)

하나의 요소에 여러 스타일이 적용 될 경우 스타일이 충돌되기 때문에 우선순위를 정할 수 있다.

인라인 스타일 시트 → 내부 스타일 시트 →  외부 스타일 시트
→ 아이디 선택자 → 클래스 선택자 → 태그 선택자 → 전체 선택자

스타일 시트 적용 기본 문법

선택자 { 스타일속성 : 속성 값 }

선택자( Selector ) 는 요소를 선택한다.

기본 선택자

(약) 전체 선택자( * ) < 태그 선택자( 요소명 ) < 클래스 선택자( . ) < 아이디 선택자( # ) (강)

전체 선택자 ( * ) Universal Selector

모든 요소에 스타일을 적용 할 때 사용한다.

태그 선택자 ( 요소명 ) Tag Selector

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

클래스 선택자 ( . ) Class Selector

특정 부분에만 스타일을 적용 할 때 사용한다.

기억하기 쉬운 이름을 임의로 지정

아이디 선택자 ( # ) Id Selector

클래스 선택자와 아이디 선택자의 가장 큰 차이는 클래스 선택자가 문서 안에서 여러번 적용 가능하다면

아이디 선택자는 문서 안에서 한번만 적용할 수 있다. 중복해서 사용이 불가능 하다.

그룹 선택자 ( , ) 

쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 코드 사용량을 줄일 수 있다.

자식 선택자 ( > )

바로 밑에 있는 직속 자식에 한에서 적용하는 선택자

하위 선택자 ( ) - 띄어쓰기

안에 속해 있는 태그는 한 칸 띄우고 적용하는 선택자

인접 형제 선택자 ( + ) ex) A + B

처음에 적은 A의 바로 뒤 B에꺼만 적용하는 선택자

A와 가장 가까운 곳에 있는 인접 형제만 선택하는 선택자

일반 형제 선택자 ( ~ ) ex) A ~ B

A의 밑에서부터 B포함 까지 적용하는 선택자

:nth child(n), first-child, last-child 구조적 가상 클래스 선택자

first-child : 부모 요소 기준 첫번째 자식

last-child : 부모 요소 기준 마지막 자식

nth-child(n) : 부모 요소 기준 n번째 자식

nth-child(2n) 또는 (even) : 부모 요소 기준 짝수 번째 자식

nth-child(2n+1) 또는 (odd) : 부모 요소 기준 홀수 번째 자식

가상클래스 선택자 :hover, :active, :focus, ::before, ::after 등

스타일 시트 주석 처리 방법

/* 이 사이에 주석처리할 내용을 적어 줍니다. */ 

스타일시트 적용 방법
1. 인라인 스타일 시트 적용 (강)
2. 내부 스타일 시트 적용 (중)
3. 외부 스타일 시트 적용 (약) - 주로 사용 ( 유지보수의 효율성 )

스타일 속성 작성 순서

선택자 {
    [박스 유형 속성:display]
    [위치 속성:position, left, right, top, bottom]
    [박스 속성:width, height, margin, padding]
    [글자 속성]
    [배경 속성: background]
    [테두리 속성: border, border-radius]
    [박스 그림자 속성: box-shadow]
    [전환 속성: transition]
    [변형 속성: transform]
    [애니메이션: animation]
}