홈페이지 만들기 - CSS[6]

CSS속성

• 공간
• 위치
• 글자

 

글자

font로 시작하는 속성

: 텍스트의 글꼴, 크기 등 텍스트 스타일을 수행하는 속성들

 

text로 시작하는 속성 

: 텍스트의 정렬, 텍스트 변환 등과 같은 텍스트 조작을 수행하는 속성들

 

font

 

font-style: 이탤릭체 등의 글꼴 스타일 지정

#normal {
      font-style: normal;
    }
#italic {
    font-style: italic;
    }

font-weight: 글자의 두께

#lighter {
      font-weight: 100;
    }
#bolder{
      font-weight: 900;
    }

100-900까지 있으며 얇게서부터 굵게 간다.

 

• 100(lighter, 얇게)

• 400(normal, 보통)

• 700(bold, 굵게)

• 900(bolder, 더 굵게)

 

font-size: 글자의 크기

 

글자의 크기를 숫자 뒤에 단위(px, %, em 등)를 통해 지정할 수 있다.

 

※스마트폰과 태블릿이 나오면서 반응형 단위인 vw(브라우저 넓이), vh(브라우저 높이)를 사용한다.

 

 

font-family: 글꼴을 지정

#sans-serif {
      font-family: sans-serif;
    }

글꼴의 이름을 값으로 가진다.

 

※웹폰트: 웹 사용자에게도 동일한 글꼴을 보여준다.(설치 및 설정 없이)

/*임의의 폰트 설정*/
@font-face{
  font-family: 임의의 폰트 이름;
  src: url(폰트의 경로);
}
/*폰트 적용*/
적용할 태그 명{
  font-family: 위에 적은 폰트 이름;
}

 

 

순서대로 한꺼번에 사용할 수 있다.

/*각각 사용 예시*/
#text1 { font-size: 19px }
#text2 { font-weight: bold }
#text3 { font-style: italic }
#text4 { font-family: "궁서" }
/*한꺼번에 사용*/
#text4{ font: italic bold 20px serif; }/*스타일 굵기 크기 글꼴 순으로 사용*/

 

 

text

text-decoration: 글자에 선을 넣어주는 속성

#line-through {
      text-decoration: line-through;
    }
#overline{
      text-decoration: overline;
    }
#underline{
      text-decoration: underline;
    }

 

text-align: 글자를 정렬한다.

#left {
      text-align: left;/*좌로 정렬*/
    }
#right{
      text-align: right;/*우로 정렬*/
    }
#center{
      text-align: center;/*중앙 정렬*/
    }

 

보통 블락 요소 내의 공간에서 text를 정렬한다.

 

인라인 요소는 공간 자체가 텍스트에 딱 맞기 때문에 정렬이 무의미하다.

 

 

 

 

 

 

 

 

 

 

vertical-align: 인라인 요소들의 수직 정렬에 사용된다.

img{
  vertical-align: 100px;
}
span{
  vertical-align: top;
}

인라인 요소들 간의 수직 정렬이므로 블락요소에 하면 효과가 없다.

 

Ex) 어떤 블락 요소를 수직으로 옮기려고 시도한다면 실패할 것이다.

 

 

 

 

 

 

 

 

 

 

 

 

text-indent: 문단의 들여쓰기를 하는 속성

p {
  text-indent: 1em;
 }

※text-indent속성으로 영역은 필요하고 접근성에도 필요하지만 텍스트를 없애고 싶은 경우

  text-indent:-9999px;을 해주면 화면 저 멀리 사라진다.

 

 

 

text-transform: 대소문자를 지정할 수 있는 속성

p {
  text-transform: uppercase;/*대문자*/
}

※HOME 같은 경우 발음을 홈이 아닌 H O M E로 따로 발음하기 때문에 소문자로 넣어야 하지만 대문자로 넣고 싶은 경우에 text-transform을 활용해준다.(접근성과 밀접한 관련이 있다.)

 

 

 

line-height: 줄 높이를 설정하는 속성

 

기본적으로 줄과 줄 사이의 간격이 있다. 그것을 설정할 수 있는 속성이다.

 

#px {
        line-height: 25px;
      }
#em {
        line-height: 1.6em;
      }

 

 

letter-spacing, word-spacing: 각각 글자, 단어의 공간에 대한 속성이다.

 

숫자 뒤에 단위를 적어서 사용하고 글자마다, 단어마다 공간을 넓히거나 좁힐 수 있다.

 

 

 

white-spacing: 줄 바꿈에 대한 속성이다.

 

normal: 기본 값. 자연스럽게 줄 바꿈이 일어난다.

 

nowrap: 줄바꿈이 일어나지 않는다. 심지어 브라우저 밖으로 가도 일어나지 않는다. <br/>을 사용해도 일어나지 않는다.

 

pre: 브라우져 밖으로 가도 줄 바꿈을 쓰지 않는다면 줄 바꿈이 일어나지 않는다. 사용하면 일어난다.

 

pre-linepre: 띄어쓰기의 공백은 보여지지 않고(물론 글 내에서 띄어 쓰는 것은 보임) 줄 바꿈은 일어난다. 

 

pre-wrappre: 박스를 벗어나지 않는 pre라고 볼 수 있다.

 

 

overflow

마지막으로 배경과 텍스트에서 공통적으로 사용할 수 있는 overflow속성에 대해 알아보자

 

overflow-visible : 기본 값. 넘칠 경우 컨텐츠가 박스 밖으로 보인다.

 

overflow-hidden : 박스 밖으로 넘치는 부분은 잘려서 보이지 않는다.

 

overflow-scroll : 스크롤바가 추가되어 스크롤링할 수 있다. (가로, 세로 모두 추가.)

 

overflow-auto : 콘텐츠 양에 따라 스크롤바를 추가할지 자동으로 지정한다.(추가하는 방향으로 자동 추가됨.)

 

 

※텍스트 박스에도 이 속성을 사용하지만 레이아웃을 짤 때 

   overflow:hidden;을 통해 float 값을 해제하기 위해서도 사용한다.

 

 

그 외에도 많은 CSS속성들이 있다. 

 

그 외의 속성들은 실습(홈페이지 카피)을 통해 알아보도록 할 것이다.

 

 

 

 

 

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

 

그럼~ 앙 제바