CSS

숩·2022년 3월 16일
CSS
0

Web

목록 보기
2/5

CSS(Cascading Style Sheets)

in-line

  • CSS 적용하는 방법 - 태그에서 style 속성을 이용하는 방법
    : 간단하게 적용할 때는 편리하지만 다양한 css 또는 여러개의 태그에 동일한 css를 적용할 때는 불편 
<h1 style="color:red;font-family:궁서체">CSS 적용하는 방법 알아보기</h1>
<h1 style="color:red;font-family:궁서체">CSS 적용하는 방법 알아보기</h1>
<h3 style="color:red;font-family:궁서체">CSS 적용하는 방법 알아보기</h3>

internal

  • CSS 적용하는 방법2 - 현재 문서에 style태그를 만들어서 적용하는 방법
  1. 태그 이름으로 찾기
    : 여러개의 태그에 동일 속성을 적용할 때는 콤마로 구분, 하나의 속성의 값이 여러개일때는 공백으로 구분
h1{color:red; font-family:궁서체}
h1,h3{border:double 5px skyblue}
  1. class 이름으로 찾기 = .
    : 한 element에 여러개 적용 가능(공백으로 구분)
.a{background-color:pink}
.b{text-decoration:underline}
  1. id 이름으로 찾기 = #
    : 한 element에 단 한개의 id만 설정 가능 
#a{font-style:italic; font-size: 40px}
#b{text-align:center}
  1. 특정 element를 기준으로 하위 요소 찾기 
div > p{background-color:orange}
  1. 속성으로 찾기 [attribute=value]
[type=text]{background-color:blue}
[name$=d]{color:white;} /* $는 끝나는 단어 */
[name^=na]{color:pink} /* ^는 시작하는 단어 */

external

  • CSS 적용하는 방법3 - 외부에서 ~.css로 연결하기 
<link rel="stylesheet" type="text/css" href="css/basic.css">

<div>, <span>

  • div태그는 block요소로 한 행을 차지한다.
<div class="a">하잉1</div><div class="b">하잉2</div><div class="c">하잉3</div>
  • span 태그는 in-line요소로 content가 있는 만큼만 공간을 차지한다.
<span id="a">하잉1</span><span id="b">하잉2</span><span id="c">하잉3</span>

font 속성

  1. font
    : 모든 font속성을 이용한 스타일을 한 줄에 설정가능하다.(style weight size/ line-height family)
  2. font-family
  3. font-size
  4. font-weight
  5. font-style

text 속성

  1. color
    : 텍스트 색상
  2. letter-spacing
    : 글자 사이 간격 설정
  3. word-spading
    : 단어 사이 간격 설정
  4. text-indent
    : 단락 첫줄 들여쓰기 여부 설정
  5. text-align
    : 텍스트 수평 방향 정렬 설정
  6. text-decoration
    : 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
  7. text-transform
    : 텍스트에 포함된 영문자에 대한 대소문자 설정
  8. line-height
    : 텍스트의 줄 간격 설정
  9. text-shadow
    : 텍스트에 그림자 효과 설정 
{color:red;}
{letter-spacing:10px;}
{word-spacing:10px;}
{text-indent:30px;}
{text-align:left;}
{text-decoration:underline;}
{text-transform:uppercase;}
{line-height:0.8;}
{text-shadow:2px 1px black;}
  1. link
    : 링크의 기본 상태, 한번도 연결된 페이지를 방문하지 않은 상태
  2. visited
    : 사용자가 한 번이라도 연결된 페이지를 방문한 상태
  3. hover
    : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
  4. active
    : 사용자가 마우스로 링크를 클릭하고 있는 상태
  5. focus
    : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태 
{color:red;}
{color:gray;}
{color:orange;}
{color:brown;}

list-style 속성

  1. list-style-type
    : 리스트 요소의 앞에 위치하는 마커(숫자나 기호)를 다양하게 변경 가능
  2. list-style-image
    : 이미지로 마커 설정 가능
  3. list-style-position
    : 리스트 요소의 위치 설정 가능 
{list-style-type:circle;}
{list-style-image:url("img/b.gif");}
{list-style-position:indisde;}

background 속성

  1. background-color
    : 배경색 설정
  2. background-image
    : 배경 이미지 설정, 기본으로 수평, 수직 방향으로 모두 반복되어 나타남
  3. background-repeat
    : 수평이나 수직방향으로만 반복되도록 설정 가능, 한번만 나타나게도 가능
  4. background-position
    : 반복되지 않는 배경 이미지의 상대 위치(relative position) 설정
  5. background-attachment
    : 위치가 설정된 배경 이미지를 해당 위치에 고정 가능(스크롤 내려도 그대로 유지)
{background-color:blue;}
{background-image:url("img/b.jpg");}
{background-repeat:no-repeat;}
{background-position:top-center;}
{background-attachment:fixed;}

padding 속성

  • 내용(content)과 테두리(border) 사이의 간격 크기 설정
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left
  5. 모든 padding 속성을 한 줄에 설정 가능
    • padding:50px; - 상하좌우
    • padding:50px 20px; - 상하 좌우
    • padding:50px 20px 40px; - 상 좌우 하
    • padding:50px 20px 40px 10px; - 상 우 하 좌
{padding-top:50px;}
{padding-right:20px;}
{padding-bottom:40px;}
{padding-left:10px;}
{padding:50px 20px 40px 10px;}

border 속성

  • 내용(content)과 패딩(padding)영역을 둘러싸는 테두리 스타일 설정
  1. border-style
    : 테두리(border)를 다양한 모양으로 설정 가능
  2. border-width
    : 테두리의 두께 설정
  3. border-color
    : 테두리의 색상 설정
  4. border-radius
    : 모서리의 둥근 정도 설정 
{border-style: solid double dashed dotted;} /* 상 우 좌 하 */
{border-width: 5px 15px 10px;} /* 굵기 */
{border-color: black blue;}
{border-radius: 20px 50px 300px 100px;}

Margin 속성

  • 테두리(border)와 이웃하는 요소 사이의 간격 크기 설정
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left 
{margin-top:30px;}
{margin-right:5px;}
{margin-bottom:10px;}
{margin-left:20px;}
{margin:30px 5px 10px 20px;}

box-sizing

크기를 유지하면서 주어진 크기 안에서 margin, border, padding을 줄 수 있다.

  • width = width + padding + border - width
  • height = heigth + padding + border - height
box-sizing: border-box;

display 속성

  1. 블록(block)
    • 항상 새로운 라인에서 시작, 해당 라인의 모든 너비 차지
      : <div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소
  2. 인라인(inline)
    • 새로운 라인에서 시작하지 않음, 요소의 너비는 HTML 요소의 내용(content)만큼만 차지
      : <span>, <a>, <img>요소는 대표적인 인라인(inline) 요소
      : inline요소에는 width, height 안된다
      (margin-left, margin-right는 가능하나 margin-top, margin-bottom은 안된다.)
  3. 인라인-블록(inline-block)
    • 해당 요소 자체는 인라인(inline) 요소처럼 동작, but 해당 요소 내부에서는 블럭(block) 요소처럼 동작
      : 인라인과 비슷하지만 width, height 설정 가능 
{display:block;}
{display:inline;}
{display:inline-block;}

position 속성

  1. static - 기본 설정
    • HTML요소의 위치를 결정하는 가장 기본적인 방식
      : top, right, bottom, left 속성값에 영향 받지 않음
      : 단순히 웹 페이지의 흐름에 따라 차례대로 요소를 위치시키는 방식
  2. relative
    • HTML요소의 기본 위치를 기준으로 위치를 설정하는 방식
      : HTML요소의 기본 위치는 static position 방식일 때 결정되는 위치 의미
  3. fixed
    • 뷰포트(viewport)를 기준으로 위치를 설정하는 방식
      : 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치
  4. absolute
    • 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작
      위치가 설정된 조상 요소를 기준으로 위치 설정
      : 위치가 설정된 조상 요소를 가지지 않으면 HTML 문서의 body 요소를 기준으로 위치 설정
  5. z-index
    • 겹쳐지는 요소들이 쌓이는 스택의 순서를 설정
      : 순서는 양수나 음수 모두 설정 가능, 크기가 클수록 앞쪽에 위치
{position:relative;}
{position:fixed;}
{position:absolute;}
{z-index:-1;}
profile
숩
이전 포스트

HTML

다음 포스트

jQuery

0개의 댓글

관련 채용 정보