본문 바로가기

Python_WEB

 (436)
HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1) 1. Website 제작 실습 - 구성 요소 : Header / Section / Footer / Navigation-gnb / Navigation-gnb-submenu Navigation-lnb / Navigation-lnb-submenu / aside - 총 3행 분할 구조 ㄱ. 1행 : Header / Navigation-gnb / Navigation-gnb-submenu / Navigation-lnb / Navigation-lnb-submenu ㄴ. 2행 : Section / aside ㄷ. 3행 : Footer 2. CSS 초기화 코드(동일한 출력 만들기) *{ margin:0 auto; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration..
HTML5 - 190616 Basic Study 42(박스 가로 방향 배치) 1. HTML Code 박스 가로 방향으로 배치하기 주메뉴1 서브메뉴1 주메뉴2 서브메뉴2 주메뉴3 서브메뉴3 박스 가로 방향으로 배치하기 2. CSS Code @charset "utf-8"; /* CSS Document */ /* CSS 초기화 선수작업 */ *{ margin:0; padding:0; } ul,li,ol{ list-style:none; } a{ text-decoration:none; color:black; } /* 박스 가로방향으로 배치하기 */ /* 1) float:left */ #papa{ /* float:left; */ } /* 2) display:inline-block */ #papa li{ /* display:inline-block; */ border:1px solid red;..
HTML5 - 190616 Basic Study 41(Float 해제 방법) 1. Float 해제 방법 float를 해제하지 않으면 다음 박스들에 속성이 제대로 지정되지 않음. 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 하나도 나오지 않음. 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요함. 부모 요소에 height를 주면 float 해제 효과가 있으나 본문 내용에 height를 주면 유지보수가 힘들어지니 container 본문 부분에서는 꼭 필요한 경우가 아니면 height를 주지 않음. 2. HTML Code CSS 레이아웃 공식정리하기 박스1 서브메뉴1 박스2 서브메뉴2 박스3 서브메뉴3 CSS 레이아웃 공식정리하기 3. CSS Code @charset "utf-8"; /* CSS Document */ /* CSS 초기화 선수작업 */ *{ margin..
HTML5 - 190615 Basic Study 40(Note) HTML 강좌 19 배경속성 background : 통합속성 background-color background-image background-repeat background-position background-attachment background-repeat:no-repeat background-repeat:repeat-x background-position:0 0 픽셀단위, 키워드 안뒤, % 단위 50px 50px left top center right bottom 50% 50% background-attachment:fixed background-attachment:scroll 중첩 배경 이미지 gif 나 png 투명 바탕이 지원됨 UI UX 97번 이미지 클립핑 HTML 활용예제 17번 activ..
HTML5 - 190615 Basic Study 39(우엉조림 메뉴 만들기) 1. HTML Code 우엉조림 김밥 재료로도 좋고 밑반찬으로도 효과 만점 영양 만점인 우엉 조림을 만들어 보세요. 분량 : 4인분 요리시간 : 30분 칼로리 : 670cal 재료 주재료 우엉, 통깨 약간 부재료 간장, 설탕, 물엿, 맛술, 물 조리법 우엉은 껍질을 벗기고 알맞은 길이로 채를 썬다. 우엉을 식초물에 담구어 잡내와 색이 변하지 않게 한다. 프라이팬에 식용유를 넣고 살짝 볶는다. 간장, 설탕, 맛술, 물, 물엿과 우엉을 넣고 서서히 약한 불에서 조린다. 통깨를 뿌린다. 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-family:sans-serif,"맑은 고딕"; font-size:14p..
HTML5 - 190615 Basic Study 38(아이콘 리스트 예제) 1. HTML Code 아이콘 리스트 예제 전화걸기 트위터 페이스북 메일 RSS 음악 검색 홈 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-family:sans-serif,"맑은 고딕"; font-size:14px; color:black; } ul,li{ list-style:none; } a{ text-decoration:none; color:black; } #icon_list{ overflow:hidden; } #icon_list li{ width:25%; height:96px; float:left; /* 박스처리 */ /* border:1px solid black; */ /* 테두리처리 */ ..
HTML5 - 190615 Basic Study 37(롤 오버 효과 주기) 1. HTML Code 롤오버 효과주기 daum 다음 naver 네이버 nate 네이트 다음 daum 네이버 naver 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-family:sans-serift, "맑은 고딕"; font-size:14px; color:black; } ul, li{ list-style:none; } a{ text-decoration:none; color:black; } /* 롤오버 효과주기 */ dl dt,dl dd{ float:left; width:80px; height:50px; border:1px solid red; } dl dd{ display:none; } dl dt:..
HTML5 - 190615 Basic Study 36(가로 네비게이션 바) 1. HTML Code 가로네비게이션 바 지역 쇼핑 문화 여행 레저 추천 전체보기 2. CSS Code @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; } body{ font-family:sans-serift, "맑은 고딕"; font-size:14px; color:black; } ul, li{ list-style:none; } a{ text-decoration:none; color:black; } /* 가로네비게이션 */ ol{ overflow:hidden; width:1000px; } ol li{ width:140px; height:50px; background:url(../img/top_gnb1-1.png); /* 글자숨기기 */ text..

티스토리툴바