POPULAR POSTSMORE POST

    -

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [CSS]Day3~4 - CSS/글자 속성
    Frontend 2019. 2. 9. 22:16

    Day3~4 -CSS/글자 속성-

    [1] HTML 태그 분류

    • Block Level: fieldset / blockquote / form / ul , ol , li / h1~h6 / p / div / table관련 tag /  address / noframes / center/ dir / hr / menu / dl / pre 
    • Inline Level: a / img / span / br / input / strong / label / textarea / i / select / u / iframe / strike / abbr / button / sub / q / font / q


    [2] 적용 방법

    1. head태그

    <head>
            <style type="text/css">
                ....css코드 작성...
            </style>
    </head>

    2. 외부 파일 링크

    <head>
            <link rel="stylesheet" type="text/css" href="외부 파일 경로" />
    </head>


    [3] Selector

    1. tag 이름

    h1 { color: #222; }

    2. 클래스

    .class { color: #222; }   --->복수 지정 가능 / 재사용 목적

    3. id

    #id {color: #222; }   --->id값 중복 사용 금지

    4. 조합형: h1.class / h1#id


    5. 일괄 지정: h1, h2, p { color: #222; }



    6. 가상 클래스:

    ---<a>태그와 같이 사용---
    :link (기본) / :active {마우스가 눌러진 상태) / :hover {마우스가 올라간 상태) / :visited (방문했던 경험 있는 링크) /
    :focus (요소에 포커스가 지정된 상태) / :checked (체크박스,라디오 버튼 체크된 상태) / :selected {드롭다운에서 선택된 요소)


    7. 자식 셀렉터: HTML의 계층구조를 순차적으로 >를 사용하여 표현한 것.

    div>span>input.form_control

    <div>
            <span><input class="form_control"/></span>
    </div>
    <!-- 특정 요소에 적용된 CSS는 자식 요소에게도 상속됨 -->


    8. 자손 셀렉터: HTML의 계층구조를 공백을 사용하여 표현한 것. 순차적일 필요X

    div span input.form_control

    <div>
    ...?...
           <span>...?...<input class="form_control"/>...?...</span>
    ...?...
    </div>


    9. 속성 셀렉터: html 태그의 속성과 값을 []에 표현

    a[href]
    a[href="#"]
    #hello[method="post"]
    .choose[value="123"]


    10. nth-child: CSS 셀렉터가 복수 요소일 때 그 중 몇 번째인지를 결정

    .item:nth-child(2) ---->item이라는 클래스를 갖는 요소 중 2번째
           :nth-child(odd) -홀수
           :nth-child(2n) -짝수
           :nth-child(3n) -3의 배수
           :nth-last-child(숫자) -뒤에서부터 카운트


    [4] CSS 셀렉터는 점수가 높은 형식 우선 적용됨
    tag-1점 / class-10점 / id-100점 / html tag에 직접 style 속성 사용 - 1000점




    -글자 관련 속성-

    [1]

    • font-family: "돋움", "굴림", "Helvetica"; --->여러 개 지정 가능
    • font-size: 사이즈(12px, 0.8em, 120%)

              * em : 브라우저 확대 시 함께 커짐, 소수점 처리 가능

                       사용하고자 하는 px크기 / 16 =em값

    • font-style: normal / italic
    • font-weight: normal / bold
    • line-height: 한 줄의 높이 (30px, 120% 등)
    • color: 글자 색상


    -일괄 지정- {font: [bold] [italic] [font-size] [/line-height] font-family;}
                        ex) font: bold italic 12px/30px "돋움";
     

    [2]

    • text-align: left/center/right - text와 inline레벨 요소만 정렬
    • text-indent: 첫 줄 들여쓰기- px값(음수값 가능)
    • text-decoration: none(기본값)/underline(밑줄)/overline(윗줄)/line-through(취소선)
    • vertical-align: 어떤 요소를 기준으로 한 세로축 위치-top/middle/bottom   --->ex)이미지를 기준으로 세로축 위치
    • white-space: 줄바꿈 속성 제어 -normal/nowrap

              normal: 공백에서 자동 줄바꿈

              nowrap으로 지정하면 줄 바꿈 안함(block level를 뚫고 나감)

    • word-wrap: normal(기존과 같이 공백 단위 줄바꿈-공백없으면 줄바꿈 안함) / break-word(공백 상관없이 박스 끝에서 텍스트가 강제 줄바꿈)

    word-wrap은 white-space가 적용된 상태에서 추가 지정

    • white-space: nowrap; overflow:hidden; text-overflow: ellipsis;

                           ->자동 말줄임 처리

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    • letter-spacing: 글자간격-px값
    • word-spacing: 단어간격-px값


    <3> 글자에 그림자

    * text shadow: x-offset(px)  y-offset(px)  blur-radius(px)  color;
    x,y-offset:음수 지정 가능


    * 그림자 중첩 사용 가능
    text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3;





    반응형

    'Frontend' 카테고리의 다른 글

    [CSS]Day6 -Display/Float  (1092) 2019.02.09
    [CSS]Day5 - CSS 박스 모델  (0) 2019.02.09
    [HTML]Day3 - input태그를 이용한 입력양식  (0) 2019.02.09
    [HTML]Day2 - 문장 꾸미기/테이블/멀티미디어  (0) 2019.02.09
    [HTML] Day1 - HTML의 기본구조  (0) 2019.02.09

    RELATED POSTS MORE

    COMMENT

티스토리툴바