:hover 요소에 마우스를 올렸을 때 스타일을 지정 내 안에 있는 애들한테만 스타일 적용 가능 1) 선택한 요소 2) 선택한 요소의 하위요소 menuhover.html green menu1 서브메뉴영역 menu2 서브메뉴영역 menu3 서브메뉴영역 menu4 서브메뉴영역 menuhover_me.html GreenMall 제품소개 submenu1 submenu2 submenu3 구매안내 submenu1 submenu2 submenu3 고객센터 submenu1 submenu2 submenu3 서비스 submenu1 submenu2 submenu3 홍보센터 submenu1 submenu2 submenu3 기업소개 submenu1 submenu2 submenu3 menuhover_teacher.html Gre..

1. isaknox_teacher.html menu search home loginchevron_right joinchevron_right Brands Product Store Customer Center NEW PRODUCT X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum X2D2 링클 포커스 세럼 wrinkle focus serum Contact us 이용약관 개인정보취급방침 family site1 family site2 (주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 / 고객상담실 080-023-7007 / 사업..

display - block / inline / inline-block / none div, ul, ol, li, h1... -> block: 너비와 높이 지정 가능, 아래쪽으로 배치됨 (얘는 한칸을 다 쓰고, 얘한테 크기를 줄 수 있다) a, span, select, ... -> inline: 너비와 높이 지정안됨, 옆으로 배치됨 (얘는 지 크기만큼만 가지고, 내가 따로 크기 못줌) inline-block: 너비와 높이 지정가능, 옆으로 배치됨, 글자처럼 취급 * 요소사이 공간이 생김 block 요소의 중앙정렬 -> 해당요소 스타일 추가 margin: 0 auto inline 요소의 중앙정렬 -> 해당요소의 부모요소에게 스타일 추가 text-align: center float left / right c..

::before(:before) - 선택한 요소의 첫 자식으로 요소를 하나 생성 - 기본값은 인라인 - content 속성과 함께 사용하며 장식용 콘텐츠를 추가할 때 사용 div::before { content: "그린"; } 컴퓨터 그린컴퓨터 이케 div 내에 생김 그린컴퓨터가 아니라 ::after(:after) header.html (초안) menu1 menu2 menu3 menu4 menu5 header.html menu1cake menu2 menu3 menu4 menu5

1. float_layout.html Green menu1 menu2 menu3 menu4 메인컨텐츠01 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 작은제목 입니다. 내용적는 부분입니다. 2020.12.17 공지사항 2020 그린컴퓨터 아카데미 소식2020.12.17 2020 그린컴퓨터 아카데미 소식2020.12.17 2020 그린컴퓨터 아카데미 소식2020.12.17 2020 그린컴퓨터 아카데미 소식2020.12.17 주소: 서울특별시 용산구 한강대로 대표이사: 그린 사업자등록번호 : 110-12-12345 통신판매신고: 제 2020-서울용산-000호 Green +) clearBoth after 추가버전 Green menu1 m..

float clear 자세히 주말에 공부해보자 float: 요소가 왼쪽, 오른쪽으로 떠 있도록 지정 left / right clear: 요소의 왼쪽 오른쪽에 부동 요소를 허용하지 않도록 지정 left / right / both 1) display 2) float 3) flexbox 4) gridbox 1. float.html box1 box2 box3 box4 div입니다. div입니다. div입니다. div입니다. div입니다. div입니다. div입니다. div입니다. div입니다. div입니다. 2. float_header.html Green menu1 menu2 menu3 menu4

배경에 효과를 주는데 사용되는 속성들 1) background-color: 요소의 배경색을 지정 red / #000000 / rgb(r, g, b) / rgba(r, g, b, a) 속기법 backgorund 2) background-image: 요소의 배경에 이미지를 지정 ex> background-image:url("dog.jpg"); 3) background-repeat: 배경이미지의 가로 및 세로 반복을 지정 no-repeat / repeat-x / repeat-y 4) background-position: 배경이미지의 시작 위치를 지정 top center bottom left center right ex> div { background-position: right bottom; } 5) back..

display_layout_2_teacher.html My Website Lorem ipsum dolor sit amet, consectetur adipiscing elit. link link link link TITLE HEADING Lorem ipsum dolor sit amet image Title text Lorem ipsum dolor sit amet, consectetur adipiscing elit. TITLE HEADING Lorem ipsum dolor sit amet image Title text Lorem ipsum dolor sit amet, consectetur adipiscing elit. About Me images Some text about me in culpa qui of..

block / inline (컨텐츠의 크기만 가짐, width, height 못줌) / inline-block (옆으로 올 수 있고 크기도 줄 수 있음) / none em, span, a, input, select, strong div, p, h1, h2, ul, ol, li, dl box1입니다. box2입니다. 저기 초록 부분때문에 공백 생김 -> 부모요소 0줘야 함 box1입니다.box2입니다. 이렇게 붙여쓰면 저거 안생기지만 소스가 길어지면 보기 복잡해애 ~ box-sizing content-box border-box

* 선택자 1. 태그 선택자 A 2. 아이디 선택자 #A 혹은 div#A 3. 클래스 선택자 .A 혹은 div.A 4. 하위 선택자 A B (하위는 자식을 선택함, 상위 선택자를 적어주고 띄어쓰기) 5. 자식 선택자 A > B (자식은 >를 넣어줌) 6. 형제 선택자 A + B 7. 연속 선택자 A, B 8. 모든태그 선택자 * ⭐ 가상 선택자 ⭐ a랑 : 절대 띄어쓰지 말기 ! a:link 방문하지 않은 링크 a:visited 방문했던 링크 /⭐ X 10/ a:hover 마우스가 올려진 링크 a:active 클릭하는 순간 링크 * 가상요소 선택자 :nth-child() :first-child :last-child :only-child :nth-of-type() :first-of-type :last-of..