본문 바로가기

기초

(44)
HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계) 1. HTML Code 위치 속성2 버튼1 버튼1 버튼1 버튼1 버튼1 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } /* 목록 기호 없애기 */ ul, li{ list-style:none; } ul{ overflow:hidden; position:relative; left:200px; top:100px; } ul li{ float:left; padding:10px; } ul li:hover{ background:pink; } 3. HTML / CSS 파일 4. HTML 미리보기
HTML5 - 190609 Basic Study 27(위치 속성) 1. HTML Code 위치 속성 박스1 박스2 박스3 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } ul, li{ list-style:none; } h1{ width:100%; background:pink; width:70%; margin:auto; text-align:center; height:80px; line-height:80px; /* line-height:calc(80px); */ } div{ width:150px; height:150px; border:3px solid black; } #box1{ background:red; position:absolute; left:50px; top:50px; z-ind..
HTML5 - 190609 Basic Study 26(:taget 활용하기) 1. HTML Code css 선택자 :target활용하기(탭 메뉴) aaa bbb ccc 여기는 aaa입니다 여기는 bbb입니다 여기는 ccc입니다 2. CSS Code @charset "utf-8"; /* CSS Document */ div{ width:200px; height:100px; background:pink; /* border:1px solid red; */ /* display:none; */ height:0; overflow:hidden; transition:1s; } #aaa:target{ /* display:block; */ height:150px; border:1px solid red; background:gold; } #bbb:target{ /* display:block; */ b..
HTML5 - 190609 Basic Study 25(상태,링크,반응 선택) 1. 상태 선택자 :checked input:checked :focus input:focus :enabled input:enabled :disabled input:disabled :target input:target 2. 링크 선택자 :link a:lilnk :visited a:visited 3. 반응 선택자 선택자:active div:active 선택자:hover div:hover 4. HTML Code 상태 선택자, 링크 선택자, 반응 선택자 :active :hover :checked :focus :enabled :disabled :target :link :visited 링크 선택자 문자 선택자 :first-letter :first-line :after :before ::selection welcom..
HTML5 - 190609 Basic Study 24(CSS 속성 선택자) 1. 속성 선택자 기본속성 선택자[속성=값] input[type=text] 문자열속성 선택자[속성~=값] 공백 div[data-role~=row] 선택자[속성|=값] 하이픈 div[data-role!=row] 선택자[속성^=값] 시작 div[data-role^=row] 선택자[속성$=값] 끝 div[data-role$=row] 선택자[속성*=값] 포함 div[data-role*=row] 2. HTML Code CSS 2일차 newspaper newspaper newspaper newspaper newspaper 3. CSS Code @charset "utf-8"; /* CSS Document */ /* p 태그에 클래스 속성이 newspaper에 background 적용 */ p[class=newspap..
HTML5 - 190609 Basic Study 23(CSS 상속) 1. HTML Code css 상속에 대해서 32px=2em 부모요소에 적용한 스타일이 자식요소에 그대로 적용되는 현상 자동상속과 수동상속이 잇다 수동상속은 키워드 inherit를 사용한다. 자동상속은 글자스타일이 주로 상속된다. div내에 글자 div안에 p박스에 글자 링크(Link) css 스타일 우선 순위 welcome 안녕하세요 감사합니다 아이디선택자 인라인스타일 2. CSS Code @charset "utf-8"; /* CSS Document */ html{} body{ color:blue; font-family:sans-serif; font-size:14px; } div{ color:red; border:1px solid red; width:500px; } p{ color:green; /* 테..
HTML5 - 190608 Basic Study 21(CSS 반응 선택자) 1. 반응 선택자 선택자:active div:active 클릭 시 선택자:hover div:hover 마우스 롤 오버 시 2. HTML Code url 단위 마우스를 올리세요 box1 box2 box3 box4 3. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } ul, li{ list-style:none; } a{ color:black; text-decoration:none; } /* 박스에 배경 그림 넣기 */ div#box1{ width:400px; height:400px; background-image:url(../img/3.png); } div#box1:hover{ background-image:url(../i..
HTML5 - 190608 Basic Study 20(CSS 동위(형제) 선택자) 1. 동위(형제) 선택자 선택자+선택자 h1+div A다음에B 선택자~선택자 h1~div A이후에B들 2. HTML Code 네비게이션바 만들기 동위(형제 선택자) 메인메뉴1 서브메뉴1 메인메뉴2 서브메뉴2 보이기/숨기기 welcome to my world happy new year merry christmas css 색상단위 css 색상단위 3. CSS Code @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } ul, li{ list-style:none; } a{ color:black; text-decoration:none; } h3{ width:200px; border:1px solid black; } h3:hover{ backgro..