::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..

* 텍스트 서식관련 font-size / text-align / text-indent / font-family color / font-style / text-shadow * 박스 모델링 width height padding margin border border-width border-color border-style box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지 지정 // 속성값 border-box (테두리를 기준으로 크기를 정함) content-box (default, 콘텐츠 영역을 기준으로 크기를 정함) boxSize.html box1입니다. box2입니다.

1. fontstyle.html div1입니다. div2입니다. div3입니다. div3입니다. div3입니다. text transform 제목입니다. 2. box.html box1입니다. box2입니다. box3입니다. 3. table.html 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 4. table_test.html 교내장학-기타장학(학생 신청 장학) 장학명 신청시기 신청방법 제출서류 복지장학 12월/6월 uwins - 장학신청 (매학기 신청) 장애인증명서/가족관계증명서 공무원본인장학 재직증명서 행복나눔명예장학 신청서 행복나눔장학 신청서 가족장학 5월/11월 가족관계증명서 국가유공자본인장학 입학금 납부 전 학생복지팀 제출 교육지원대상자증명서 국가유공자자녀장학 대학수업료등 면제대..

- html 마크업 언어 - css 표현 언어 선택자 { 속성:속성값; 속성:속성값; } * css 적용 1) 내부 스타일 시트 태그 안에 2) 외부 스타일 시트 style.css 생성 후 안에 태그를 사용하여 불러와서 사용 3) 인라인 (지금은 거의 안씀) html요소 내부에 sthle 속성을 사용하여 css를 적용 ex> * 선택자 1) tag 선택자: 태그명으로 선택 ex> div { color: red; } 2) id 선택자: id명으로 선택 ex> #box2 { color: red; } 3) class 선택자: class명으로 선택 ex> .box { color: red; } div1 div2 div3 * 텍스트 관련 스타일 속성 1) color: 텍스트의 색상을 설정 body { color: ..