html & css / 가상요소, semantic
*border-radius: 50px 박스모서리 라운드효과
-박스로 동그라미,나뭇잎모양도 만들수있음
*border-bottom: 1px solid rgba(255,255,255,0.5)
그냥 opacity를 넣으면 전부 불투명해지기때문에 rgba로 넣어주기
*div로 묶을때 수평으로 분할되있으면 그부분대로 묶어주고 그 요소에도 clear해줘야 높이값 인식
-이때 묶여진 요소마다 float값을 줬음 그 묶은요소에는 패딩넣으면 그게 박스채로 들어가는거라 적용이안됨
*ul은 div랑 같은 블록요소 이기때문에 div로 안묶고 img만 div로 한번더묶어줌
★가상요소
[하이퍼링크와 관련된 가상요소 - 마우스를 올렸을때 영역색이 변하고 클릭했을때 또 변함]
a / a:link{}
a{text-decoration:none; color:#000;} a태그의 밑줄을 없애는 초기화요소
:link (마우스를 올리지 않았을때의 기본링크)-어떤작용도 x
:visited (한번 방문한 링크)
- 이 두개는 뭉뚱그려서 a로
:hover (마우스를 올렸을때)-링크가 아닌요소에도 많이 쓰임
:active (마우스를 클릭하는 순간)
:focus (탭키로 포커스 했을 때)-시각장애인은 마우스로 클릭불가, 탭키로 움직임
※ul li a{;} =하위요소 선택한 방법
ul li a{background: #000; color: #fff; display: block;
border-bottom: 1px solid #fff;
padding: 10px 20px;}
ul li a:hover{background: #f00;}
ul li a:active{background: #00f;}
ul li a:focus{background: #0f0;}
※ 이 a가 인라인이라 마우스올렸을때 링크이동해지는 공간이 작기때문에
저 {}안에 display{block;}을 넣어 블록요소로 성격을 바꿔주었음 -*필수*
*padding은 크기를 넓게하기 위해 쓰고 a와 hover만 보통 사용함
*이미지백그라운드쓰면 호버해서 색변경할때 이미지도바뀌지않게 반복적으로 속성넣어줌
*이 호버했을때 컬러변경되는걸 활성화시킬려면 복사해서 class를 줌
- html에 가서 a속성안에 class주고 css에도 그대로 입력
*클래스 단어
lnb: local navigation bar 2차메뉴 (있을때없을때도있고 계속변함)
gnb: global navigation bar 상단 1차메뉴 / 변함x
snb : sub navigation bar 서브 (lnb랑 비슷)
util : 상단에 로그인,언어같은거
header
footer
*font-style: italic; = em태그
*이미지에도 line-height가 적용된다 - 사진을 dl에 dd로 넣었더니 공간이 밑에 5픽셀이 남음
고치는 방법 1. 이미지 묶은 요소에 (dd) line-height:0
2. img{display:block;} 이미지를 블록요소로 성격바꿔줌
3. img{vertical-align:top;} 이미지를 수직정렬해줌
-------------------------------------------------------------------------------------------------------------
*id 선택자 = #선택자명{} =클래스랑 사용방법은 같은데 기호가 다름
ex) <div id="선택자명"> 으로 html에 기입
class는 세세한 디테일, id는 구조요소
※선택자명을 페이지 내에서 한번만 쓸수있음
ex)<div id="header">쓰고나면 header1을하던지 추가해야됨
*너비 계산 공식
width:calc(); ()안에 공식을 넣는다
※연산자 +-*/ 넣을때 주의사항 : +,-는 앞뒤로 한칸씩 띄운다
ex) width:calc(100% - 300px);
*가상선택자
ul li:first-child
ul 안에 포함된 요소의 첫번째요소 라는 뜻 - *하위요소선택 ul li a 이렇게 띄어쓰면됨
:first-child 첫번째요소 지칭
:last-child 마지막 요소 지칭
:nth-child{순서지정ex)2}
:nth-child(odd)홀수 (even)짝수 (4n)배수
*예시
html에서
<div class="txt">
<h2>
<p>=뜻1
<p>=뜻2
<p>
작성하고
css에 이렇게작성
.txt p:nth-child(2){} =뜻1
.txt p:nth-of-type(2){} =뜻2
뜻 위치대로 보면됨
*table에 오른쪽 끝에 보더를 없애려면
tr :last-child{border-right: none}
ㄴ 이거:앞에 th던 td던 상관없음 tr이 중요한거지만 어쨋든 적는게 좋은데 지금은 비워뒀음
※이걸 사용하게되면 순서가있는경우 ul,table등 클래스를 안줘도된다
*gradient 직선형은 linear 원형은 raidal
background:linear-gradient(시작색상,끝색상)
background:radial-gradient(#fff.#000)
.gnb li:hover{background: linear-gradient(to right,#71ecfe,#0986d4); }
=호버로 직선그라디언트넣는데 오른쪽으로 그라디언트가 들어간다는 뜻
여기서 내가 글자색을 바꾸려면 여기서 color를 넣는게 아니다
하위요소 a를 위에서 검정으로 지정해놨기때문에 넣어도 안먹힌다
그러면 이렇게 .gnb li a:hover{color: #fff;}로 넣어준다
※그리고 누르는 것 마다 컬러 다르게 넣으려면 nth-child사용 (가상선택자 중복가능)
.gnb li:nth-child(1):hover{background: linear-gradient(#73effe,#017ed2);}
★web layout
<header></header>헤더는 헤더 부분에만 사용하는 태그
이 영역안에 들어가는 필수태그
<h1> : 로고(<a> 링크)
<nav> : 네비게이션 영역에 사용
<ul class="gnb">
</nav>
<section></section>이 페이지내의 독립적인 컨텐츠 부분
주의사항: 제목요소를 필수로 포함해야함 ex)h2-h6중에 하나가 들어감 (h1은 위에 들어갔으니까)
<article></article>컨텐츠기입하는 부분인데 섹션이랑 구분되는 점은
섹션은 주제에 대해 관련된 컨텐츠를 쓰고
아티클은 주제랑 관련없는 독립적인 컨텐츠를 기입한다
그래서 섹션을 주로 쓰고 아티클은 배너영역에 한두개정도 들어간다
<aside></aside>줄줄따라다니는 왼쪽 사이드바메뉴 영역
<footer>
<address></address>기본정보를 뜻함 ex)전화번호,연락처,주소
필수는 아닌데 <p class="copy">copyright<p> 저작권 표기
</footer>
=이런 태그를 semantic 시멘틱태그 = 의미를 가진 태그 라고 한다
*푸터는 개인정보들고가는 사이트면 꼭 필수로 들어감
*h1이 한개 이상들어가도 안들어가도 에러뜨고 alt안넣어도 에러뜸- 유효성검사에 다나옴
