우선 순위 / font & text / vertical-align / list Style

 < 우선 순위 > 

❑ 동일한 선택자는 나중(최근)에 생성된 선택자의 우선순위가 더 높음
⇨ .main-content 태그명{ }의 경우 우선 순위가 더 높아짐 (= 구체적으로 선택)

❑ *(= 모든 선택자) > tag > class > id > inline style > ! improtant

⇨ ! improtant는 억지로 바꾸는 것이기 때문에 되도록 쓰지 않는 것이 좋음

❑ HTML에 색상을 적용하지 말고 CSS 스타일에 꼭 작성할 것
⇨ ex) <p id="desc" style="color:brown"> (X)

<style>
        #desc{
            color:pink !important;
        }        
        .main-content p{
            color:red;
        }
        .main-content p{
            color:yellow;
        }
        p{
            color:blue;
        }
        p{
            color:green;
        }
</style>

---

 < font  / text > 

❑ 웹폰트

⇨ 나눔고딕에서 noto sans kr로 바뀌는 추세

⇨ 웹 사이트에 최대 3개 이하로 쓰는 것이 좋음

⇨ 폰트에 두께를 적용할수록 용량이 늘어남

❑ system font (= 상업용 폰트, 추가용 폰트)
⇨ 클라이언트가 요구 시 사용
⇨ 구현하기 전 클라이언트한테 폰트가 한 번 나오는 지, 여러번 나오는 지, 수정 할 일이 있는지 묻기

⇨ 수정 시 웹폰트로 변환하고 수정이 없다면 그림 저장(title, png)
❑ web site font load (= 웹 사이트에서 폰트 불러오는 방법)
⇨ @font-face {src: } 태그를 이용하여 웹서버(내 서버)에서 직접 가져오기
⇨ 웹 사이트 폰트 사용시 직접 운영하는 서버에 트래픽이 소모됨

<style>
	/* 
		@font-face {
		font-family: '폰트명';
		src: url(폴더이름/폰트이름.확장자) format('폰트확장자')'
	}
	*/
        @font-face {
            font-family: 'nanum gothic';
            src: url(fonts/NanumGothic.woff) format('woff');
            src: url(fonts/NanumGothic.ttf) format('truetype');
        }
</style>

 

❑ CDN (= 타 서버에서 가져오기)
⇨ 연결이 안 되면 폰트 변경이 일어남
❑ 구글 폰트 (= fonts.google.com)
⇨ link : HTML / @improt : CSS

 

# text-decoration

❑ underline, none 가장 사용 많음
❑ outline (= 포커스, 테두리)
❑ border

 

# letter spacing (= 자간)

❑ word-spacing (= 글자간의 간격)
❑ line-height (= 글자의 높이)

⇨ 가장 이상적인 수치: 16px * 1.618 = 25.888 (24~27)

❑ 포토샵 Text 자간

⇨ 포토샵 자간을 CSS로 표현 할 때 (= em으로 표현)

1em = 1000
0.1em = 100
0.01em = 10
0.02em = 20

    <style>
        body {
            width: 600px;
            margin: 0 auto;
            border: 1px solid;
        }
        .right{
            text-align: right;
        }
        .left{
            text-align: left;
        }
        .center{
            text-align: center;
        }
        .justify{
            text-align: justify;     /* 양쪽 정렬 */
            word-break: break-all; /* 단어를 깨서 끝에 공백을 없애줌 */
        } 
        span{
            text-align: right;
            display:block; /* 공간을 줌 */
        }
    </style>

 

# text-align

box의 text-allign 표현

        a{
            width: 300px;
            height: 80px;
            background-color: #000;
            color: #fff;
            display: block;
            text-align: center;
            line-height: 80px;
        }

 

# text-indent

❑ text 들여쓰기 (= 태그{text-indent}: px;)

⇨ 왼쪽에서 px만큼 들여써짐

❑ text 내어쓰기 (= 태그{text-indent}: -px;)

⇨ 왼쪽으로 px만큼 내어써짐

<style>
        h1{ text-indent:30px; }
        h2{ text-indent:-9000px;}
</style>

 

# text-transform

❑ text를 소문자/대문자 적용시킬 때

⇨ lowercase(소문자) / uppercase(대문자)

❑ text의 앞글자를 대문자로 변경시킬 때

⇨ capitalize

<style>
        h2{ text-transform: uppercase; }
        h3{ text-transform: lowercase; }
        h4{ text-transform: capitalize; }
</style>

---

 < vertical-align > 

❑ img , video는 inlinen block

<style>
        .line {
            border: 1px solid #000;
        }
        .sub{
            vertical-align: sub;
        }
        .super{
            vertical-align: super;
        }
        .top{
            vertical-align: top;
        }
        .text-top{
            vertical-align: text-top;
        }
        /* 텍스트 윗라인에 맞춤 */
        .middle{
            vertical-align: middle;
        }
        .bottom{
            vertical-align: bottom;
        }
        .text-bottom{
            vertical-align: text-bottom;
        }
        /* 텍스트 끝라인에 맞춤 */
        .pixel{
            vertical-align: 0px;
        }
        /* 숫자를 올릴수록 위로 올라감(0 초과) 
        숫자를 내릴수록 아래로 내려감(0 미만) */
        img{
            vertical-align: bottom;
        }
        /* img 사용시 꼭 사용! 
        top or bottom 둘 다 사용 가능 */
</style>

 

# list style

❑ list-style-type

⇨ disc, circle, square

<style>
        /*
        nav > ul > li{
            list-style-type: square;
        }
        */
        
        nav > ul > li > ul > li > ul > li{
                list-style-type: disc;
        }
        /* 줄여서 li li li {list-style-type: disc;} -> 사용 추천 안함 */
        
        ol{
            list-style-type: '\1F44D';
        }
        /* CSS는 역슬래쉬 붙이기 */
        
        .menu{
            list-style-image: url('img/bullet.png');
        }
        /* 사용 잘 안함 */
</style>