웹퍼블리싱(CSS) / 1
<선택자>
- 어떠한 태그에 대해 스타일을 적용할때 하나하나씩 적용하면 불편하니까,
<style>을 따로 만들어서 그 안에서 선택자를 지정하고 일괄적으로 스타일 적용해줌
ex) h1{color:red; font-size:10px;}
- 구분자는 오른쪽 말고 밑으로 내려쓰는게 좋다
<확인문제: 설명도 붙이기!!!!>
다음 중 CSS에 대한 설명으로 올바르지 않은 것은?
① CSS는 Cascading Style Sheet를 의미하며 기존 HTML이 가지는 스타일을 다른 모양으로 변경하기 위해 사용하는 언어이다.
② Cascading이란 계단식 스타일 적용 방식을 의미하며 기존 스타일을 덮어쓰는 방식을 말한다.
③ CSS 명령어(또는 속성)를 사용하는 곳은 HTML의 style 속성, <style> 태그 영역, 외부 .css 파일에서 사용할 수 있다.
④ CSS는 HTML과 함께 만들어졌으나 과거에는 잘 사용되지 않다가 요즘에는 필수로 사용되고 있다.
👉 필수적으로 같이 쓰일수밖에 없음. 버전이 매번 달라지는것뿐이다
<id와 c lass의 차이점>
- id는 주소값으로도 나오는..뭔가 구역을 이동하고 표시하기 용이한 그런거고
class는 css로 style을 줄때 쓰는것
<속성 선택자>
- h1[class] { } 뜻은 h1태그에 클래스가 붙은것을 의미한다
ex) h1 class="h1" / h1 class="h2"
- h1[class="h1"] 의 의미는 h1태그에 클래스네임이 h1으로 붙은것을 의미
ex) h1 class="h1"
[attr] [attr=value] 매칭
[attr ~=value] 지정한 단어가 여러개의 목록중에서 하나와 일치되면 그것을 선택한다. 온전히 단어 그자체가 있어야함
[attr |=value] 지정한 단어에 -(대시)가 포함되어 있어도 그것을 선택할수 있다
[attr ^=value] 지정한 단어로 시작하면 선택
[attr $=value] 지정한 단어로 끝나면 선택
[attr *=value] 문자열안에 지정한 단어가 있기만 하면 선택
[attr operator value i] 대소문자 상관없이 선택하겠다 (i가 꼭 있어야만 이 의미임)
👇속성 선택자 보충 설명...👇
http://www.tcpschool.com/css/css_selector_attribute
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
<콤비네이션 연산자>
- A > B : B가 A의 자손이다
- A+B : A의 바로 밑동생인 B를 찾아라
- A~B :A의 옆에 있는 B를 찾아라
<선택자 우선순위>
- id > class > tag 순으로 우선순위가 높다
(더 정밀하게 표현한게 우선순위가 높음)
- 동급은 덮어쓰기가 가능하다
- @import url(style.css); 이 방식으로 css를 가져오는게 바람직하다 (데이터를 덜 잡아먹어서?)
- id는 딱 하나만 대상하는 것이기 때문에 css에서도 우선순위가 가장 높다
<크기를 나타내는 단위>
- vh : 뷰포트(화면크기) 높이
- % : 부모영역 기준의 퍼센테이지(상위부모들이 높이가 없거나 그러면 계속 타고타고 부모를 찾아 올라가야함)
- vmin : 상대적으로 더 짧은쪽
- vmax : 상대적으로 더 긴쪽
- em : 같은 블럭 내에 있는 폰트 사이즈에 비례해서 커짐(같은 블럭 내에 없으면 부모를 따라감)
<배경 이미지>
- background-image: URL.. (이미지 넣기)
- background-repeat : no-repeat (이미지 반복 안되게)
- backgrount-position : 10px,10px 또는 right,bottom 또는, top 10px bottom 10px
이런식으로 직접써서 위치 지정도 가능하다
- background-size : cover 이미지가 짤림없이.비율이 깨지지 않고 채워져서 딱맞게 들어간다
- css 만들때 스타일을 감싸는 더 큰 블럭을 만들때는 무조건 div를 써야한다
- 구분자는 대시 - 로 쓴다
- background-size:cover로 하면 사진이 딱 들어 맞는다
<그라디언트 배경색>
- background-size:cover로 하면 사진이 딱 들어 맞는다
- deg : 그라디언트 방향 각도 단위
- background : linear-gradient로 넣어줄수 있다
- 백그라운드 속성 한번에 쓰는 방법
background: linear-gradient(rgb(182, 139, 94),transparent),
url("./images/1.jpg") no-repeat center/cover;
- overflow:scroll (컨텐트가 늘어나서 넘어가게되면 스크롤로 내릴수 있게 해준다)
- background-attachment : fixed (배경이 고정됨.바깥쪽 스크롤 내려도 고정)
- background-attachment : scroll (바깥쪽 스크롤 내려가면 같이 내려감)
- background-attachment : local (배경이 영역에 붙어버림)
<폰트>
- font-family는 폰트의 속성을 의미한다 (볼드,이탤릭..)
- font-family에서 옆에 여러개의 글꼴을 써주는건 대체제글꼴을 의미한다
- sans-serif : 폰트계열명을 의미
- font-style : oblique 폰트 각도를 설정할수 있다 (숫자)deg로 각도를 조절할수 있다