2024년 2월 20일 ~ 23일 css 공부 일기
아마도 css가 끝나면 매일 일기를 쓰게 될꺼같다 지금 커리큘럼으로는 10%정도 남은거같다HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어.
CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다. 물론 inherit 값을 줘서 강제로 상속시킬 순 있다.
출처 - 나무위키
일단 지금까지 css는 엄청많이 배웠는데 스타일내부 외부 ,폰트 굵기며 밑줄 스타일 등등 border랑 시멘틱 태그, float, position, 배경이미지, 속성 선택자, 가상 선택자 등
배웠다
이번에 css 배운 것 중 제일 어렵게 느껴지던 부분이 가상선택자 인데
그래서 코드를 들고 왔다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./ddd.css" />
</head>
<body>
<a href="https://www.daum.net/">다음</a>
<br />
<a href="https://www.naver.net/">네이버</a>
<br />
<a href="https://www.nate.net/">네이트</a>
<div>
<input type="text" name="" id="" />
<br />
<input type="checkbox" name="chk-box" id="chk-1" />
<label for="chk-1">제육볶음</label>
<input type="checkbox" name="chk-box" id="chk-2" />
<label for="chk-2">햄버거</label>
</div>
<div>
<a href="#p-1">메뉴1</a>
<br />
<a href="#p-2">메뉴2</a>
</div>
<p id="p-1">p-1</p>
<p id="p-2">p-2</p>
<div class="container1">
<h3>container1 -> h3</h3>
<h3>container1 -> h3</h3>
<span>container1 -> span</span>
<span>container1 -> span</span>
<p>container -> p</p>
<p>container -> p</p>
</div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
</body>
</html>
/*
가상 선택자
HTML 요소의 상태에 따라 선택해 스타일을 지정하는 선택자
기본 형테 >> 선택자:가상클래스명
*/
/* :link : 아직 방문하지 않은 링크요소를 선택 */
a:link {
color: green;
}
/* :visited : 방문한 적 잇는 링크 요소를 선택 */
a:visited {
color: palevioletred;
}
/* :hover : 마우스 커서가 올라가 있는 요소를 선택 */
a:hover {
color: red;
}
/* :active : 링크를 클릭하고 있는 요소를 선택 */
a:active {
background-color: cadetblue;
}
/* :focus :포커스가 적용되어 있는 요소 선택 */
input:focus {
border: 3px solid palegreen;
outline: none;
/* 포커스 시 기존 테두리 지움*/
}
/* :checked : 체크된 상태의 input 요소를 선택 */
input:checked + label {
font-weight: 900;
}
/* :target : 문서 내부 링크의 현재 활성화 된 요소를 선택 */
#p-1:target {
background-color: tomato;
}
#p-2:target {
background-color: thistle;
}
/* :not(선택자) : 해당 선택자를 제외한 나머지 요소를 선택 */
.container1 :not(span) {
color: blueviolet;
}
/* :nth-child(숫자n) :n번째 자식 요소를 선택 */
ul :nth-child(3) {
color: red;
}
/* :nth-child(n + 숫자) : 숫자 번째 자식요소부터 끝까지 선택 */
ul :nth-child(n + 4) {
color: plum;
}
/* :nth-child(-n + 숫자) : 처음부터 숫자 번째 자식요소까지 선택 */
ul :nth-child(-n + 4) {
color: yellow;
}
/* :nth-child(n + 숫자):nth-child(-n + 숫자) : 범위로 자식요소를 선택 */
ul :nth-child(n + 2):nth-child(-n + 4) {
background-color: brown;
}
/* :nth-child(odd || even) : 홀수 또는 짝수 번째 자식 요소를 선택 */
ul :nth-child(odd) {
background-color: aquamarine;
}
ul :nth-child(even) {
background-color: antiquewhite;
}
/* 선택자:nth-of-type(숫자) : 해당 선택자의 n번째 요소에 스타일 적용 */
.container1 p:nth-of-type(2) {
background-color: bisque;
}
집에와서 다시한번 작성했는데 지금 외운다하더라도 안쓰면 까먹게 될꺼같다 ,,,
잘만 쓰면 편할지도 ?
근데 의문이 생긴 부분이 있다 여기 보면 마지막에 이 부분
ul :nth-child(n + 2):nth-child(-n + 4) {
background-color: brown;
}결과를 보게되면 이렇다
코드는 제일 마지막이 아닌데 저게 우선순위가 되는 이유가 뭘까 ,, 정확한 범위가 지정이 되있어서 그런가 ?
흠 ,, 나중에 찾아봐야겠다 난 이런 의문이 생기는게 좋다
그리고 속성 선택자도 있는데 그것도 나한텐 좀 어렵길래 정리를 해보았는데
난 그냥 선택자는 다 어려운거같다 ,,,, (ू˃̣̣̣̣̣̣︿˂̣̣̣̣̣̣ ू)
/*
속성 선택자 (Attribute Selctor)
HTML 요소의 속성을 이용해서 특정 요소를 선택
*/
/* [속성명] : 특정 속성명이 있는 요소를 선택 */
[target] {
color: green;
}
/* [속성명=속성값] : 속성명과 속성값이 일치하는 요소를 선택*/
[target="_blank"] {
color: aqua;
}
/* [속성명~=속성값] : 해당 속성에 속성값이 포함되어 있는 요소를 선택 */
[class~=att-class] {
color: blue;
}
/* [속성명|=속성값] : 속성값이 완전 일치 또는 '속성값 + '-'인 요소를 선택 */
[class|=att] {
color: blueviolet;
}
/* [속성명^=속성값] : 해당 속성에서 속성값으로 시작하는 요소를 선택 */
[class^=att-] {
background-color: antiquewhite;
}
/* [속성명$=속성값] : 해당 속성에서 속성값으로 끝나는 요소를 선택 */
[class$=ss] {
color: brown;
}
/* [속성명*=속성값] : 해상 속성에서 속성값이 부분일치하는 요소를 선택*/
[class*=tt] {
color: black;
}근데 속성 선택자를 쓸 일이 많을까 ?? 그래도 모르는것 보단 아는게 낫다고 생각을 한다 나는.
이번주 일기 끝
개발 일기 ( •̀ ω •́ )✧