HTML&CSS(4)

안정태·2021년 4월 25일
CSS
0

HTML&CSS

목록 보기
5/10

CSS의 기본

웹 문서에 디자인 입히기

왜 스타일을 사용할까?

  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

스타일과 스타일 시트

스타일 형식 알아보기

선택자 { 속성1 : 속성값1; 속성2 : 속성값2 } - 기본형

스타일 시트 알아보기

스타일 시트에는 브라우저 기본 스타일과 사용자스타일로 나뉘어 진다.
그리고 사용자 스타일은 다시 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉘어 진다.

  • 브라우저 기본 스타일 : CSS를 사용하지 않은 문서가 표시되는 스타일
  • 인라인 스타일 : 스타일을 표시할 대상에 직접 표시하는 방식, HTML의 태그 안에 style=""이렇게 사용
  • 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에서 정리하는 방식, HTML의 <head>태그 안에 정의
  • 외부 스타일 시트 : 스타일 정보를 따로 저장해 놓은 방식, HTML의 <head>태그 안에 <link>태그를 걸어준다.
    <link rel="stylesheet" href="외부 스타일 시트 파일 경로"> - 기본형

CSS 기본 선택자 알아보기

  • * : 전체 요소에 스타일을 적용하는 전체 선택자
    <태그> !== <요소> : 태그는 그 자체, 요소는 태그를 적용한 것
  • 타입 선택자 : 특정 요소에 스타일을 적용하는 선택자
    태그명 { 스타일 규칙 } - 기본형
  • 클래스 선택자 : 특정 부분에 스타일을 적용하는 선택자
    .클래스명 { 스타일 규치 } - 기본형
  • id 선택자 : 특정 부분에 스타일을 한 번만 적용하는 선택자
    #아이디명 { 스타일 규칙 } - 기본형
  • 그룹선택자 : 같은 스타일 규칙을 사용하는 요소들을 묶어주는 선택자
    선택자1, 선택자2 { 스타일 규칙 } - 기본형

캐스케이딩 스타일 알아보기

캐스케이딩 - 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정

스타일의 우선순위

  • 얼마나 : 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
  • 적용 범위는 : !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
  • 만약 중요도와 적용범위가 같다면 정의한 소스 순서로 우선순위가 정해진다. 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

스타일 상속

스타일 시트에서 자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달 되는데, 이것을 스타일 상속이라고 한다.

텍스트를 표현하는 다양한 스타일

글꼴 관련 스타일

  • font-family : 글꼴을 지정하는 속성
    font-family: <글꼴 이름> || [<글꼴 이름>,<글꼴 이름>] - 기본형
  • font-size : 글자 크기를 지정하는 속성
    font-size: <절대 크기> || <상대 크기> || <크기> || <백분율> - 기본형
    단위
    • em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
    • rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
  • font-style : 이탤릭체로 글자를 표시하는 속성
    font-style: normal || italic || oblique - 기본형
    • normal : 기본값으로 일반적인 형태로 표시
    • italic : 이탤릭체로 표시
    • oblique : 이탤릭체로 표시
  • font-weight : 글자 굵기를 지정하는 속성
    font-weight: normal || bold || bolder || lighter || 100 || 200 || ... || 800 || 900 - 기본형

웹 폰트 사용하기

기본형

@font-face {
    font-family: <글꼴 이름>;
    src: <글꼴 파일> [<글꼴 파일>, <글꼴 파일>, ...];
}

  1. 구글 폰트 사이트에서 원하는 웹 폰트
    구글 폰트

  2. 원하는 텍스트를 골라서 [+Select this style] 클릭 -> 이어서 [@import] 클릭후 브라우저 창 오픈

  3. 웹 문서에 스타일 소스 넣고 결과 확인

<style>
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
    h1 {
      font-size:60px;
      font-weight:bold;  
      font-family: 'Nanum Pen Script', cursive;     
    }
</style>

텍스트 관련 스타일

  • 글자 색을 지정하는 color 속성

    기본형
    color: <색상>

  • 텍스트를 정렬하는 text-align 속성

    기본형
    text-align: start | end | left | right | center | justify | match-parent

    • justify : 양쪽에 맞추어 문단을 정렬

  • 줄 간격을 조절하는 line-height 속성

    글자를 세로로 가운데 정렬하려면 line-height의 속성을 추가하여 영역의 높이를 나타내는 height의 속성값과 똑같이 지정하면 된다.

  • 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

    값으로는 none, underline, overline, line-through 가 있다.

  • 텍스트에 그림자 효과를 추가하는 text-shadow 속성

    기본형
    text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

  • 텍스트의 대소 문자를 변환하는 text-transform 속성

    값으로는 none, capitalize, uppercase, lowercase, full-width가 있다.

    • full-width : 전각문자 - 가로와 세로 길이가 같은 글자, 반각은 가로, 세로 1:2

  • 글자 간격을 조절하는 letter-spacing, word-spacing 속성

    주로 letter-spacing을 사용해서 조절한다.

목록 스타일

  • 불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

    값으로는 disc, circle, square, decimal, decimal-leading-zero, ...이 있다.

  • 불릿 대신 이미지를 사용하는 list-style-image 속성

    기본형
    list-style-image: <url(이미지 파일 경로)> | none

  • 목록을 들여 쓰는 list-style-position 속성

    기본형
    list-style-position: inside | outside;

  • 목록 속성을 한꺼번에 표시하는 list-style 속성

    기본형
    list-style: [type], [image], [position]

표 스타일

  • 표 제목의 위치를 정해 주는 caption-side 속성

    기본형
    caption-side: top | bottom

  • 표에 테두리를 그려 주는 border 속성

    기본형
    border: <크기> <형태> <색상>;

  • 셀 사이의 여백을 지정하는 border-sqacing 속성

    기본형
    border-spacing: 수평거리 수직거리

  • 표와 셀 테두리를 합쳐 주는 border-collapse 속성

    값으로 collapse, separate가 있다.

profile
안정태
코딩하는 펭귄
이전 포스트

HTML&CSS(3)

다음 포스트

HTML&CSS(5)

0개의 댓글