CSS 1
CSS(Style sheet)
. HTML을 이용한 문서 표현의 한계점을 보완하기 위해 도입
. 장식이나 레이아웃을 하기 위한 언어
. css를 사용하면 한번의 정의로 여러 문서에 적용할 수 있으므로, 홈페이지의 디자인 통일성을 구현할 수 있음
. HTML과 CSS의 문법차이
속성값을 표현하는데 있어 CSS는 따옴표를 사용하지 않음
=를 사용하지 않고, :(콜론)를 사용함
- HTML에서는 여러개의 속성구분은 공백을 사용하지만, CSS에서는 새미콜론(;)을 사용함
- HTML에서는 단위가 생략될 수 있으나, CSS에서는 반드시 단위를 작성해야 함
- HTML과 마찬가지로 대소문자를 구분하지 않음
. CSS를 HTML 문서에 적용하는 방식 3가지
1) 인라인 방식
; HTML태그의 속성으로 직접 style속성을 적용하는 방식
2) 임베디드 방식
; head태그 안에 <style></style>요소에 스타일을 정의함
3) link 방식
; HTML문서와 별도로 스타일만을 정의한 css파일(~~.css)을 만든 후,
HTML문서에 link태그를 이용하여 링크시키는 방식
<link rel="stylesheet" type="text/css" href="css파일" media="미디어타입">
. rel : 외부파일과 현재 문서와의 관계
. type: 불러올 외부 파일이 텍스트 형식의 css파일임
. href: 외부에 저장해둔 스타일시트 파일의 url지정
4) 임포트 방식(import)
; <style>
@import url("주소");
</style>
>> 적용의 순서는 body에 가까운 것부터 적용됨
. 상속(inheritance)
; 부모요소의 스타일을 자식이 물려받아 적용하는 것
- 상속되는 속성과 상속되지 않는 속성으로 분류됨
(참조) https://www.w3.org/TR/CSS2/propidx.html
상속됨 상속안됨
----------------------------------------------------------
color, font-family background-color
font-size, font-weight background-image
text-align 등 background-repeat
display 등
3가지 속성값을 지정할 수 있음
. inherit: 강제상속 - 상속받지 않는 스타일 규칙을 강제로 상속시킬때 적용
. initial: 초기화 - 브라우저의 기본 스타일 시트에서 설정된 값과 동일하게 설정
. unset : 상속안되는것은 상속안되는 것으로 natural값으로 재설정함
<title>상속</title>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
width: 800px; height: 300px;
color:red; 상속
font-size: 20px; 상속
border: 5px dashed blue; 상속안됨
}
#a {color: blue;
border: inherit;
}
#b {color: initial;
border:
}
#b {color: unset;
}
#c {color : unset;
border: inherit;
border: unset;
}
</style>
</head>
<body>
<div>
<p id="a">CSS에 오신 것을 환영합니다.</p>
<p id="b">CSS에 오신 것을 환영합니다.</p>
<p id="c">CSS에 오신 것을 환영합니다.</p>
</div>
</body>
미디어쿼리
. 미디어의 조건을 설정하게 함으로써 특정 미디어에 적용하는 스타일을 좀 더 상세히 지정할 수 있다
. 미디어 타입, 미디어 특성, 연산자를 이용하여 대상이 되는 미디어의 디자인조건을 설정한다
. 대소문자를 구분하지 않는다
. 미디어쿼리에 사용하는 연산자
- and : 여러 미디어의 특징을 하나로 결합한다
>> 새로운 미디어 특징을 추가할 때마다 사용
>> @media screen and (min-width:400px) and (max-width:700px) {}
- or(,쉼표): 쉼표로 분리된 각 목록은 각각의 개별 미디어 쿼리이다
- not : 설정해 놓은 미디어의 특징이 아니라면!
- only: 해당 미디어 특징을 지정
. 문법
@media 미디어대상 and (미디어속성: 값) and (미디어속성: 값) {적용할 css}
예) @media (min-width:700px) {background-color: yellow}
>> @media all and (min-width:700px) {background-color: yellow}와 같다
@media screen and (min-width:700px) {background-color: yellow}
@media not screen and ~~ {}
@media only screen and ~~ {}
. 미디어 특성
- width : 창의 너비
- height: 창의 높이
- device-width: 장치의 너비
- device-height: 디스플레이의 높이
- orientation : 디바이스의 방향 (가로/세로) (landscape/portrait)
- aspect-ratio: 창의 가로세로비
- color : 컬러인 경우
- monochrome : 흑백인 경우
- resolution: 해상도
<style type="text/css">
body {text-align: center;}
div{
margin: 10px;
padding: 10px;
color: #FA8072;
font-family: Impact, sans-serif;
font-size: 50vh;
}
@media only screen and (max-width: 600px) {
body {
background-color: #FAFAD2;
}
}
@media not screen and (max-width:600px){
body {
background-color: yellow;
}
}
@media all and (orientation: portrait){
#sample{
color: orange;
text-shadow: white 20px 10px;
}
}
@media all and (orientation: landscape){
#sample{
color: white;
text-shadow: darkgray 10px 10px;
}
}
</style>
</head>
<body>
<div id="sample">WIDTH</div>
</body>
. CSS규칙
- 스타일은 부모태그로 부터 상속됨
- 스타일 합치기(cascading)와 오버라이딩(overriding)
. 색상지정방식
- 방식 : RGB, RGBA, HSL, HSLA
1) RGB : #rrggbb 00~ff로 구성 두자리씩 총 6자리로 구성
>> color : #01f9af, #aabbcc -> #abc
2) RGBA: #rrggbba (a:불투명도 0.0~1.0)
>> color : rgb(10,150,201,0.5)
3) HSL(색상, 채도, 밝기)
. hue (색상) : 0~360 (0빨강, 120녹색, 240파랑)
. saturation(채도) : 선명함의 정도 0%(무채색) ~ 100%(순색)
. lightness(밝기) : 0%(어두움) ~ 100%(밝음)
>>hsl(0, 100%, 50%), hsl(120, 1500%, 50%)
. 각도지정방식
- deg : 도(360deg = 1회전)
- grad: 그레이드법에 기초한 각도 (400grade=1회전)
- rad : 라디언 (2파이)
- turn: 회전
>> div {transform: rotate(45deg)}
선택자 {속성명: 속성값; }
선택자의 종류
- 타입선택자 : 태그{ }
- 선택자 그룹화: 태그, 태그, 태그,,{ }
- id선택자 : #id명 { }
- class선택자: .class명{ }
- 애스터리스크(estrerisk)선택자 : *{ }
- 자식선택자 : 선택자 > 자식 { }
- 인접선택자 : 선택자 + 인접 { }
- 문맥(자손)선택자: 선택자 자손선택자 { }
- 속성선택자 : 태그[속성] { } ----- > h1[class], img[alt], *[title]
- 가상클래스선택자
; css에서 제공되는 40여종의 가상클래스 선택자
. 마우스 선택자:hover 마우스가 올라갈때의 스타일 적용
선택자:activie 마우스를 누르고 있는 상황에서의 스타일 적용
. 폼 요소 선택자:focus 폼요소가 키보드나 마우스 클릭으로 포커스를 받을때 스타일
. 링크 선택자:link 방문하지 않은 링크에 스타일 적용
선택자:visited 방문한 후의 링크에 스타일 적용(color, background-color,
border-color 색관련만 가능)
. 블록 선택자:first-letter 블록형태그에서 첫글자에만 스타일 적용
선택자:first-line 블록형 태그의 첫번째 라인에 스타일 적용
. 구조 선택자:nth-child(even) 짝수번째 모든 자식태그에 스타일 적용
선택자:nth-child(n) n번째 자식태그에 스타일 적용
선택자:first-child
선택자:last-child
선택자:before 요소의 맨앞에 배치하는 마크업에 없는 가상요소
선택자:after 요소의 맨뒤에 배치하는 마크업에 없는 가상요소
<title>선택자 실습</title>
<style type="text/css">
#list {background-color: mistyrose;}
ul>li+ul>li+ul>li {color:blue;} 자식>, 인접+
ul p{color:red;} 자손
ul+li{color:green;}
</style>
</head>
<body>
<ul id="list">
<li> HTML</li>
<ul>
<li>첫번째 리스트 안에 리스트</li>
<ul>
<li>제일 안쪽 리스트</li>
<p>p태그 입니다</p>
</ul>
<li>두번째 리스트안에 리스트</li>
<p>두번째 p태그</p>
</ul>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</body>
<title>선택자 실습2</title>
<style type="text/css">
.bg{background-color:#66CDAA;}
p>span{color:#FF69B4}
#s{font-size:30px; font-weight:bolder; color:blue}
.style1{font-size:15px; color:black}
.style2{font-size:20px}
</style>
</head>
<body class="bg">
<p>class속성을 활용한 학습</p>
<p class="style1">
<span>생강차</span>와 <span id="s">박하차</span>는 졸음을 달아내고 뇌기능을 활성화한다.<br>
박하사탕을 먹으면 입안에 화한 기운이 느껴진다<br>
차도 마찬가지이다. 머리가 지끈거리거나 아플 때 적당하다
</p>
<h3 class="style2">한국차는 건강에 아주 좋습니다.</h3>
</body>
<title>선택자 실습3</title>
<style type="text/css">
.a{background-color:#F5F5F5 }
/* .a.a{background-color:#FFEBCD} */
.b{font-size: 30px; color:#FF69B4;}
.c{font-size: 10px; color:#48D1CC}
.f{font-size: 15px; color:green}
</style>
</head>
<body>
<div class="a a">선택자: a a</div>
<div class="a b">선택자: a b</div>
<div class="a c">선택자: a c</div>
<div class="a d e">선택자: a d e</div>
<div class="a d f">선택자: a d e</div>
</body>