블록체인 기술사업 교육 20일차

Mecodata 2023. 4. 28. 09:00

CSS(Cascading Style Sheets)

- HTML, XHTML, XML 등의 마크업 언어로 작성된 문서에 레이아웃, 텍스트 스타일링, 애니메이션, 효과 등을 꾸미기 위한 스타일 시트 언어

작성 방법

– 인라인 스타일 = style 속성에 스타일 시트 작성

– 임베디드 스타일 = <style> 태그에 스타일 시트 작성 (<head> 내에 JSON 형식으로 입력) => 속성값 입력시 ; 필수
– 링크 스타일 = 스타일 시트를 별도 파일로 작성 => <link>(<head> 내에 입력)나 @import(<style> 내에 입력)로 불러와 사용

※ CSS로 같은 태그를 중복으로 속성을 지정해줄 경우 가장 마지막에 선언한 속성이 우선적으로 적용됨 (위 => 아래)

<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<style>
@import url(mystyle.css); /* 링크 스타일 1 */
p { color : red; font-size : 15px; } /* 임베디드 스타일 - 모든 p 태그에 적용 */
</style>
<link href="mystyle.css" type="text/css" rel="stylesheet"> <!-- 링크 스타일 2 -->
</head>
<body>
<p>김치</p> <!-- 빨간색 15px -->
<p style="color:yellow">치킨</p> <!-- 인라인 스타일, 노란색 15px(오버라이딩) -->
</body>
</html>

스타일 상속

- CSS 스타일은 부모 태그로부터 상속됨

<p style="color:green">부모
	<em style=“font-size:25px”>자식</em> <!-- 부모 = 초록색, 자식 = 25px&초록색 -->
</p>

셀렉터

- 태그 셀렉터 = [태그명 {속성명 : 속성값;}] 형태로 입력하여 설정 (태그명이 아닌 *를 입력하면 모든 태그에 적용 가능)

- 그룹 셀렉터 = [태그명1, 태그명2, ... {속성명 : 속성값;}] 형태로 입력하여 여러 태그에 대해 공통적으로 설정

ex) div, p {} => div와 p에 모두 적용, div p {} => div 안에 있는 p에 적용

- 클래스 셀렉터 = [.클래스명 {속성명 : 속성값;}] 형태로 입력하여 설정

- 아이디 셀렉터 = 태그 내부에서 태그의 id를 지정했을 경우 [#id명 {}]을 통해 해당 특정 태그에만 CSS 적용 가능

※ CSS를 임베디드 스타일로 작성시 셀렉터 적용 순서는 위 => 아래 방향으로 적용됨

<style> <!-- 피자 => 빨간색으로 출력 -->
      ul strong {
        color: blue;
      }
      div strong {
        color: red;
      }
</style>
<style> <!-- 피자 => 파란색으로 출력 -->
      div strong {
        color: red;
      }
      ul strong {
        color: blue;
      }
</style>
    <div>
      <div>2학기 <strong>학습 내용</strong></div>
      <ul>
        <li><strong>피자</strong></li>
      </ul>
      <div>60점 이하는 F!</div>
    </div>

박스 모델

- 콘텐츠(contents) = HTML 태그의 텍스트나 이미지가 출력되는 부분
- 패딩(padding) = 콘텐츠를 직접 둘러싸고 있는 내부 여백
- 테두리(border) = 패딩 외부의 테두리
- 여백(margin) = 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래위 이웃 태그의 박스와의 거리

기본 속성

- font-size(글씨 크기), font-weight(글씨 굵기), font-style(글씨 스타일), cursor(커서 모양), opacity(투명도)

- text-align(글씨 정렬), text-decoration(글씨 꾸미기-밑줄), text-shadow(글씨 그림자 - 세로, 가로, 블러, 블러색깔)

- margin(여백 설정) => 하나 (모든 방향 적용), 두 개(세로 가로), 세 개(위 가로 아래), 네 개(위 오른 아래 왼)

- margin-top, margin-right, margin-left, margin-bottom

- padding(내부 여백 설정) - margin과 동일하게 입력하고 top, right, left, bottom 모두 존재

- border-style(선 스타일), border-color(선 색깔), border-width(선 굵기), border-radius(모서리 둥글게)

- background-color(배경색), background-size(배경 크기), background-image(배경 이미지)

- background-repeat(배경 이미지 반복 설정), background-position(배경 이미지 위치)