My footsteps
<생활코딩> CSS 본문
*CSS 그룹 묶기 : calss="saw" (왜 saw인지 알려고 했으나..그냥 외워야하는 공식인것 같음 딱히 이유가 없더라)
> 근데 이렇게 style태그를 먹이면 saw라는 이름에 대한 선택자로 인식되기 때문에 saw 앞에 .을 붙여서
.saw 로 style태그에 적어줘야 calss가 saw인태그(calss="saw")로 인식이 잘된다
*같은 calss태그는 상단,하단 순서에 의해 차례대로 적용된다. 그래서 이렇게 되면 혼선이 일어날수 있어서 calss 태그를 이기는 태그를 써줘야 하는데 그것이 id 태그이다. id태그는 calss태그보다 뒤에 있어도 1빠로 적용된다
(태그빨 강한 순서 id > calss > a태그)
*왜 id태그가 가장 쎄냐?
: id=" "의 값은 단 한번만 등장해야한다. 예를 들자면 주민등록증 같은것이다. 중복되서는 안되는 유일무이한 값.
그래서 상대적으로 매우 포괄적인 a태그보다 id태그가 더 중요시하게 인식되어서 가장 1빠로 적용되는것이다
*display : 속성 ex)inline, block : 화면 전체를 쓰는 블럭 태그나 부분만 쓰는 태그에 이 속성을 달면 원하는 속성대로 나오게 할수있다. (인라인은 블럭으로/블럭은 인라인으로)
*display : none; 태그를 안 보이게 할 수 있음.
*wieth/color/style 등과같은 스타일 속성태그는 굳이 다 안쓰고 단위만 써도 된다. (ex; 5px/red/solid) 순서는 전혀 상관없다
> 통칭 '박스 모델(box model)이라고 부른다
*마우스 오른쪽 클릭 > 검사 눌러서 태그를 요목조목 뜯어보는것도 도움이 된다
*오로지 디자인 목적을 위해서 아무런 작용을 하지 않는 태그 <div> 이 태그는 블럭태그고 이 기능과 똑같은 태그인데 인라인 태그는 <span>이라는 태그가 있다
★그리드 사용법★
1. 그리드 먹일 부분을 div 태그로 부모처럼 감싼다
2. 다 감싼뒤 div 태그에 id값을 부여해준다 <div id="grid">
3. style태그 부분으로 올라가 스타일을 먹여준다
#grid (아이디값이 그리드 라는 뜻) { disply: grid;(그리드로 조정해주겠다는 뜻인듯?) grid-template-columns: ; (그리드의 '열' 을 나타내는뜻. 행은 row)
4. grid-template-columns의 값을 지정해준다. 얼만큼 div들을 움직일껀지.. px과 fr이라는 단위를 쓴다
<미디어 쿼리 = 반응형: 화면크기에 따라서 웹페이지들이 반응해서 동작함>
*화면 크기에 따라 반응하게 만들기
style태그안에 @media(min-width:800px)
해석: @media는 미디어쿼리 태그이고 min은 최솟값이다. 반대로 최댓값은 max
width:800px 은, 화면이 800픽셀보다 크면 사라지게 반응하는 코드이다
풀코드 (참고영상:https://youtu.be/aA4xunvDWU8)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(max-width:800px) {
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
*class 선택자는 여러개를 묶어서 쓸수있고 id 선택자는 단 하나만 가능하다
<부모 자식 선택자>
(부자 태그 표현방식) = 내용해석
ul li = 부모와 자손의 관계
ul > li = 부모와 자식의 관계
ul,li = 대등한 관계
css cheat sheet
선택자 연습 게임 : https://flukeout.github.io/
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS Diner 완료(답안/요점정리) (1/3)
CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를
velog.io
A+B : 인접한 태그 두개 선택 방법 (한개만 가능)
A~B : A에 인접해있는 모든 B태그
*even 짝수 odd 홀수
<가상클래스 선택자>
a:focus / 포커싱 되게 만드는 태그. 하얀색 박스가 생기는데 이런식이다
(input 을 html로 넣고 css에 input:focus{백그라운드/컬러 속성값} 넣은상태
<CSS 캐스캐이딩>
선택자가 이기는 순서
1. style attribute (html 태그에 직접 써주는)
2. id selector
3. class selector
4. tag selector
*순서 배정되는 기준 : 포괄적이지 않고 직관적인 것들부터
tag selector 는 (ex; li/span..등등 시멘틱 태그 그 자체들)한눈에 봐도 너무 포괄적이고
class는 중첩이 가능해서 포괄적,id는 특정 지을수 있어서 개별적이긴 하지만 style arribute만큼 직접적이진 않다.
*다 무시하고 최우선순위로 만드는 방법은
!important 라고 붙여주면 된다 > 하지만 남용은 금지!
'Develop > 곤부📙' 카테고리의 다른 글
| flex 메모 (0) | 2022.04.14 |
|---|---|
| position,display 메모 (0) | 2022.04.12 |
| <타모디자인> 홈페이지 제작 (0) | 2022.04.03 |
| <생활코딩> WEB HTML & Internet (0) | 2022.02.12 |
| <생활코딩> 공부 시작! (0) | 2022.01.23 |