html (17) 썸네일형 리스트형 18. html 태그_자기소개서 만들기 DOCTYPE html> ::: 한지훈의 자기소개서 ::: /* 상단영역(header) */ #header { background-color: black; color: white; text-align: center; padding: 10px; } /* 카테고리(네비게이션) 메뉴 영역(nav) */ #nav { background-color: #eeeeee; width: 100%; height: 60px; padding: 30px; text-align: center; } /* 본문 내용영역(section) */ #section { background-color: rgb(0, 174, 255); width: 100%; padding: 10px; float: left; /* float은 다음 태그를 열단위로 .. 17. html 태그_내부프레임(iFrame) DOCTYPE html> ::: 17_HTML_태그소개_내부프레임(iFrame) ::: iFrame 사용하기 태그소개 Daum 16. html 태그_레이아웃 설정하기 DOCTYPE html> ::: 16_HTML_태그소개_레이아웃_설정하기 ::: /* 상단영역(header) */ #header { background-color: black; color: white; text-align: center; padding: 5px; } /* 카테고리(네비게이션) 메뉴 영역(nav) */ #nav { background-color: #eeeeee; width: 100%; height: 30px; padding: 10px; text-align: center; } /* 본문 내용영역(section) */ #section { background-color: aqua; width: 50%; padding: 10px; float: left; /* float은 다음 태그를 열단위로 옆으.. 15. html 태그_블록태그 사용하기 DOCTYPE html> ::: 15_HTML_태그소개_블록태그사용하기 ::: div.div_style{ background-color: black; color: white; padding: 20px; margin: 25px; } /* div 태그중에 클래스 이름이 div_style인 영역 지정 */ /* 배경색 : 검정색, 텍스트 색상 : 흰색, 패딩 : 20, 외부여백 : 25 */ div.div_style2{ background-color: blue; color: white; padding: 20px; margin: 25px; } div 블록 태그 HTML 태그에서 의미를 가지지는 않으며, 영역을 표시하기 위해 주로 사용됨. 많이 사용되는 태그임. div 블록 태그-1 HTML 태그에서 의미를 가지.. 14. html 태그_목록 생성하기 DOCTYPE html> ::: 14_HTML_태그소개_목록생성하기 ::: /* ul 태그에 스타일 지정하기 : 표식 정의하기 */ ul{ /* 채워진 원 표시(디폴트값 : 생략가능) */ /* list-style-type: disc; */ /* 채워지지 않은 원 표시 */ /* list-style-type: circle; */ /* 표식 사용하지 않기 */ /* list-style-type: none; */ /* 채워진 사각형 표시 */ /* list-style-type: square; */ /* ul 태그중에 클래스 이름이 menu인 영역 패딩 지정 */} ul.menu {padding: 0;} /* ul 태그중에 menu인 클래스의 li 태그 영역을 수평구조로 변경하기(inline) */ /* > .. 13. html 태그_Table 정의하기 DOCTYPE html> ::: 13_HTML_태그소개_Table정의하기 ::: table, td{ /* border : 테두리 라인 설정 */ border: 1px solid black; /* collapse : 두줄 라인을 한줄로 스타일 적용하기 */ border-collapse: collapse; } /* td에 대해서만 스타일 적용하기 */ td, th{ padding : 15px; /* 테두리 안쪽 여백 주기 : 15px로 */ text-align : center; /* 텍스트 중앙 정렬하기 */ } 회원 정보 목록 게시물 아이디 이름 패스워드 a001 홍길동 pwaoo1 b001 홍길동 pwaoo1 c001 홍길동 pwaoo1 b001 홍길동 c001 pwaoo1 c001 아이디 이름 패스워드.. 12. html 태그_a링크 스타일 적용 DOCTYPE html> ::: 12_HTML_태그소개_a링크스타일적용 ::: a:link { color:green; background-color:transparent; text-decoration:none; } a:visited { color:pink; background-color:transparent; text-decoration:none; } a:hover { color:red; background-color:transparent; text-decoration:underline; } a:active { color:yellow; background-color:transparent; text-decoration:underline; } tip 찾아가기 a링크 태그에 스타일 적용해보기 Daum | Na.. 11. html 태그_스타일 적용 (id-class) DOCTYPE html> ::: 11_HTML_태그소개_스타일적용_id-class ::: #p01 { color : red ; } .p02 { color : blue; } id를 이용하여 스타일 지정하기 같은 이름의 태그 중에 특정 태그만 별도로 스타일을 달리 할때.. 특정 태그를 찾기 위한 방법 중에 id 속성을 이용하는 방식이 있음 웹크롤링 할 때 특정 태그의 텍스트 내용 검색할 때 사용되기에 중요함 아이디가 지정되지 않은 p태그 영역 id와 동일하게 특정 태그들을 지정할 때 사용 (같은 이름으로 여러개 지정 가능) 여기도 클래스 적용됨.. 이전 1 2 3 다음
