본문 바로가기
Front-End/HTML & CSS

CSS(1)

by newny 2023. 2. 3.
반응형

✅CSS

  • Cascading Style Sheets의 약자
  • 웹 페이지의 스타일을 별도의 파일로 저장할 수 있음
  • 웹 사이트의 스타일을 일관성 있게 유지, 그에따른 유지보수가 쉬워짐
  • 외부 스타일 시트는 보통 확장자를 .css 파일로 저장
  • 요소(element), 속성(property, attribute), 선택자(selector)

 

✅CSS문법

  • 선택자(selector)와 선언부(declaratives)로 구성
  • 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌈
  • 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결
  • 종결문자 세미콜론(;) 사용

 

✅주석

/* CSS 주석 입니다 */

--background-color: blue; /*속성 빼기주석 "--" */

 

✅선택자(selector) - 크롤링에 필수!

선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킴

CSS 선택자 (Selector) - 조합 선택자 (자식, 자손, 형제) (tistory.com)

 

전체 선택자(*)

HTML모든 요소를 선택

 

HTML 요소 선택자 (선택자 불러오기 : 태그)

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택

 

아이디(id) 선택자 (선택자 불러오기 : #)

  • CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
  • 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용하게되면 자바스크립트 작업시 오류 발생

 

클래스(class) 선택자 (선택자 불러오기 : 도트(.))

  • CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
  • 같은 클래스 이름을 가지는 요소들을 모두 선택

 

그룹(group) 선택자

  • 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용
  • 그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결
  • 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줌
<style>

    h1 { color: navy; }

    h1, h2 { text-align: center; }

    h1, h2, p { background-color: lightgray; }

</style>

 

자식 선택자

  • 계층구조에서 바로 아래 오는 자식요소만을 선택
  • 원하는 태그만 선택
div > p {스타일;}

 

자손 선택자

  • 계층 구조에서 하위에 오는 모든 자손을 선택한다
  • 하위태그까지 모두 선택
div p {스타일;}

 

자식선택자와 자손선택자와 병행 또는 멀티구조

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>조합 선택자</title>
    <style type="text/css">
        /* 멀티레벨 */
        .txt3 p{color: #f0f;}/* 하위 모든 p 선택 */
        .txt3 > p{font-size : 20px;} /*자식만 선택*/
        .txt3_1 > p{text-decoration: underline;}/* 손자만 선택 */
        .txt3_2 > p{font-family: "굴림";}/* 증손자만 선택 */
        .txt3_1 p{border: 1px solid #000;} /*손자와 증손자 선택*/
    </style>
</head>
<body>
    <div class="txt3">
        <p>자식</p>
        <div class="txt3_1">
            <p>손자</p>
            <div class="txt3_2">
                <p>증손자</p>
            </div>
        </div>
    </div>
</body>
</html>

 

✅CSS 적용

인라인 스타일(Inline style)

HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

<body>

    <h2 style="color:green; text-decoration:underline">

        인라인 스타일을 이용하여 스타일을 적용하였습니다.

    </h2>

</body>

 

내부 스타일 시트(Internal style sheet)

HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용

<head>

    <style>

        body { background-color: lightyellow; }

        h2 { color: red; text-decoration: underline; }

    </style>

</head>

 

외부 스타일 시트(External style sheet)

  • 웹 사이트 전체의 스타일을 하나의 파일에서 변경
  • 외부에 작성된 스타일 시트 파일은 .css 확장자를 사용
  • CSS 파일 여러 개 적용 가능
  • 스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용
<head>

    <link rel="stylesheet" href="/examples/media/expand_style.css">

</head>

body { background-color: lightyellow; }

p { color: red; text-decoration: underline; }

 

스타일 적용의 우선순위

웹 브라우저 기본 스타일 < 내부/외부 스타일 시트 < 인라인 스타일

 

✅CSS색상 표현

색상이름 / 16진수 / rgb함수로 표현가능

color:red; / color:#FF0000; / color:rgb(255,0,0);

 

✅한글표현

@charset "UTF-8"
/* 문자 인코딩(표현방식) UTF-8
    반드시 첫줄에 와야함 */

2byte : 완성형 / 3byte~ : 조합형

 

 

✅CSS 배경

background 속성들

background-color, background-image, background-position

body { background-color: lightblue;
			 background-image: url("/examples/images/img_background_good.png"
			 background-position: top right;
}

 

background-repeat

기본 설정으로 수평 수직 반복되는 이미지를 수평만 반복, 수직만 반복, 반복 해제로 설정할 수 있음

body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }

 

background-attachment

스크롤과는 무관하게 화면의 위치에서 이동하지 않음

body { background-attachment: fixed; }

 

속성 한번에 적용

body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }

 

 

✅CSS 텍스트

<style>
  body { color: red;                    /*1.글자색*/

				 direction: rtl;                /*2.왼쪽에서 오른쪽 방향으로 텍스트가 쓰이게 설정(right to left)*/

				 letter-spacing: 10px;          /*3.문자 사이 간격 조정*/

				 word-spacing: 5px;             /*4.단어 사이 간격 조정*

				 text-indent: 20px;             /*5.들여쓰기*/

				 text-align: right;             /*6.정렬 방식 설정 (오,왼,센터)*/
				 text-align: left;
				 text-align: center;

				 text-decoration: underline;    /*7.텍스트 효과 설정,제거 (밑줄)*/

				 text-transform: uppercase;     /*8.텍스트에 포함된 영문자에 대한 대소문자를 설정*/
				 text-transform: lowercase;     /*대문자, 소문자, 첫 문자만 대문자*/
				 text-transform: capitalize;

				 line-height: 20px;             /*9.줄간격*/

				 text-shadow: 3px 2px black;    /*10.그림자 넣기(수평,수직,그림자색상)*/
  }
<style>

 

✅CSS 글꼴

font-style 속성

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용

<style>
	p {font-style: normal   /*어떠한 스타일도 적용하지 않음*/
		 font-style: italic;  /*이탤릭체로 나타냄*/
		 font-style: oblique; /*텍스트를 기울임*/
	}
<style>

 

font-family 속성

  • 폰트 설정
  • 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있음
  • 쉼표로 여러 글꼴을 등록할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시킴
  • 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용하게됨
<style>
    .serif { font-family: "Times New Roman", Times, serif; }
    .sansserif { font-family: Arial, Helvetica, sans-serif; }

</style>

 

font-weight 속성

  • 텍스트 두께 표현
  • 사용할 수 있는 속성값에는 ligher, nomal, bold, bolder등이 있음
  • 숫자로 텍스트 두께 설정 가능
<style>
    .normal { font-weight: normal; }
    .bold { font-weight: 600; }
    .bolder { font-weight: bolder; }
</style>

 

font-size 속성

  • 텍스트의 크기 조정
  • 웹디자인에서 매우 중요한 표현 요소
  • 두가지 방식으로 표현 가능 (절대적 크기, 상대적 크기)상대적 크기: 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수 있음
  • 절대적 크기: 명시된 크기 그대로 설정, 모든 웹 브라우저에서 같은 크기로 표현됨

font-size 속성값에 자주 사용되는 대표적인 크기 단위

  • %(백분율) : 기본크기 100%, 상대적인 크기 설정
  • em(배수) : 해당 글꼴의 기본크기를 1em으로 놓고, 그에대한 상대적인 크기를 설정
  • px : 스크린의 픽셀을 기준으로하는 절대적인 크기

 

 

✅CSS 링크

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있음

text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있음

 

링크(link)의 상태

총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있음

  1. link : 기본 상태, 해당 링크를 한번도 사용하지 않은 상태
  2. visited : 한 번이라도 해당 링크를 사용한 상태
  3. hover : 마우스 커서가 링크 위에 올라가 있는 상태
  4. active : 마우스로 링크를 클릭하고 있는 상태
  5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태
<style>
	a:link { color: olive; }
	a:visited { color: brown; }
	a:hover { color: coral; }
	a:active { color: khaki; }
</style>

 

링크를 활용한 버튼만들기

<style>
    a:link, a:visited {
        background-color: #FFA500;
        color: maroon;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    a:hover, a:active { background-color: #FF4500; }
</style>

 

 

✅CSS 테이블

border 속성

  • 테이블의 테두리를 설정할 수 있음
  • 해당 예제를 실행해보면 테이블 안에 또 테이블이 형성되어 두줄로 표현되는것을 알 수 있음
  • 한줄로 설정하고 싶다면 border-collapse 속성을 사용해야함

table, th, td { border: 2px solid orange; } /* 두께, 선 종류, 색상 */

 

 

 

border-collapse 속성

테이블의 테두리를 한줄로 설정할 수 있음

table, th, td { border: 2px solid orange; }
table { border-collapse: collapse; }

 

 

border-spacing 속성

테이블 요소(th, td)간의 여백을 설정

table, th, td { border: 1px solid black; }
table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }

 

text-align 속성

테이블 내부 텍스트의 수평 방향 정렬을 설정

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
td { text-align: center; }

 

vertical-align 속성

테이블 내부 텍스트의 수직 방향 정렬을 설정

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { vertical-align: top; height: 50px; }
td { vertical-align: bottom; height: 50px; }

 

 

✅CSS 박스 모델

크기 단위 (가장 많이 쓰이는 단위3개)

  1. 백분율 단위(%)
  2. 배수 단위(em)
  3. 픽셀 단위(px)

 

패딩(padding)

  • 테두리(border)기준 안쪽 여백
  • 넓이 조정시 배경색도 조정됨
  • 패딩 영역의 크기는 방향별로 따로 설정가능

 

패딩 축약 표현

  • 4개의 속성값 : top / right / bottom / left (top 시작 시계방향)
  • 3개의 속성값 : top / right, left / bottom
  • 2개의 속성값 : top, bottom / right, left
  • 1개의 속성값 : 전체 영역
<style>

    div.four { padding: 20px 50px 30px 50px; }

    div.three { padding: 20px 50px 30px; }

</style>

 

테두리(border)

border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정

 

테두리 축약 표현

두께, 스타일, 컬러 순으로 설정

<style>

    .good { border: 3px solid teal; }

    .wrong { border: 5px teal; }

</style>

 

마진(Margin)

  • 테두리(border)기준 바깥쪽 여백
  • 배경색상에 영향 받지 않음
  • 영역의 크기는 방향별로 따로 설정가능

 

마진 축약 표현

  • 4개의 속성값 : top / right / bottom / left (top 시작 시계방향)
  • 3개의 속성값 : top / right, left / bottom
  • 2개의 속성값 : top, bottom / right, left
  • 1개의 속성값 : 전체 영역
<style>

    div.four { margin: 20px 50px 30px 50px; }

    div.three { margin: 20px 50px 30px; }

</style>

 

margin의 속성값 auto

  • 수평을 기준으로 가운데 정렬
  • 부모태그 기준, 가운데 정렬

 

반응형
저작자표시 비영리 변경금지

'Front-End > HTML & CSS' 카테고리의 다른 글

CSS(2)  (0) 2023.02.06
HTML(2)  (0) 2023.02.02
HTML(1)  (0) 2023.02.01

관련글

댓글

티스토리툴바